How Do I make MouseOver (Roll Over) Codes?

  • This is the simplest MouseOver you can get.


  • First paste this little script (red text) into your "link" text.
  • OnMouseOver="image1.src='mouse2.gif'" OnMouseOut="image1.src='mouse1.gif'"


  • Use the same name (image1) in your image tag
  • <img name="image1" src="mouse1.gif" border="0" height="60" width="53" alt="Copy and Paste the Roll over Codes"></A>
    • Copy and Paste the Roll over Codes

  • Mouseover the chipmunk to see it work
  • You can Copy and Paste the yellow code
    <A href="rollover.htm" OnMouseOver="image1.src='mouse2.gif'" OnMouseOut="image1.src='mouse1.gif'"><img src="mouse1.gif" name="image1" border="0" height="60" width="53" alt="Copy and Paste the Roll over Code"></A>

    • How Do I add more RollOvers to a page?

  • Simply change the name of the next image, and its script to image2 ( and image3, and so on,,)
    E.G.: - Complete code for the second RollOver on a page
    <A href="rollover.htm" OnMouseOver="image2.src='mouse2.gif'" OnMouseOut="image2.src='mouse1.gif'"><img src="mouse1.gif" name="image2" border="0" height="60" width="53" alt="Copy and Paste the Roll over Codes"></A>

    • How Do I make another pic change simultaneously?

  • That's easy, just add a semicolon after the first OnMouseOver call and write in another call to a second pic.

  • OnMouseOver="image1.src='mouse2.gif';image2.src='mouse2.gif'" OnMouseOut="image1.src='mouse3.gif';image2.src='mouse1.gif'"

  • Mouseover the second chipmunk and see both change
  • Note: I have added mouse3.gif on the last MouseOut call to add a third pic to the sequence.

    • How Do I alter the code for me?

  • Change every instance of the picture names (E.G., mouse1.gif, and mouse2.gif) to your pic names.
  • Change the link page name (E.G., rollover.htm) to your link page name.
  • Change the height and width tags to your own picture sizes.

    • How Can I create Rollover Images?

  • You can get the real satisfaction of creating your own Rollovers, Buttons, Banners, Logos and other Graphics here. (Free trial)

    • How Do I automatically generate the code?

  • Click on this link

    • Advanced Users

  • You can download the self-unloading Rollover.exe file if you want to get all technical. It includes a 'Demo Page', some sample pics, and some instructions to set it up to interchange three images - like Pic 1 (displayed) Pic 2 (onMouseOver), and Pic 3 (onMouseOff).

    • Useful Resources

    Website design and hosting
    Website codes and scripts