MouseOver/MouseOut -- Image Swap Image mouseovers


Example MouseOver ~~

Rolling  your mouse over the image will reveal the mouseover image effect.  Notice the button appears to be pushed in. 
Return to the Widget Corporation Home Page

How to Make the Button Do That ~~
  1. First of all, you need two graphic buttons.  Both graphic buttons need to be the same dimensions.  When the mouse passes over the first button, the image is swapped for the second button that looks different.  In this case, the first button is raised and the second is inverted.  The result is an illusion; giving the appearance that the button is being pressed in.

  2.  

     
     
     
     
     

    So let's say you have two graphic buttons:  one named "up.gif" and one named "down.gif".   And let's say you want the same illusion (have one button appear to be pressed in when the mouse rolls over it).  First of all, decide which graphic button you want on the page when the page first loads into the browser.  In this case, you would want the "up.gif" graphic button on the page first. 

    So add the up.gif image to the page with the following HTML tag: <img src="up.gif">.  Adding the width and height attributes would help the image load quicker.  So if the image is 120 pixels wide and 65 pixels in height (as is the case with the white button above), you would add these attributes to the tag like so:  <img src="up.gif" height=65 width=120>
     

  3. Now link the graphic button to a page or a site that you desire.  Let's say you want to link the button in this case to KMart.  So your tags would now look like: 

  4. <A HREF="http://www.bluelight.com">  <img src="up.gif"> </A>
     
  5. Keep in mind that anytime you link an image to a website you will get a border around the image unless you specify otherwise.  To remove the border, add the following attribute to the img tag: 

  6. <img src="up.gif" BORDER=0
     
  7. Now you have the basic tags there to make this happen.  The command to swap the up.gif image with the down.gif image is called a JavaScript mouseover (otherwise also called an "image swap").  In order to have the graphic buttons swap, you need to add some JavaScript into the anchor tag:

  8. onMouseOver="document.pic1.src='up.gif' " onMouseOut="document.pic1.src='down.gif' "
     
  9. What does what I just typed in mean?
    • OnMouseOver= (This is referred to as a JavaScript event handler and it tells the browser how to handle the event of passing a mouse over an object.)
    • "document.  (anchors the event to the current document and is necessary in order for the mouseover to work)
    • pic1.  (is the name of the mouseover. Instead of "pic1" you can have any name you choose, just be certain to apply the name to the mouseover three times: for the onMouseOver, onMouseOut, and within the <img... tag.)
    • src="nameofgraphic.ext"  (The SRC=  attribute of the tag allows you to determine which graphic to display when the mouse rolls over the image set in the IMG  tag.) 
  10. Now look at the img tag.  In order for the OnMouseOver event to be associated with this particular image, you need to add a NAME="pic1" attribute to the <img...  tag.  Remember instead of "pic1" you can have any name you choose; you could use "larry", "curly", and "mo" if it makes more sense to you.  Just make certain that for every image that you choose to apply a mouseover to on the same page, that each has a different name (and that name needs to be applied three times within each set of tags: to the mouseover, mouseout, and img src).  If you choose to use the "pic1" for the first mouseover, then for another mouseover on the same page, you could have "pic2" then for the next, "pic3", and so on. 

Image Swap in Fireworks 3 ~~
For those of you who have Fireworks software and would like to know how to do an image swap in Fireworks 3, here are a few tips:
  1.  If you want to create a mouseover/image swap effect with an image map, use the slice tool, not the hot spot object for sectioning your graphic.  Also use a combination of layers and frames, accessible by clicking on Window, frames within Fireworks.
  2. For a step-by-step tutorial on mouseovers in Fireworks, see "Create an Image Swap in Fireworks 3"  by Gary W. Priester.

  3.  


Assignment ~~

  1. Right click on each of the following graphics and save them to your disk. 
  2. redup.gif
    reddown.gif
     
  3. Apply an onMouseOver event to these images.  Do you need some help?  These additional instructions may help.
  4. Make sure you get the assignment marked off with your instructor.

Jump to the top of the page!