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 = "https://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="https://www.wollinweb.com/blogimages/images/outsidefront.jpg">Outside front</a><br>
<a onmouseover="ShowPic('bedroom3')" href="https://www.wollinweb.com/blogimages/images/bedroom3.jpg" alt="Office/third bedroom">Office/third bedroom</a><br>
<a onmouseover="ShowPic('bathroom2')" href="https://www.wollinweb.com/blogimages/images/bathroom2.jpg" alt="Second bathroom">Second bathroom</a><br>
<a onmouseover="ShowPic('bedroom2')" href="https://www.wollinweb.com/blogimages/images/bedroom2.jpg" alt="Second bedroom">Second bedroom</a><br>
<a onmouseover="ShowPic('livingroom1')" href="https://www.wollinweb.com/blogimages/images/livingroom1.jpg" alt="Living room">Living room</a><br>
<a onmouseover="ShowPic('diningroom')" href="https://www.wollinweb.com/blogimages/images/diningroom.jpg" alt="Dining room">Dining room</a><br>
<a onmouseover="ShowPic('masterbed1')" href="https://www.wollinweb.com/blogimages/images/masterbed1.jpg" alt="Master bedroom">Master bedroom</a><br>
<a onmouseover="ShowPic('masterbath1')" href="https://www.wollinweb.com/blogimages/images/masterbath1.jpg" alt="Master bathroom">Master bathroom</a><br>
<a onmouseover="ShowPic('laundryroom')" href="https://www.wollinweb.com/blogimages/images/laundryroom.jpg" alt="Laundry room">Laundry room</a><br>
<a onmouseover="ShowPic('kitchen')" href="https://www.wollinweb.com/blogimages/images/kitchen.jpg" alt="Kitchen">Kitchen</a><br>
<a onmouseover="ShowPic('sittingroom')" href="https://www.wollinweb.com/blogimages/images/sittingroom.jpg" alt="Sitting room">Sitting room</a><br>
<a onmouseover="ShowPic('patio1')" href="https://www.wollinweb.com/blogimages/images/patio1.jpg" alt="Rear outside patio">Rear outside patio</a><br>
</p>
</td>
<td><img name="ShowRoom" src="https://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
- Anonymous
October 27, 2004
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... - Anonymous
October 30, 2004
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 - Anonymous
November 21, 2004
Excellent Article !
Thanks so much !
I like your demo page of House. Pretty nice !
Thansk for sharing
Chantu of ChantuDotCom - Anonymous
July 04, 2005
I am having a problem making the blueprint show up. What am I doing wrong? - Anonymous
August 13, 2005
The comment has been removed - Anonymous
December 01, 2005
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! - Anonymous
June 16, 2006
this was extremely useful. after making a few modifications, it worked perfectly for what i needed it for.
thanks. - Anonymous
June 21, 2006
i try to find something at google.com and take it on your site...thanks - Anonymous
June 22, 2006
Very needed information found here, thank you for your work - Anonymous
June 22, 2006
I love this site. Good work... - Anonymous
June 23, 2006
thank you for your work - Anonymous
June 28, 2006
beautiful online information center. greatest work... thanks - Anonymous
July 04, 2006
i try to find something at google.com and take it on your site...thanks - Anonymous
July 05, 2006
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. - Anonymous
July 07, 2006
perfect site good information, very nice news and etc... tnx - Anonymous
July 08, 2006
Very Very nice information here... Thanks - Anonymous
July 10, 2006
I'm love this great website. Many thanks guy - Anonymous
July 10, 2006
beautiful online information center. greatest work... thanks - Anonymous
July 10, 2006
Nice site. Thank to work... - Anonymous
July 13, 2006
perfect site good information, very nice news and etc... tnx - Anonymous
July 14, 2006
i try to find something at google.com and take it on your site...thanks - Anonymous
July 19, 2006
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. - Anonymous
July 23, 2006
Nice site. Thank to work... <a href="http://www.geocities.com/flower70gardenarbors/i-never-promised-you-a-rose-garden.html">garden of eden</a> <a href="http://www.geocities.com/flower40flowerarrang/">flowers for wedding</a> <a href=""></a> <a href="http://www.geocities.com/flower40flowerarrang/buy-flowers-florists-ftd.html">buy pressed flowers</a> <a href="http://www.geocities.com/flower70gardenarbors/">aynsley bone china flower basket</a> <a href="http://www.geocities.com/flower70gardenarbors/flower-and-gift-shops.html">unusual gifts flower mound tx</a> <a href="http://www.geocities.com/flower40flowerarrang/next-day-flower-delivery.html">wedding flowers</a> - Anonymous
August 05, 2006
THANKS!!!!
this really helped me with some issues I was having with an image mouse over...... - Anonymous
August 05, 2006
THANKS!!!
this really jelped me with some issues I've been trying to figure out......
this is a great site!