Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
?
Solved

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

Posted on 2009-12-21
4
Medium Priority
?
442 Views
Last Modified: 2013-12-25
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
0
Comment
Question by:pacumming
  • 3
4 Comments
 
LVL 12

Accepted Solution

by:
funwithdotnet earned 2000 total points
ID: 26101792
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
 

Author Comment

by:pacumming
ID: 26101825
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
 

Author Comment

by:pacumming
ID: 26101853
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
 

Author Comment

by:pacumming
ID: 26102202
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

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Ready to get certified? Check out some courses that help you prepare for third-party exams.
Over time, the online landscape has altered considerably, but that’s nothing compared to the up-and-coming trends that will shape the web design industry in the coming year. Keep reading to find out which trends will shape B2B web design in 2018.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses

578 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question