JavaScript mouse over effect the EASY way!
Do you want to know the easiest way to do mouse over effects? Have you tried to look it up online and found tons of scripts that seem like they are more of a problem than it is worth? You are in luck! This page outlines all you will need to know about doing mouse-over effects on an image without all the non-sense that you'll find elsewhere on the web. The EASY way is giving you the end product first, so without further adu...we'll jump right in!

This is the mouse-over logo for this site:

 
This is what the Logo on this site looks like in code:
<A HREF="http://space.frih.net/" OnMouseOver="document.SpaceBodyLogo.src='http://space.frih.net/templates/img/spacelogo_mo.gif'" OnMouseOut="document.SpaceBodyLogo.src='http://space.frih.net/templates/img/spacelogo.gif'"><IMG SRC="http://space.frih.net/templates/img/spacelogo.gif" WIDTH=339 HEIGHT=50 BORDER=0 NAME=SpaceBodyLogo></A>
 

That's all there is to it! No extra code files, and no B.S., but if you still want the tutorial then follow these steps...

Step 1:
Learn HTML or get some kind of HTML editing software.

Step 2:
find the image tag ( <IMG SRC="..."> ) on your page that you want to make a mouse over image.

Step 3:
Insert a "name" directly into the image tag ( <IMG SRC="..."> ) so that the browser now has a way to reference the image directly.
        Example: <IMG SRC="..." NAME=RollOverOne>

        Note: If you name two images with the same name then the mouse overs will break, and
        none of them on the page will work, so give each mouse over image a very specific name!
        Example: <IMG SRC="..." NAME=RollOverTwo>

Step 4:
If you just want the image to change when they mouse over it, then place the following code in the image tag ( <IMG SRC="..."> ).

        Example of simple roll-over image:
        <IMG SRC="..." NAME="RollOverOne" OnMouseOver="..." OnMouseOut="...">

If you want it to be a link the you will need to add the appropriate "A HREF" tag ( <A HREF="..."><IMG SRC="..."></A> ) around the image tag and you will place the following code inside the "A HREF" tag ( <A HREF="...">...</A> )

        Example of simple roll-over image:
        <A HREF="..." OnMouseOver="..." OnMouseOut="...">
        <IMG SRC="..." NAME="RollOverOne"></A>

Step 5:
Place the following code into the OnMouseOver="..." where the (...) appears and remember to note where the quotation marks are and that the appostrophies will nest inside the quotation marks! Not properly nesting these punctuation marks will cause your mouse over to break.
        Example: document.RollOverOne.src='image_mouseover.gif'

Then place the following code in the OnMouseOut="..." where the (...) appears
        Example: document.RollOverOne.src='image_original.gif'

Step 6:
Pat yourself on the back because you've just completed your first mouse over image! Your code should look like this for simple image roll overs. Example:

<IMG SRC="image_original.gif" NAME="RollOverOne"
OnMouseOver="document.RollOverOne.src='image_mouseover.gif'"
OnMouseOut="document.RollOverOne.src='image_original.gif'">
 

Your code should look like this for linking image mouse overs. Example:

<A HREF="new_page.html"
OnMouseOver="document.RollOverOne.src='image_mouseover.gif'"
OnMouseOut="document.RollOverOne.src='image_original.gif'">
<IMG SRC="image_original.gif" NAME="RollOverOne"></A>
 

Are you still having problems? - JavaScript Mouse-over Discussion

 
         
Home Page |  Webmasters |  Under 13 Terms |  About Us |  Contact Us
All material contained in this website, in whole or in part, is the property of Space.FRIH.net
All rights are reserved, and you may not put it to use without the expressed consent of the administrator
Sign up for PayPal and start accepting credit card payments instantly.