Newbie needs help on mouseover and map on HTML page to show images on mouseover...

Question

Have small web page at www.peterbio.com/mom/test.htm

Someone wrote the code with mouse over and creating image map. When you click on one of the purple balloons another image shows up.

1. ***Need some help adding more code so that I can add another rollover-mouseover picture to a different balloon in image. I do not know how. But with an example and addition to the code at page above I can learn a little.

Then I can do the same so that all balloons in picture will do a mouseover and show other JPG's (I will add different images later). You can use the same jpg out there to add a 2nd, 3rd, etc rollover image.

1. ***Also need to know what free map program I can use to create image map so I can do same with rest of balloons ---UNLESS--- you are so kind as to add other coordinates to image map and use same image for all the other balloons.

Not sure if images will need to be prefeteched or not. They will be about 110k or less.

Thanks so much for your kind help. Trying to just do something for my family since my mother passed away. A coping thing I suppose. PC

Answer 1

<map name="momMap" id="momMap">

Each area is a balloon in this case, define by the coordinates, then the action "onmouseover" triggers the javascript function "changeImage" that takes an attribute "newimage" which is the name of the image to show.

The coordinates of the ballon you want to set up are inserted by pairs. For example 0,0 would mean the top left corner, the more pairs you add, the more vertex your shape has, the area formed joining those vertex would be the one affected by the javascript action.

<area shape="poly" coords="326,93,316,136,275,165,250,163,235,127,261,100,286,66,308,68" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>

So "poly" sets the area type to polygon, and coords defines where and how many vertex there are. Try to keep those vertex coordinates in order, to avoid confusing some browsers. There are also other shapes you can use apart from the polygon, those are, circles and rectangles. The use of those types of areas is described here.

You asked for an example, this will show the same image (since I don't know any other image in that folder) in a 100px square from the top left corner of the parent image:

<area shape="poly" coords="0,0,100,0,100,100,0,100" href="#" onmouseover="changeImage('momf.jpg')" onmouseout="resetImage()"/>

So in conclusion, you just need to set up a new area for each balloon, or for that matter any area of the image you want a hover effect on. To ease you the paid of finding the coords on the image, I've located this script that will ease you the task