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 8 of 8
  1. #1
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question Create dynamic Image maps

    Hi,

    I'm new to web development and was wondering if someone could help with a problem i have creating image maps. Basically I'm trying to create a web page which displays an image attached to an imagemap. When the user clicks on various parts of the image some text pops up onto the screen. I can do this ok. However, my problem is that the image can be resized on the web page. When it's resized the coordinates of the imagemap then become out of synch with the hot-spots of the image.

    Therefore i was wondering if it's possible to dynamically create the imagemap to cope with the resizing? I thought i could populate some input fields on the page with the original coordinates of the hot-spots and when the image is resized a JavaScript or something could run and use the input field values along with the resolution to calculate where the hot-spots should now be, thus creating an image map dynamically to suit the resized image.

    Hope that makes sense. I don't know if this is possible or not but if you can help please let me know.

    Cheers

    G

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    I've had problems with image maps so would use mouse position over the image

    easy then to scale the coordinats dependent on image size

  • #3
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thanks for the reply but sorry i'm new to this and don't quite understand. How would i use the mouse position?

    I've put in an example of my problem below if it helps?

    Say i display an image on my web page as follows:
    <p>
    <img src="Images/MyKitchenImage.gif" ALT="" usemap="#MyImageMap">
    <MAP NAME="MyImageMap">
    <AREA SHAPE="rect" COORDS="50,10,100,30"
    HREF="Images/MapLinks/MyKettleImage.JPG">
    </MAP>
    </p>

    My hot spot is 50 pixels in, 10 down, 50 wide, and 20 high. This covers say a kettle and when the user clicks it they see a nice big image of a kettle in another window (just for example...). If i then resize the MyKitchenImage the picture of the kettle on it has moved and the coordinates above no longer cover the kettle, they now cover the tea cosy (for example...). Due to the re-scaling of the image the kettle has now moved to 100 pixels in, 20 down, 50 wide e.t.c.. Is there anyway that i can dynamically change the image map on the client without going back to the server so that the coordinates will cover the new position of the kettle.

    Cheers!

    G

  • #4
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts
    try this

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    <!--
    
    function ImgMap(id,mid){
     img=document.getElementById(id);
     img.imgmap=[document.getElementById(mid),img.width,img.height];
     imgmaparea=img.imgmap[0].getElementsByTagName('AREA');
     img.ary=new Array();
     for (zxc0=0;zxc0<imgmaparea.length;zxc0++){
      img.ary[img.ary.length]=imgmaparea[zxc0].coords;
     }
    }
    
    function CngSize(id,w,h){
     img=document.getElementById(id);
     img.width=w;
     img.height=h;
     for (zxc0=0;zxc0<img.ary.length;zxc0++){
      coords=img.ary[zxc0].split(',');
      img.imgmap[0].getElementsByTagName('AREA')[zxc0].coords=parseInt(coords[0])*w/img.imgmap[1]+','+parseInt(coords[1])*h/img.imgmap[2]+','+parseInt(coords[2])*w/img.imgmap[1]+','+parseInt(coords[3])*w/img.imgmap[1];
     }
    }
    
    //-->
    </script>
    
    </head>
    
    <body onload=ImgMap('fred','MyImageMap');>
    <br>
    <img id="fred" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" ALT="" usemap="#MyImageMap">
    <br>
    <input type="button" name="" value="Cng Size 300*300" onclick="CngSize('fred',300,300);" >
    
    <MAP NAME="MyImageMap" id="MyImageMap">
    <AREA SHAPE="rect" COORDS="50,10,100,30" HREF="Images/MapLinks/MyKettleImage.JPG">
    </MAP>
    
    </body>
    
    </html>

  • #5
    Senior Coder coothead's Avatar
    Join Date
    Jan 2004
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,722
    Thanks
    0
    Thanked 240 Times in 235 Posts
    Hi there grazza98,

    try this example...
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
    <title>Untitled Document</title>
    <style type="text/css">
    /*<![CDATA[*/
    body {
         background-color:#999;
         color:#000;
    }
    #map_image {
         margin:50px;
         border:3px double #000;
    }
    /*//]]>*/
    </style>
    
    <script type="text/javascript">
    //<![CDATA[
    function mapChange() {
         document.getElementById('map_image').style.width="720px";
         document.getElementById('map_image').style.borderWidth="6px";
         document.getElementById('map_area').coords="150,106,588,480";
    }
    //]]>
    </script>
    
    </head>
    <body>
    
    <div>
    <input type="button" value="map change" onclick="mapChange()"/>
    </div>
    
    <div>
    <img id="map_image" src="http://coothead.homestead.com/files/apple.jpg" alt=""usemap="#apple" />
    <map id="apple" name="apple">
    <area id="map_area" href="#" coords="75,53,294,240" alt=""/>
    </map>
    
    </div>
    </body>
    </html>
    coothead

  • #6
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,524
    Thanks
    3
    Thanked 508 Times in 495 Posts

  • #7
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I merged the 2 threads so all posts are now in this thread.

    Basscyst
    Last edited by Basscyst; 11-18-2005 at 11:29 PM.
    Helping to build a bigger box. - Adam Matthews

  • #8
    New to the CF scene
    Join Date
    Nov 2005
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    That's great, thanks very much for all your help on this. It works a treat.

    Cheers!

    G


  •  

    Posting Permissions

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