mouseover image swap on imagemap

Discussion in 'JavaScript' started by madscout2000, Sep 3, 2007.

Thread Status:
Not open for further replies.
  1. #1
    I am trying to make a clickable world map that will highlight the different regions when the mouse is over the map. To do this, I am trying to swap the entire image with another that has the region highlighted.

    In firefox, the entire map disappears when I mouse over.
    In IE, a small box with an 'x' (broken image link?) appears.

    http://www.newworlddrumming.com/index2.html

    I really don't know javascript, but I found these functions on a web page and modified them for my own.

    
     <!--This section preloads the different map images -->
    				<SCRIPT LANGUAGE="javascript">
    				worldmap = new Image(231,532)
    				worldmap.src = "style/worldmap.jpg"
    				
    				europe = new Image(231,532)
    				europe.src = "style/europe.jpg"
    				
    				asia = new Image(231,532)
    				asia.src = "style/asia.jpg"
    				
    				northamerica = new Image(231,532)
    				northamerica.src = "style/northamerica.jpg"
    				
    				southamerica = new Image(231,532)
    				southamerica.src = "style/southamerica.jpg"
    				
    				oceania = new Image(231,532)
    				oceania.src = "style/oceania.jpg"
    				
    				middleeast = new Image(231,532)
    				middleeast.src = "style/middleeast.jpg"
    				</SCRIPT> 
                    
                    <!-- this section gives the functions to display the different images -->
                    
                    <SCRIPT LANGUAGE="javascript">
    
    				function asia() {
    				document.emp.src = asia.src; return true;
    				}
    				
    				function europe() {
    				document.emp.src = europe.src; return true;
    				}
    				
    				function northamerica() {
    				document.emp.src = northamerica.src; return true;
    				}
    				
    				function southamerica() {
    				document.emp.src = southamerica.src; return true;
    				}
    				
    				function oceania() {
    				document.emp.src = oceania.src; return true;
    				}
    				
    				function middleeast() {
    				document.emp.src = middleeast.src; return true;
    				}
    				
    				function worldmap() {
    				document.emp.src = worldmap.src; return true;
    				}
    				
    				</SCRIPT> 
                    <div id="map">
                    <img name="emp" src="style/worldmap.jpg" alt="" usemap="#worldmap" style="border-style:none"/>
                            <map id="worldmap" name="worldmap">
                            <area shape="poly" alt="" coords="292,91,308,120,325,115,350,102,347,96,353,82,341,79,343,75,335,75,333,79,284,82" onMouseOver="middleeast()" onMouseOut="worldmap()" href="middleeast.php" />
                            <area shape="poly" alt="" coords="112,120,123,112,121,104,130,103,133,95,198,55,208,41,239,22,202,9,57,26,54,33,5,31,0,64,35,56,59,69,77,100,97,114" onMouseOver="northamerica()" onMouseOut="worldmap()" href="northamerica.php" />
                            <area shape="poly" alt="" coords="113,120,122,113,121,105,130,103,132,98,156,107,151,119,174,132,194,142,198,151,190,172,164,195,153,209,166,211,164,216,146,221,132,212,142,165,132,158,126,146,128,136,131,131" onMouseOver="southamerica()" onMouseOut="worldmap()" href="southamerica.php" />
                            <area shape="poly" alt="" coords="308,119,295,97,290,90,264,87,258,83,231,88,219,98,220,122,233,133,254,135,263,154,260,162,270,189,281,191,294,180,298,175,314,177,320,156,306,154,305,146,319,130,321,120" onMouseOver="africa()" onMouseOut="worldmap()" href="africa.php" />
                            <area shape="poly" alt="" coords="325,78,320,70,329,62,343,62,343,50,344,38,341,32,349,27,345,24,308,24,308,19,349,19,361,30,378,26,372,21,388,17,440,31,440,25,466,28,466,32,498,35,501,31,511,32,513,38,525,47,520,50,506,47,485,54,472,68,467,59,466,55,450,55,454,61,458,77,445,91,426,97,423,108,429,122,438,135,452,142,445,152,429,154,413,156,394,149,378,130,383,125,383,118,373,112,363,118,365,131,357,131,345,104,351,102,348,96,354,81,341,79,343,74,334,74,332,78" onMouseOver="asia()" onMouseOut="worldmap()" href="asia.php" />
                            <area shape="poly" alt="" coords= "445,151,453,141,467,139,483,151,495,161,518,154,523,161,500,178,505,197,486,213,453,203,432,187,410,192,404,167,417,162,429,153" onMouseOver="oceania()" onMouseOut="worldmap()" href="oceania.php" />
                            <area shape="poly" alt="" coords="324,77,282,81,286,88,275,89,262,84,248,82,247,85,232,88,229,81,229,66,208,42,226,40,262,18,289,20,288,31,306,34,322,29,343,25,345,28,342,61,327,61,319,69" onMouseOver="europe()" onMouseOut="worldmap()" href="europe.php" />
                            <area shape="default" nohref="nohref" alt="" />
                        </map>
                   </div>  
    
    HTML:
     
    madscout2000, Sep 3, 2007 IP
  2. mjamesb

    mjamesb Member

    Messages:
    88
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    48
    #2
    when the function is being called..for example asia() it doesn't know what the src of the image is supposed to be and it is return undefined.

    try getting rid of the dimensions in the constructor
    asia = new Image()
    asia.src = "style/asia.jpg"

    Make your life easier and install the FF extenstion Firebug which makes debugging javascript much easier
     
    mjamesb, Sep 3, 2007 IP
  3. madscout2000

    madscout2000 Peon

    Messages:
    62
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    I installed the Firebug extension, and made the changes you suggested. I still get the same symptoms and firebug says src=undefined after I do the mouseover.

    Is it a problem with preloading the images? I am completely js illiterate. :(
     
    madscout2000, Sep 4, 2007 IP
Thread Status:
Not open for further replies.