Need help on image map and preloading pics. Flip image problem.

I am trying to create a mouseover effect which is very simple but it is not working for me. The files are at this link and the mouseover is not working in the sense the mouse over pictures (purple balloons on left and right) are not displaying. All I see is a box with a red x in it. But if I click on one of the purple balloons I can see the picture at times.
www.peterbio.com/mom/test.htm

I know I do not have all the coordinates set up for the purple balloons so you have to move your mouse around to find the "right spot". I will add more coordinates later. However I am sure you may have a better way to do all of this.

Goal: Mouse over a balloon and have an image show up. Move mouse and original image will display (mother and balloons).  I will add more images. This is just a crude test.
The way I have it set now is that you have to be spot on  on one of the purple balloons. Perhaps i need to add more areas or perhaps there is a better way to do this.

TX
PC
pacummingAsked:
Who is Participating?
 
funwithdotnetCommented:
I'd probably do it like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function changeImage(newSrcImage)
{
document.getElementById("mom").src = newSrcImage
}

function resetImage()
{
document.getElementById("mom").src = "joyce.jpg"
}
</script>
</head>

<body>
<img src="joyce.jpg" name="mom" width="335" height="500" border="0" usemap="#momMap" id="mom" />
<map name="momMap" id="momMap">
<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()"/>
</map>
</body>
</html>

Open in new window

0
 
pacummingAuthor Commented:
Thanks, that looks cool.
How would I change it to add another balloon and pic?
Eventually I will add all balloons. Adding one more balloon I will get the idea. Can use same pic.

Thanks so very much.
Appreciate it.
PC
0
 
pacummingAuthor Commented:
1. No need to preload images if I have about 7 small ones??

2. Also what did you use to get map coordinates for a balloon?  I used this
http://www.pangloss.com/seidel/ClrHlpr/imagemap.html

Will this work if I click in a lot of places to add as many points as you did?

Thanks!!!
PC
0
 
pacummingAuthor Commented:
Can split into 2 500 point questions if you like if oyu add cooridnates for each balloon and a place ofr me to add images.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.