SOURCE CODE FOR MOUSEOVER DEMO

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

STOP! If you arrived via a search engine
CLICK HERE for the NEW & IMPROVED CODE!

Below is the image preload script. Your images will be loaded into the cache & ready to change onMouseOver!

<SCRIPT language=JavaScript>


first = new Image(80, 52);
first.src = "grnrcton.gif";
second = new Image(80, 52);
second.src = "grnrctof.gif";


but1 = new Image(19,19) ;
but2 = new Image(19,19) ;
but3 = new Image(19,19) ;

but1.src = "grnon.gif";
but2.src = "grnoff.gif";
but3.src = "clrspace.gif"; 

</script>

Here is the code for the TEXT over section. The HREF may contain a URL, or any javascript function.

<A HREF = "Your_URL_here.htm"
onMouseOver = "go1.src = but1.src"
onMouseOut = "go1.src = but2.src">
<IMG NAME = "go1" width=19 height=19 border=0 SRC = "grnoff.gif">
Getcher HOT cuppa JavaScript Here!</A> 
VIEW the PAGE this code was designed for?

This is the code that adds the Small Image and the Hidden Button that will be changed.


<IMG NAME = "go4" width=19 height=19 border=0 SRC = "grnoff.gif">
    
<IMG NAME = "go5" width=19 height=19 border=0 SRC = "clrspace.gif">

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

This is the mouseOver Section. Add additional images with a (semi-colon) & a different.src # that corresponds with one of these above images.

<A HREF = "whatever.html"
onMouseOver = "gov1.src = first.src;go4.src = but1.src;go5.src = but1.src" ;
onMouseOut = "gov1.src = second.src;go4.src = but2.src; go5.src = but3.src">
<IMG NAME = "gov1" width=80 height=52 border=0 SRC = "grnrctof.gif"></A> 

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:

BACK TO BASICS

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

Below is the image preload script. Your images will be loaded into the cache & ready to change onMouseOver!
	<SCRIPT language=JavaScript> <!--Large Button--> first = new Image(80, 52); first.src = "grnrcton.gif"; second = new Image(80, 52); second.src = "grnrctof.gif"; <!--Small Buttons--> but1 = new Image(19,19) ; but2 = new Image(19,19) ; but3 = new Image(19,19) ; but1.src = "grnon.gif"; but2.src = "grnoff.gif"; but3.src = "clrspace.gif"; <!--This is the transparent gif--> </script>

Here is the code for the TEXT over section. The HREF may contain a URL, or any javascript function.
	<A HREF = "Your_URL_here.htm" onMouseOver = "go1.src = but1.src" onMouseOut = "go1.src = but2.src"> <IMG NAME = "go1" width=19 height=19 border=0 SRC = "grnoff.gif"> Getcher HOT cuppa JavaScript Here!</A> <!---Text Line--> VIEW the PAGE this code was designed for?

This is the code that adds the Small Image and the Hidden Button that will be changed.
	<!--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">     <!--These are image spacers--> <IMG NAME = "go5" width=19 height=19 border=0 SRC = "clrspace.gif"><!--This is the "blind" (transparent) gif--> (To Download clrspace - Right click on above image...save as)

This is the mouseOver Section. Add additional images with a (semi-colon) & a different.src # that corresponds with one of these above images.
	<A HREF = "whatever.html" onMouseOver = "gov1.src = first.src;go4.src = but1.src;go5.src = but1.src" ;<!--Changes three separate images!--> onMouseOut = "gov1.src = second.src;go4.src = but2.src; go5.src = but3.src"> <IMG NAME = "gov1" width=80 height=52 border=0 SRC = "grnrctof.gif"></A> <!--Large button-->

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)