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.)