Button Script

Guest_imported · Jun 15, 1999

Hi! 
 
I wrote a script that will change a button on a mouseover, a mouseout and on a mousedown. It works very well, however I would like the "button" to change and stay changed when someone clicks on it (mousedown). However I also want the button to change then change back when the mouse travels over it. I can do the second with no problem, but I can't see any way of telling the script to NOT change the button if it is clicked, until another button is clicked. 
Here is the code snippet that I am working with 
 
I set up the images like so: 
 
image1= new Image(); 
image1.src = "images/Home1.jpg"; 
image1on = new Image(); 
image1on.src = "images/Home2.jpg"; 
image1clik = new Image(); 
image1clik.src = "images/Home3.jpg"; 
 
Throw these functions in: 
function on(name) { 
document[name].src = eval(name + "on.src"); 
} 
function off(name) { 
document[name].src = eval(name + ".src"); 
} 
function clik(name) { 
document[name].src = eval(name + "clik.src"); 
} 
 
Then use the following HTML to display the mess: 
 
<a href="home.html" target="main"; 
onMouseOver="on('image1')"; 
onMouseOut="off('image1')"; 
OnMouseDown="clik('image1')"> 
<img src="images/Home1.jpg" border="0" name="image1" WIDTH="180" HEIGHT="50"></a> 
 
If anybody can figure out how to keep the button down (re: image3.jpg) untill another button is clicked, I would REALLY appreciate it. 
 
TIA 
 
John Vogel

robherc · Jun 15, 1999

Hi John; try replacing your existing code & html with this, then see if it works. 
(hint: I added a variable to keep track of whether the button has been clicked or not; if it has, then I used an if/then clause to cancel the operation of the other rollovers.) 
 
 
image1= new Image(); 
image1.src = "images/Home1.jpg"; 
image1on = new Image(); 
image1on.src = "images/Home2.jpg"; 
image1clik = new Image(); 
image1clik.src = "images/Home3.jpg"; 
 
var isit = "if(clicked == y){"; 
 
function on(name) 
{ 
isit 
document[name].src = eval(name + "on.src"); 
}} 
 
function off(name) 
{ 
isit 
document[name].src = eval(name + ".src"); 
}} 
 
function clik(name) 
{ 
document[name].src = eval(name + "clik.src"); 
} 
 
 
<a href="home.html" target="main" onMouseOver="on('image1')" onMouseOut="off('image1')" OnClick="clik('image1'); var clicked=y;"> 
<img src="images/Home1.jpg" border="0" name="image1" WIDTH="180" HEIGHT="50"></a> 
 
Hope this works for you 
 
 
-Robherc 
robherc@netzero.net

Guest_imported · Jun 15, 1999

Thanks alot, Rob. Actually, I goofed. I should have metnioned there would be more than one button. Anyway, you did set me in the right direction, and after much sweat and hair pulling, I managed to morph my script. Now, when someone clicks on one of the buttons, the script turns off the previously pressed button, resets it to normal, then turns on the clicked button. 
This script is really getting messy, If I emailed you a copy, would you be willing to look at it, and see if I can do anything to clean it up. It works great, but it is messy... better yet, I could just copy the whole script in another message, and you could copy it and past it, and see how it works...

Guest_imported · Jun 15, 1999

On secnd thought, you can just surf to my IP (204.177.102.35) and just right click on the left frame (where the buttons are) and click view source (at least I know that this works in IE, I killed my Netscape, sorry, I just like IE too much...

robherc · Jun 15, 1999

Here's a new (greatly altered) source code for your nav bar; please let me know if you find any errors in it (or any of the JS...please post error msgs here) 
 
 
<html> 
<head> 
<script language="JavaScript"> 
 
 
var clicked; 
var name; 
 
image1= new Image(); 
image1.src = "images/Home1.jpg"; 
image1x= new Image() 
image1x.src = "images/Home1.jpg"; 
image1on = new Image(); 
image1on.src = "images/Home2.jpg"; 
image1clik = new Image(); 
image1clik.src = "images/Home3.jpg"; 
 
 
 
image2= new Image(); 
image2.src = "images/About1.jpg"; 
image2x= new Image(); 
image2x.src = "images/About1.jpg"; 
image2on = new Image(); 
image2on.src = "images/About2.jpg"; 
image2clik = new Image(); 
image2clik.src = "images/About3.jpg"; 
 
 
 
image3= new Image(); 
image3.src = "images/Location.jpg"; 
image3x= new Image(); 
image3x.src = "images/Location.jpg"; 
image3on = new Image(); 
image3on.src = "images/Location2.jpg"; 
image3clik = new Image(); 
image3clik.src = "images/Location3.jpg"; 
 
 
 
image4= new Image(); 
image4.src = "images/Keyp1.jpg"; 
image4x= new Image(); 
image4x.src = "images/Keyp1.jpg"; 
image4on = new Image(); 
image4on.src = "images/Keyp2.jpg"; 
image4clik = new Image(); 
image4clik.src = "images/Keyp3.jpg"; 
 
 
 
image5= new Image(); 
image5.src = "images/Client1.jpg"; 
image5x= new Image(); 
image5x.src = "images/Client1.jpg"; 
image5on = new Image(); 
image5on.src = "images/Client2.jpg"; 
image5clik = new Image(); 
image5clik.src = "images/Client3.jpg"; 
 
 
 
image6= new Image(); 
image6.src = "images/GB1.jpg"; 
image6x= new Image(); 
image6x.src = "images/GB1.jpg"; 
image6on = new Image(); 
image6on.src = "images/GB2.jpg"; 
image6clik = new Image(); 
image6clik.src = "images/GB3.jpg"; 
 
 
 
image7= new Image(); 
image7.src = "images/FB1.jpg"; 
image7x= new Image(); 
image7x.src = "images/FB1.jpg"; 
image7on = new Image(); 
image7on.src = "images/FB2.jpg"; 
image7clik = new Image(); 
image7clik.src = "images/FB3.jpg"; 
 
 
function on(number) { 
 
if(clicked == number){}else{ 
name = "image"+number 
document[name].src = eval(name+"on.src"); 
} 
} 
 
function off(number) { 
if(clicked == number){}else{ 
name = "image"+number 
document[name].src = eval(name + ".src"); 
} 
} 
 
function clik(name) { 
document[name].src = eval(name + "clik.src"); 
 
} 
 
 
</script> 
 
<title></title> 
 
<meta name="Microsoft Border" content="tl, default"></head> 
 
<body onLoad="click('image1')" background="backgrnd.gif" alink="White" vlink="Silver" link="Red" text="Navy"> 
 
 
<a href="tpe.html" target="main">!</a>  
<a href="file:///C:/Inetpub/

http://wwwroot/calendar.html"

target="main"><big><big>clik 
HERE</big></big></a> 
 
 
<a href="home.html" target="main" ; onMouseOver="Thisis=1;on(1)" ; onMouseOut="off(1)" ; OnMouseDown="clicked=1; clik('image1');"> 
<img src="images/Home1.jpg" border="0" name="image1" WIDTH="180" HEIGHT="50"></a> 
 
<a href="about.html" target="main" ; onMouseOver="Thisis=2;on(2)" ; onMouseOut="off(2)" ; OnMouseDown="clicked=2; clik('image2');"> 
<img src="images/About1.jpg" border="0" name="image2" WIDTH="180" HEIGHT="50"></a> 
 
<a href="location.html" target="main" ; onMouseOver="Thisis=3;on(3)" ; onMouseOut="off(3)" ; OnMouseDown="clicked=3;clik('image3');"> 
<img src="images/Location.jpg" border="0" name="image3" WIDTH="180" HEIGHT="50"></a> 
 
<a href="managers.html" target="main" ; onMouseOver="Thisis=4;on(4)" ; onMouseOut="off(4)" ; onMousedown="clicked=4;clik('image4');"> 
<img src="images/Keyp1.jpg" border="0" name="image4" WIDTH="180" HEIGHT="50"></a> 
 
<a href="logon.html" target="main" ; onMouseOver="Thisis=5;on(5)" ; onMouseOut="off(5)" ; onMousedown="clicked=5;clik('image5');"> 
<img src="images/Client1.jpg" border="0" name="image5" WIDTH="180" HEIGHT="50"></a> 
 
<a href="register.htm" target="main" ; onMouseOver="Thisis=6;on(6)" ; onMouseOut="off(6)" ; onMousedown="clicked=6;clik('image6');"> 
<img src="images/GB1.jpg" border="0" name="image6" WIDTH="180" HEIGHT="50"></a> 
 
<a href="feedback.html" target="main" ; onMouseOver="Thisis=7;on(7)" ; onMouseOut="off(7)" ; onMousedown="clicked=7;clik('image7');"> 
<img src="images/FB1.jpg" border="0" name="image7" WIDTH="180" HEIGHT="50"></a> 
 
</body> 
</html> 
 
 
-Robherc 
robherc@netzero.net

Guest_imported · Jun 22, 1999

Whoa! How did I miss your reply? Thanks Rob, I am looking at this slightly enhanced version of the script. Appreciate your reply, sorry I missed it! Now... let me check that little box down there, to be notified of response

I will let you know how this works... thanks again!

Guest_imported · Jun 22, 1999

Hmmm... well the script doesn't work at all now. 
When you first load the page, it comes up with an error: 
Line: 105 
Char: 1 
Error: Object expected 
 
line 105 is: 
<body onLoad="click('image1')" ... etc 
 
I'm not sure what the problem is here, but if I just take that onload out the script still doesn't work. The buttons stay clicked until a mouseover. In Other Words the button doesn't UN click itself on a sub sequeent click of another button...

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Button Script

Guest_imported

New member

robherc

Programmer

Guest_imported

New member

Guest_imported

New member

robherc

Programmer

Guest_imported

New member

Guest_imported

New member

Similar threads

Part and Inventory Search

Sponsor