Have small web site at world wide web.peterbio.com/mother/test.htm

Someone authored the code with mouse over and creating image map. Whenever you click among the crimson balloons another image turns up.

  1. ***Take some help adding more code to ensure that I'm able to add another rollover-mouseover picture to another balloon in image. I don't understand how. However with a good example and addition towards the code at page above I'm able to become familiar with a little.

I Quickly can perform exactly the same to ensure that all balloons in picture is going to do a mouseover and show other JPG's (I'll add different images later). You should use exactly the same digital available to include a second, 3rd, etc rollover image.

  1. ***Should also understand what free map program I'm able to use to produce image map in order to do same goes with relaxation of balloons ---Unless of course--- you're so kind regarding add other coordinates to image map and employ same image for the other balloons.

Unsure if images will have to be prefeteched or otherwise. They'll be about 110k or less.

Thanks a lot for the kind help. Attempting to simply do something for my loved ones since my mother died. A coping factor I guess. PC

<map title="momMap" id="momMap">

Each area is really a balloon within this situation, define through the coordinates, then your action "onmouseover" triggers the javascript function "changeImage" that can take a characteristic "newimage" the title from the image to exhibit.

The coordinates from the ballon you need to setup are placed by pairs. For instance , means the very best left corner, the greater pairs you add, the greater vertex your shape has, the region created joining individuals vertex will be the one impacted 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 region type to polygon, and coords defines where and just how many vertex you will find. Keep individuals vertex coordinates so as, to prevent confusing some browsers. You will find also other shapes you should use aside from the polygon, individuals are, circles and rectangles. Using individuals kinds of areas is referred to here.

You requested a good example, this can show exactly the same image (since I'm not sure every other image for the reason that folder) inside a 100px square in the top left corner from the parent image:

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

So to conclude, you need to simply setup a brand new area for every balloon, or for your matter any part of the image you'll need a hover impact on. To help ease the compensated of locating the coords around the image, I have situated this script which will ease the task