Hey there, a new student to the field of website design here. I finally learned how to create javascript buttons, and when i tried to make some individually, they worked perfectly. (static, mouseover and mousedown transitions) Here's the code for one of those: <html> <head> </head> <body> <A href="#" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()" onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"> <IMG NAME="jsbutton" SRC="biography.jpg" width="200" height="60" border="0" alt="javascript button"></A> <SCRIPT language="JavaScript"> upImage = new Image(); upImage.src = "biography_f2.jpg"; downImage = new Image(); downImage.src = "biography_f4.jpg" normalImage = new Image(); normalImage.src = "biography.jpg"; function changeImage() { document.images["jsbutton"].src= upImage.src; return true; } function changeImageBack() { document.images["jsbutton"].src = normalImage.src; return true; } function handleMDown() { document.images["jsbutton"].src = downImage.src; return true; } function handleMUp() { changeImage(); return true; } </SCRIPT> </body> </html> Fairly straightforward. When compiling two (or more) of these scripts placed in succession (removing the excess <body>, <head> and <html> tags of course, only the last button receives a mouseover effect when the mouse is placed over ANY of the other buttons. similarly, when any button is clicked, only the last one links out. I'm been killing myself trying to figure out what is wrong and would really appreciate ANY assistance, thanks!
You can use a much simpler script for this (which works): <script type="text/javascript"><!--//--><![CDATA[//><!-- function rollOver(imgName, imgSrc) { document[imgName].src = '/images/' + imgSrc; } //--><!]]></script> <a href="/" onmouseover="rollOver('myimage', 'myimage-on.gif')" onmouseout="rollOver('myimage', 'myimage-off.gif')"><img src="/images/myimage-off.gif" name="myimage" /></a> <a href="/" onmouseover="rollOver('myimage2', 'myimage2-on.gif')" onmouseout="rollOver('myimage2', 'myimage2-off.gif')"><img src="/images/myimage2-off.gif" name="myimage2" /></a> Code (markup):
Hey thanks a lot for that script. I tried implementing it, but since i haven't studied the kind of script you used, i'm not sure exactly what to modify in order to make it work. There's only one img src= line per button, how do i load both?? Also, which image goes where? Sorry for the many questions, your help is really much appreciated!
You don't have to modify the javascript at all, all you have to change is the attributes of the link. For example, in this line: <a href="/" onmouseover="rollOver('myimage', 'myimage-on.gif')" onmouseout="rollOver('myimage', 'myimage-off.gif')"><img src="/images/myimage-off.gif" name="myimage" /></a> You specify 2 images: myimage-on.gif and myimage-off.gif. Each gif should be different (or you can also use jpgs). One is the "on" state, the image which appears when you mouseover it, and the other is in the "off" state, the image which is normally seem. In order to have multiple image buttons, you change the name attribute. You'll notice the first link is referred to as "myimage": <a href="/" onmouseover="rollOver('myimage', 'myimage-on.gif')" onmouseout="rollOver('myimage', 'myimage-off.gif')"><img src="/images/myimage-off.gif" name="myimage" /></a> and the second time you create a link you call it a different name, in this case "myimage2": <a href="/" onmouseover="rollOver('myimage2', 'myimage2-on.gif')" onmouseout="rollOver('myimage2', 'myimage2-off.gif')"><img src="/images/myimage2-off.gif" name="myimage2" /></a> In your case you might try something like this: <a href="/" onmouseover="rollOver('bio', 'biography_f2.gif')" onmouseout="rollOver('bio', 'biography.jpg')"><img src="biography.jpg" name="bio" /></a>
To be honest, it still doesn't really work ^^; However, i got around my main problem by dissecting the buttons and putting them each on separate pages, making a kind of link chain. Very odd i know, but it works. My deadline for this project was today, so although i ultimately wasn't able to use your code, thanks so much for assisting as thoroughly! I'll keep on trying to get it work, thus is life