#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 1999
    Location
    St.JOhn's, Newfoundland, Canada
    Posts
    7
    Rep Power
    0
    Can anyone please tell me if it is possible for when the mouse paases over an area in an image map, another image pops up.

    If so please do tell me how if not, please let me no either way.

    Tim
  2. #2
  3. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2000
    Location
    Seattle Wa Us
    Posts
    12
    Rep Power
    0
    We'll there is but it's kinda complicated.
    You have to create mutilple javascript rollovers and hold them together with a table. This is almost imposible to do without a program. I suggest macromedia Fireworks http://www.macromedia.com/. Thats what I use.
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 1999
    Location
    UK
    Posts
    50
    Rep Power
    15
    I might have miss read the question but this will do exactly what you have described. I apologize if I have read the message wrong.

    <script language="javascript">
    <!--
    function doAction() {
    document.image.src = "image2.gif";
    }
    -->
    </script>

    </head>
    <body>

    <img name="image" src="image1.gif" width="499" height="63" border="0" usemap="#image_map">

    <map name="image_map">
    <area shape="rect" coords="x1,y1,x2,y2" href="#" target="screen" onmouseover="doAction();">
    <area shape="rect" coords="x1,y1,x2,y2" href="#" target="screen" onmouseover="doAction();">
    </map>

    I hope this what you were looking for.

    Falcon

    [This message has been edited by falcon (edited February 22, 2000).]
  6. #4
  7. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Apr 2000
    Posts
    16
    Rep Power
    0
    what jeromega12 suggested is the easiest way... but just be careful of the code that fireworks or dreamweaver generates - it's just awfully fat and ugly... so u might want to use one of these tools to create the required effects and then manually redo the job - if u want the page to load faster and more efficiently that is... : )
  8. #5
  9. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Oct 1999
    Posts
    84
    Rep Power
    15
    It's not that difficult to do.

    <html>
    <head>
    <title>ImageMap Rollover Text Descriptions</title>
    <script language="JavaScript">
    <!--//
    function show(layerid) {
    if (document.all){
    layerid.style.visibility="visible"
    }
    else
    if(document.layers){
    layerid.visibility="show"
    }
    }
    function hide(layerid){
    if (document.all){
    layerid.style.visibility="hidden"
    }
    else
    if(document.layers){
    layerid.visibility="hide"
    }
    }
    //-->
    </script>
    </head>
    <body>

    <!--
    This is where you would put your imagemap and image to be used. Just follow the mouseover example in this one
    This is the mousover handler... onMouseover="show(info1);" Inside the parenthesis is where you will put the id of
    the layer you want to hide or show. ie <div id="nameofdiv"> would go onMouseover="show(nameofdiv);"
    -->
    <img src="images/australia01.jpg" border="0" usemap="#imagemap1">
    <map name="imagemap1">
    <area shape="circle" coords="115,267,27" href="somewhere.html" onMouseover="show(info1);" onMouseout="hide(info1);">
    <area shape="circle" coords="104,203,24" href="somewhere.html" onMouseover="show(info2);" onMouseout="hide(info2);">
    </map>

    <!--
    These are the layers that will popup when the corresponding hotspot on the imagemap is moused over
    You can position the layers by changing the values for top and left or you can change the position to be
    relative to other elements on the page
    -->
    <div id="info1" style="position:absolute;left:300;top:100;visibility:hidden">
    <h1>Here is your info</h1>
    </div>

    <div id="info2" style="position:absolute;left:300;top:100;visibility:hidden">
    <h1>Here is some other info</h1>
    </div>
    </body>
    </html>

    Just put images in place of the text in the layers. You can use relative positioning fo the layers also if you dont like absolute positioning.

    Spookster
  10. #6
  11. Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Feb 2000
    Location
    Perth West Australia
    Posts
    757
    Rep Power
    15
    Spookster is right - avoid the dreamweavers of this world if you can- just thought i'd mention that in the new Netscape 6 (what happened to 5?) the if(document.layers) sniffing will not work as Netscape have thown .layers away !! although it will respond to document.images !- the moral is if you code your own stuff you can easily change it as and when the need (or next browser) arises - not sure how dreamweaver and friends will handle all this.

    ------------------
    Simon Wheeler
    FirePages -DHTML/PHP/MySQL
  12. #7
  13. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2000
    Posts
    3
    Rep Power
    0
    You can see this in action at http://www.nhphonebook.com on the map of New Hampshire to the right of the search box.

    I put this together w/ transparent gifs over a background image. As you mouse over a certain region a new image rolls over... all by using only one table cell...I used Dreamweaver 3. Hand-coding will bug your eyes out of your head.

Similar Threads

  1. Finding Images in HTML
    By beardo in forum PHP Development
    Replies: 14
    Last Post: March 28th, 2004, 06:29 AM
  2. Replies: 8
    Last Post: February 7th, 2004, 01:20 PM
  3. Image hover on top of image map?
    By dhodyic in forum HTML Programming
    Replies: 12
    Last Post: December 6th, 2003, 12:26 PM
  4. image map position problem
    By kerriD in forum HTML Programming
    Replies: 0
    Last Post: October 31st, 2003, 01:18 PM
  5. anyway to change content of table with image map rollover?
    By skrapyard in forum HTML Programming
    Replies: 0
    Last Post: February 9th, 2001, 12:29 AM

IMN logo majestic logo threadwatch logo seochat tools logo