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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Apr 2004
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question help with a dynamic imagemap hotspot please!

    hello! I am creating a web site and am trying to figure out how to change my image map hotspots when an image is resized.

    I am a C++ programmer, so i understand the logic of how things work, but there really isn't a good source of JS on the web for me to figure out the proper syntax, properties, and everything else, so I figured I would post up here asking for help to see if someone can translate for me.

    Assuming that I can substitute a variable in for a image map coordinate, this is what I'm visualizing....

    var imageW=document.imagename.width
    var multiplier= imageW / 760 <! 760 is the default width of my image>
    var cord1=multiplier * 50 <! 50 is the first of the coordinates of my hot spot if the image were not resizeable>
    etc etc...

    So I guess my questions are as follows....
    is there a better way to do this?
    can an image map coordinate be stored as a variable?
    is document.imagename.width stored as a integer or character?
    does document.imagename.width get the width of the image display size or the default size from the file?
    what is the proper syntax for this type of script?

    Thank you very much for your help and comments!
    Last edited by annie; 04-07-2004 at 11:25 PM.

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Yes, that can be done using setAttribute(attribute,value) method

    1. can an image map coordinate be stored as a variable?
    Yes using getAttribute method
    2. is document.imagename.width stored as a integer or character?
    in fact they are named obj.offsetWidth and obj.offsetHeight values, and they are integer
    3. see above
    4. what is the proper syntax for this type of script?

    based on

    document.getElementById(id).setAttribute('coords','new_coordinated)
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    See an example (view also attchment):

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    script>
    function 
    newCoord(){
    document.getElementById('x').setAttribute('coords','0,86,109,155');
    }
    function 
    alertCoord(){
    alert(document.getElementById('x').getAttribute('coords'))
    }
    function 
    splitCoord(){
    var 
    coord document.getElementById('x').getAttribute('coords').split(',');
    var 
    = new Array
    for (
    i=0;i<coord.length;i++){
    c[i] = parseInt(coord[i]);
    }
    //Now you have an array of separate coordinates values as integers
    alert ('coordinates values are '+c[0]+' and '+c[1]+' and '+c[2]+' and '+c[3])
    }

    function 
    alertDim(){
    document.getElementById('imag').offsetHeight;
    document.getElementById('imag').offsetWidth;
    alert('Image dimentions are: W='+w+' H='+h)
    }
    </script>
    </head>
    <body>
    <img id="imag" src="00.jpg" width="115" height="158" border="0" usemap="#Map"><br>
    <a href="#" onclick="newCoord()"> change coordinates from 0,0,109,54 to 0,86,109,155</a> <br>
    <a href="#" onclick="alertCoord()">alert coordinates</a><br>
    <a href="#" onclick="splitCoord()">alert splited coordinates</a><br>
    <a href="#" onclick="alertDim()">alert Image's Width and Height</a>
    <map name="Map">
      <area id="x" shape="rect" coords="0,0,109,54" href="#">
    </map>
    </body>
    </html> 
    Attached Files Attached Files
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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