Creating Mouseover Effects


I know, it's been awhile since I've posted a tip. A couple weeks ago I was in SQL Server training, and last week was taken up with catching up on everything I postponed during training.  Now I'm back and my tip for today is creating mouseover effects.

We get frequent questions about how to create mouseover effects, but there are a variety of different mouseover effects, and the scripts that accomplish them are very varied.  The tip I'm sharing today is a script that I created for selling a house.  The page shows a house plan; the house plan image contains image maps that when a user runs their mouse over, displays an image of the room next to the house plan.  Take a look at the finished page so that you can understand the type of mouseover I'm talking about here.

Creating this type of mouseover is relatively easy.  You have two main images on the page: one is the image that the user mouses over, the other is the image that changes upon mouseover. In this particular example, the house plans image is the first image.  I mapped the image (or created hot spots) to section it into rooms; each one of the rooms has an AREA element with an href attribute value that contains the path and filename of the image to show on click, plus an onmouseover event to show the image in a second image on the page.  (You can easily create an image map in FrontPage -- see Add a hot spot to a graphic -- so don't worry about trying to create an image map by hand; however, you will need to add the onmouseover event to each AREA element by hand.)

Okay, maybe that sounds confusing, so let me make it a bit easier.  If you've taken a look at the page, you see an image of the house plans on the left side of the page and on the right you see a picture of the front of the house.  The house plans image is the first image (as I mentioned above). The picture of the front of the house, the second image, is actually a container image.  When the page first displays, it shows the front of the house, but as the user drags the mouse pointer over the house plans, the picture of the front of the house changes to show a picture of the room over which the mouse pointer sit.  (Depending on the speed of your connection, you may need to wait a few seconds for the image to download.)

The script that makes this happen is all of two lines. To make it easy for you, I've included the function below.

function ShowPic(sImage)
{
sImage = "images/" + sImage + ".jpg";
document.ShowRoom.src = sImage;
}

The script by it self does nothing spectacular.  The ShowPic function takes a string (sImage), which is the name of the image file to display on mouseover.  The script then uses the string (sImage) to concatenate a new string that contains the path to the image file ("images/") with the passed in value (sImage parameter) and the image extension (which in this case is ".jpg").  Then the code uses the src property to change the src attribute of the second image (which I gave a name attribute of "ShowRoom") to the value of the sImage string.

BTW, the script won't work without an image named "ShowRoom".  You can either create an image named "ShowRoom" or change the ShowRoom in the line document.ShowRoom.src to the name of the IMG element that acts as your container image.

For my page, I used an image map, but you don't have to use a map.  For example, you could have a vertical menu bar that on mouseover changes a central image on the page to a different image.  In this case, the ShowRoom image container becomes your central image, and each of the elements in the menu bar (which could be IMG or A elements depending on how your menu bar is setup) contains the onmouseover event with the script call.

In the page you viewed above, I put in styles, so to make it easier to see what's going on in the code, here's some HTML to accomplish a mouseover effect without styles and without an image map.  In this example, I use A elements instead of AREA elements; otherwise, the effect is the same.

<html>
<head>
<title>House For Sale</title>
<script language="javascript">
function ShowPic(sImage)
{
sImage = "http://www.wollinweb.com/blogimages/images/" + sImage + ".jpg";
document.ShowRoom.src = sImage;
}
</script>
</head>
<body>
<table width="800">
<tr>
<td valign="top" width="160">
<p>
<a onmouseover="ShowPic('outsidefront')" href="http://www.wollinweb.com/blogimages/images/outsidefront.jpg">Outside front</a><br>
<a onmouseover="ShowPic('bedroom3')" href="http://www.wollinweb.com/blogimages/images/bedroom3.jpg" alt="Office/third bedroom">Office/third bedroom</a><br>
<a onmouseover="ShowPic('bathroom2')" href="http://www.wollinweb.com/blogimages/images/bathroom2.jpg" alt="Second bathroom">Second bathroom</a><br>
<a onmouseover="ShowPic('bedroom2')" href="http://www.wollinweb.com/blogimages/images/bedroom2.jpg" alt="Second bedroom">Second bedroom</a><br>
<a onmouseover="ShowPic('livingroom1')" href="http://www.wollinweb.com/blogimages/images/livingroom1.jpg" alt="Living room">Living room</a><br>
<a onmouseover="ShowPic('diningroom')" href="http://www.wollinweb.com/blogimages/images/diningroom.jpg" alt="Dining room">Dining room</a><br>
<a onmouseover="ShowPic('masterbed1')" href="http://www.wollinweb.com/blogimages/images/masterbed1.jpg" alt="Master bedroom">Master bedroom</a><br>
<a onmouseover="ShowPic('masterbath1')" href="http://www.wollinweb.com/blogimages/images/masterbath1.jpg" alt="Master bathroom">Master bathroom</a><br>
<a onmouseover="ShowPic('laundryroom')" href="http://www.wollinweb.com/blogimages/images/laundryroom.jpg" alt="Laundry room">Laundry room</a><br>
<a onmouseover="ShowPic('kitchen')" href="http://www.wollinweb.com/blogimages/images/kitchen.jpg" alt="Kitchen">Kitchen</a><br>
<a onmouseover="ShowPic('sittingroom')" href="http://www.wollinweb.com/blogimages/images/sittingroom.jpg" alt="Sitting room">Sitting room</a><br>
<a onmouseover="ShowPic('patio1')" href="http://www.wollinweb.com/blogimages/images/patio1.jpg" alt="Rear outside patio">Rear outside patio</a><br>
</p>
</td>
<td><img name="ShowRoom" src="http://www.wollinweb.com/blogimages/images/outsidefront.jpg"></td>
</tr>
</table>
</body>
</html>

The HTML above uses absolute paths to the image, so you can just copy it to a new page in FrontPage (replacing all the HTML in the page), and view it in the browser.

I hope you enjoy this tip.  It's simple, but mouseovers can be very powerful.  Next tip, I'll show you how to get image mouseovers in navigation bars where you are changing the image on mouseover and then back to the original image on mouseout. (Oh, BTW, this script works without problem in IE, Moz, NN, and Opera.)

Comments (26)

  1. Seems like in all of the day to day confusion, I completely forgot to address those of you that are wanting to create a true mouseover technique. Well today is the day. Thanks to Lisa Wollin for doing such a…

  2. thanks for the mouseover details, i’m trying my best to improve any skills I may have, so do carry on this, help.

    regards Len

  3. Chantu says:

    Excellent Article !

    Thanks so much !

    I like your demo page of House. Pretty nice !

    Thansk for sharing

    Chantu of ChantuDotCom

  4. paulboyd says:

    I am having a problem making the blueprint show up. What am I doing wrong?

  5. Chris Walti says:

    This is the exact effect I would like create! An image onm load, and when I roll over the buttons, they change color and a picture is to appear to the right. After having beaten my head nearly bloody I am now resorting to asking for help in matters integration. Can you tell me where I am missing it? My images are at http://www.cwalti.com/pix. If you could assist me with the basic mechanics and can then carry on…

    cwalti@earthlink.net

    Best regards Chris Walti…

  6. Daniel S. says:

    Hello,

    Im a noobie at web design. I am half way into a frontpage class Im taking at a local community. Im having a problem with my buttons mouseover working with internet explorer. i used the dhtml to swap images. When the site is viewed in internet explorer, the mouseover effect does not work. I get a security warning pop up at the very top of page. The only way the mouseover will work is if I right click the warning message and allow content. This has something to do with activeX. My teacher has no idea what to do and I spent an hour on the phone with microsoft’s support and they say they have no idea. I can’t believe this is the first time any one has had this problem. I will greatly appreciate any help. thanks!

  7. jasonb says:

    this was extremely useful.  after making a few modifications, it worked perfectly for what i needed it for.

    thanks.

  8. malin says:

    i try to find something at google.com and take it on your site…thanks

  9. birtle says:

    Very needed information found here, thank you for your work

  10. byrtel says:

    I love this site. Good work…

  11. milton says:

    thank you for your work

  12. lodema says:

    beautiful online information center. greatest work… thanks

  13. jager says:

    i try to find something at google.com and take it on your site…thanks

  14. Abdul Aleem says:

    This is the script I was looking for a long time for my assignment. The fact is that I could not  put it in search engine what i wanted and the way I wanted.

  15. treoweman says:

    perfect site good information, very nice news and etc… tnx

  16. garvyn says:

    Very Very nice information here… Thanks

  17. aelfdane says:

    I’m love this great website. Many thanks guy

  18. elivina says:

    beautiful online information center. greatest work… thanks

  19. aldo says:

    Nice site. Thank to work…

  20. whitmoor says:

    perfect site good information, very nice news and etc… tnx

  21. suma says:

    i try to find something at google.com and take it on your site…thanks

  22. Mashudu says:

    It is a piece of useful work, thanks.  However, I wanted to learn how to change a the background of a "hotspot" area to a different color on a "onmouseover" event.

  23. jan says:

    THANKS!!!!

    this really helped me with some issues I was having with an image mouse over……

  24. jan says:

    THANKS!!!

    this really jelped me with some issues I’ve been trying to figure out……

    this is a great site!

Skip to main content