SOURCE CODE FOR MULTIPLE MOUSEOVERS
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";
<!--Add additional sets as needed-->
}
</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) Add additional image sets as needed.
<!--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)

 Want a "null" URL? Here is a nifty way to to it: You need to do 2 things: First add this bit of script to create a null link:
<script>
  function nothing() {
    return;
  }
</script>

    now... as your href:
<A href="javascript: nothing()"
     this will give you nothing in the status bar below:
onmouseover="whatever ; window.defaultStatus' '; window.status=' ';
    return true"
onmouseout= etc. etc">
img scr="yourgif.gif"</A>

ANIMATIONS can be handled using the mouseOver 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). To further insure that the animation recycles you may add a # to the end of the gif. [ "recyc2a.gif#" ]

PLEASE RECYCLE!
Remember folks, Mr. Natural sez it

click for more crumbs!

For an excellent resource on complex GIF animations, Go HERE


BACK TO BASICS

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