Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    New Coder
    Join Date
    Apr 2006
    Location
    At a place
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Highlighting specific areas in an image map-onmouseover

    How do I do what the title says. I think it has something to do with css. But I'm not too use to css yet.
    Here's all the necessary code.
    Code:
    <map id="email">
    <area alt="Email Andrew & Andrew" shape="rect" coords="1,413,437,427" href="mailto:Andrew_Andrew_Show@yahoo.com" target="_blank"/>
    </map>
    <img src="pic\ap.jpg" usemap="#email" width="600" height="435" align="right" border="0"/>
    I'm trying to get that specific area(in red) highlited a certain color when people put their mouse over it.
    Uhh... Yeah Sure.

  • #2
    New Coder
    Join Date
    Apr 2006
    Location
    At a place
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    HELLO!!! Is anyone there?¿

    ©®™¿¡
    Uhh... Yeah Sure.

  • #3
    New Coder
    Join Date
    Apr 2006
    Location
    At a place
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Exclamation

    I really really need help!

    Shazzam!©
    Uhh... Yeah Sure.

  • #4
    New Coder
    Join Date
    Apr 2006
    Location
    At a place
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question

    Does anyone know how to help me with this little annoying problem?

    Uhh... Yeah Sure.

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,746
    Thanks
    0
    Thanked 244 Times in 239 Posts
    Hi there v777tony,
    Highlighting specific areas in an image map-onmouseover
    This can be achieved by using separate images for the highlight areas, as in this example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>six in one</title>
    <base href="http://coothead.homestead.com/files/">
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    
    <style type="text/css">
    <!--
    div {
         text-align:center;
         margin-top:50px;
     }
    #pic {
         border:3px double #000;
     }
    -->
    </style>
    
    <script type="text/javascript">
    <!--
      var maps=new Array();
            maps[0]='apple0.jpg';
            maps[1]='apple1.jpg';
            maps[2]='apple2.jpg';
            maps[3]='apple3.jpg';
            maps[4]='apple4.jpg';
            maps[5]='apple5.jpg';
    
    window.onload=function() {
       elem=document.getElementsByTagName('area');
    for(c=0;c<elem.length;c++) {
       elem[c].id='a'+c;
       elem[c].onmouseover=function() {   
       document.getElementById('pic').src=maps[this.id.split('a')[1]];
       }
       elem[c].onmouseout=function() {   
       document.getElementById('pic').src=maps[0];
       }
      }
     }
       var preloads=[];
    
    function preload(){
    
    for(i=0;i<arguments.length;i++) {
    
       preloads[preloads.length]=new Image();
    
       preloads[preloads.length-1].src=arguments[i];
    
    
    
      }
     }
    preload('apple0.jpg','apple1.jpg','apple2.jpg','apple3.jpg','apple4.jpg','apple5.jpg');
    //-->
    </script>
    
    </head>
    <body>
    
    <div>
    <img id="pic" src="apple0.jpg" alt="" usemap="#apples" />
    </div>
    
    <div>
    <map id="apples" name="apples">
      <area  coords="0,0,116,146" href="http://www.google.com" alt="">
      <area  coords="124,0,236,146" href="http://www.w3schools.com" alt="">
      <area  coords="244,0,360,146" href="http://www.codingforums.com" alt="">
      <area  coords="0,154,116,280" href="http://www.codingforums.com" alt="">
      <area  coords="124,154,236,280" href="http://www.google.com" alt="">
      <area  coords="244,154,360,280" href="http://www.w3schools.com" alt="">
    </map>
    </div>
    
    </body>
    </html>
    coothead
    Last edited by coothead; 06-18-2006 at 09:07 AM.

  • #6
    New Coder
    Join Date
    Feb 2006
    Location
    Australia
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by v777tony
    HELLO!!! Is anyone there?¿
    It's best to provide a link to your page so that people can visualise what is going on.

    In this case, you're defining most of the image as part of the map, and you only have one hotspot. Why not just make it a rollover image, and drop the hotspot?

    Alternatively, what Coothead has said will work nicely.



  • #7
    New Coder
    Join Date
    Apr 2006
    Location
    At a place
    Posts
    91
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you... muchas gracias. I knew someone smart enough would find an answer.

    EDIT: I celebrated too soon.
    Last edited by v777tony; 06-25-2006 at 05:21 PM.
    Uhh... Yeah Sure.

  • #8
    New to the CF scene
    Join Date
    Aug 2006
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Im trying to do something similar...

    Hi there wondering if anyone can help me do something similar...

    i have an exploded view diagram of a car engine. each part has a number beside it. i want the user to be able to mouse over the number and have a circle put around it (the number is in the jpg image, not as text)...

    Now there are 70 parts on the image so i dont really want to be making 70 div layers to get the circle around the number. Is it possible to do it without having loads of div layers??

    The second problem is underneath the image map there is the products listing. basically a list of all the parts. i want the user to be able to hover over an item in the list (or perhaps a link by the side of the listing) and have the number on the diagram highlighted with the circle just like if the user mouses over the number.

    Is this possible?! if no one understands i could attempt to explain more...

    Cheers, Dan

  • #9
    New to the CF scene
    Join Date
    Aug 2006
    Location
    Land O Lakes FL and San Jose CA
    Posts
    3
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question Highlighting AREAs in an image MAP

    I have a similar question.

    My working client-side image map has several hundred AREAs defining a
    MAP on a multi-megapixel image. Now, I would like to modify my code so
    that each AREA gets highlighted when the mouse hovers over it.

    A technique I've seen involves swapping the entire image with another
    (one for each area) that is identical except for the highlighting. This
    is practical for a small image and just a few areas. However it is
    impractical to pre-store and download several hundred slightly-differing
    copies of my multi-megapixel image.

    I would prefer to draw each area directly on the image when the mouse
    hovers, then restore the original image when the mouse leaves. That way
    only two images are needed: the unmodified original, and the scratch
    version onto which each highlighted AREA is drawn. What I'm missing is
    JavaScript code to highlight an AREA.

    I tried Walter Zorn's JSGraphics package
    http://www.walterzorn.com/jsgraphics/jsgraphics_e.htm
    but have been unable to make it modify a displayed image.

    Surely what I'm trying to do can't be all that unusual. Can anyone
    point me to a working example?

    - Rich


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •