SOURCE CODE FOR MOUSEOVER DEMO
Cut and paste these, then plug in your images, sizes, etc...

Below is the basic image preload script for the small round button. Your images will be loaded into the cache & ready to change onMouseOver! Load the following 2 sections between the <HEAD> tags.
<SCRIPT language="javascript1.1">
if( document.images )
{
<!--Small Button-->
  but1 = new Image(19,19) ;
  but1.src = "grnon2.gif";
  but2 = new Image(19,19) ;
  but2.src = "grnoff2.gif";
}
</SCRIPT>
This next function deals with various versions of browsers and addresses their properties logically. It is a bit larger than my prior code but this should remain stable with future browser upgrades. You need this code only once, even if you have multiple instances of mousovers.
<SCRIPT>
<!--
function chkVer(imagename,objectsrc)
{
var n=navigator.appName
var v=parseInt(navigator.appVersion)
var browsok=((n=="Netscape")&&(v>=3))
var browsok2=((n=="Microsoft Internet Explorer")&&(v>=4))
if ((browsok)||(browsok2))
document.images[imagename].src=eval(objectsrc+".src")
}
//-->
</SCRIPT>

Here is the code that actually displays the images. Place between the <BODY> tags. The HREF may contain a URL, or any javascript function. Note the inclusion of text.
<A HREF = "Your_URL_here.htm"
onmouseover="chkVer('go1','but1')"
onmouseout="chkVer('go1','but2')">
<IMG NAME = "go1" width=19 height=19 border=0 SRC = "grnoff2.gif"> <!---Image swap only? put </A> here...or -->
Getcher HOT cuppa JavaScript Here!</A> <!---Text Line-->

Now we can get a bit more clever. This is the 1st part of the code that allows 3 images to be changed at once! 1st, display the Small Image and the Transparent Button that will be swapped. Note that the NAME assigned to each image is different! (and remember to add any new images in your preload script)
<!--These are the mouseOver & "blind" images.
They may be placed anywhere on the page, btw.-->
<IMG NAME = "go4" width=19 height=19 border=0 SRC = "grnoff.gif">
&nbsp; &nbsp; <!--These are image spacers-->
<IMG NAME = "go5" width=19 height=19 border=0 SRC = "clrspace.gif"><!--This is the "blind" (transparent) gif-->
This is the mouseOver Section. Add additional images with a (semi-colon) & a different NAME that corresponds with one of your new images.
<A HREF = "whatever.html"
onmouseover="chkVer('gov1','first');chkVer('go4','but1');chkVer('go5','but1')" <!--Changes three separate images!-->
onmouseout="chkVer('gov1','second');chkVer('go4','but2');chkVer('go5','but3')">
<IMG NAME = "gov1" width=80 height=52 border=0 SRC = "grnrctof.gif"></A> <!--Above is the Large button-->


(To Download clrspace - Right click on above image...save as)

ANIMATIONS can be handled using the same code. Remember to add both images in your preload script.
Pass over the below RECYCLE image. Feel free to use this on your pages if you wish. (A link to my stuff would be nice! The animation itself is: recyc2.gif)


PLEASE RECYCLE!
Remember folks, Mr. Natural sez it

click for more crumbs!


BACK TO BASICS

If you arrived here via a search engine please click here to open the full site!