Using JavaScript to change a link image

Provided by the Good News Web Designers Association

Return to Directory of Tutorials or GNWDA home page

   
Q: I am using Front Page to do a LIFE TEEN site. In the left bar, I use java buttons generated by FP. Our youth minister has trouble seeing these. I think she might be using Netscape or AOL. Is it still acceptable for me to use these buttons if some browsers can't see them? Or could she just be having a problem with her browser?
~ Nancy

She's not having trouble with her browser, and it's not that Netscape and AOL browsers are the problem or are lagging behind in developing their code. The problem is that Microsoft created Front Page, and therefore FP's special features, such as its marquee or any JavaScripts, are designed to not work on anything but MS's Internet Explorer. Phoeey on MS!

The solution, for us web designers, is to use a JavaScript that works on all browsers. Never use those provided by FP, for there are plenty of free scripts available, which are compatible with everything except WebTV, (and a few of the simple ones do work on WebTV, though not this one -- To find out if a JavaScript will work on WebTV, download the free WebTV Viewer from developer.webtv.net). These scripts are not too hard to figure out how to use, and most internet sources that provide them give good explanations about how to make them work.

Try this one. Move your mouse over and off of the button:

Below is the simple "mouseover" script that accomplishes this. To copy the code and make this sample work on your computer, copy these two graphics that are used (one looks like the button is up, the other looks like the button is pressed down) and put them into the same directory where you'll put the webpage that uses this code.

   

In the HTML view of the webpage you will put this into, just above the </head> tag, make a blank line and insert the the following Javascript (copy from here and paste it in).


<script LANGUAGE="JavaScript">
function ChangeImage (ImageName,FileName) {
document[ImageName].src = FileName;
}
</script>


Now go to the spot on your webpage where you want to put your button. At that place, put the following code. Where you see red text, you will eventually replace this with your own information, when you're ready to make your own mouseover buttons. An explanation of the changes you will make are in the right side column.
   

EXTRA TIPS

This is just one sample of working with a JavaScript. Find the JavaScript that does what you want your Web site to do by searching through Web sites that give our free scripts.

Favorite site for finding free JavaScripts, because it lets you know which browsers show them correctly:
Dynamic Drive

Other sources of JavaScripts:
Javascripts
Freecode
Cross Daily
Developer.com
Code Generators
JavaScript Source
WebMonkey
Web Design Library

If any of these links go bad, please report it!

 

<a HREF="http://gnwda.org"

onMouseover="ChangeImage ('gnwda','mouseover2.gif'); return true"

onMouseout="ChangeImage ('gnwda','mouseover1.gif'); return true">

<img name="gnwda" src="mouseover1.gif" BORDER="0" WIDTH="97" HEIGHT="27">

</a>

 

NOTE:
Both button graphics must be the same size.

Replace my URL to the link you need there.

Replace 'gnwda' with any name you pick for this button. Each button must have a different name, but make sure that onMouseover and onMouseout and the image tag all have the same name.

Replace 'mouseover2.gif' and 'mouseover1.gif' with your two button graphics. Note that there are two instances of mouseover1.gif
  

Return to Directory of Tutorials or GNWDA home page