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

Posted on 2009-12-21
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.

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.

Question by:pacumming
    LVL 12

    Accepted Solution

    I'd probably do it like this:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <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"
    <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()"/>

    Open in new window


    Author Comment

    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.

    Author Comment

    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

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


    Author Comment

    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.

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Training Course: Adobe Dreamweaver CC 2015

    Adobe Dreamweaver Creative Cloud is used by web designers and front-end developers and allows you to visualize your site in real-time as you code. This course covers exam objectives for the Adobe Certified Associate (ACA) certification.

    SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
    Read about why website design really matters in today's demanding market.
    Any person in technology especially those working for big companies should at least know about the basics of web accessibility. Believe it or not there are even laws in place that require businesses to provide such means for the disabled and aging p…
    The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

    779 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

    Need Help in Real-Time?

    Connect with top rated Experts

    11 Experts available now in Live!

    Get 1:1 Help Now