I was digging around, trying to find out, what, exactly, was needed to change a graphic on mouseover. I knew that this was a JavaScript function, and figured I could find some easy docs on how to do this. Perhaps I’m slow, but most of the scripts out there were a bit too convoluted. True, I’m a systems/network person, but I do my share of coding as well. Look, I can build a computer from scratch (and, I don’t mean put a motherboard in a case), but some of these new programs out there puzzle me when I see the source. I suspect that some of this is simply the character of web coding. Standards change, so traps for older browsers need to be placed. Are there really enough people out there that can’t read JavaScript that this is a big issue? Another puzzling issue is caps. Caps are used all of the time by the Java and JavaScript coders. I don’t really understand the rules. I did find it interesting that the Image function did require caps. I’m sure my code would benefit from following standard caps rules and allowing for IE 1 or Mosaic to view my site without seeing unsightly code tracers. The point, though, is that the extra code in the examples obscured for me what the necessary code was. So, here it is, the code to change the graphics on three icons on mouseover:

<script language="javascript">
person_h =new Image(); 
person_h.src = "images/personh.gif";
person_nh = new Image(); 
person_nh.src = "images/person.gif";
place_h =new Image(); 
place_h.src = "images/placeh.gif";
place_nh = new Image(); 
place_nh.src = "images/place.gif";
thing_h =new Image(); 
thing_h.src = "images/thingh.gif";
thing_nh = new Image(); 
thing_nh.src = "images/thing.gif";
function personover() {
document.person.src=person_h.src;
}
function personout() {
document.person.src=person_nh.src;
}
function placeover() {
document.place.src=place_h.src;
}
function placeout() {
document.place.src=place_nh.src;
}
function thingover() {
document.thing.src=thing_h.src;
}
function thingout() {
document.thing.src=thing_nh.src;
}
</script>
<br />
<br />
<a href="admin.html"><img onmouseover="personover();return true;"
onmouseout="personout();return true;"
" name="person" src="images/person.gif" border=0></a>
<a href="web.html"><img onmouseover="placeover();return true;"
onmouseout="placeout();return true;"
" name="place" src="images/place.gif" border=0></a>
<a href="gnulinux.html"><img onmouseover="thingover();return true;"
onmouseout="thingout();return true;"
" name="thing" src="images/thing.gif" border=0></a>

Here is the script running:

The above is all you need. Put it anywhere you like. There is no need, I’ve found, to put this in the head area. The a href tags are in there so the script does something, but, of course, you don’t need that part of the code just to do the mouseover. Onclick could be used, etc. I’d suggest that you take the above, figure out how it works, play with it, and then look at the documentation and scripts of those more skilled than I to make your script more robust.

For the icons (person, place, and thing), I used Xfig with a line width of 40, exported to a PPM file at 300% magnification, and used The Gimp to scale the image, convert to a GIF, and colorize using a hue of 268, saturation of 100, and lightness of -14.

For the complete program that uses this, see this article.