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 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Make liquid images clickable with JavaScript?

    I am new to JavaScript.

    I've used HTML map and area tags to provide links for my image. The page is liquid. Everything on the page is by percentage. I set the image width to a percentage of the page. However, when my image compresses, my links are in the wrong place.

    I don't think it's possible to make liquid images clickable with HTML and CSS.

    Is there a Javascript solution to this problem?

  • #2
    Banned
    Join Date
    May 2006
    Location
    England
    Posts
    664
    Thanks
    0
    Thanked 84 Times in 84 Posts
    This could be an interesting Javascript task, but I wouldn't want to delve into it without being absolutely certain that there were not another solution.
    Have you asked in the CSS/HTML forums?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,511
    Thanks
    3
    Thanked 504 Times in 491 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script language="JavaScript" type="text/javascript">
    /*<![CDATA[*/
    
    // map id, original width, oroginal height
    function zxcSetCords(zxcmapid,zxcw,zxch){
     var zxcmap=document.getElementById(zxcmapid);
     var zxcareas=zxcmap.getElementsByTagName('AREA');
     if (zxcw&&zxch){
      for (var zxc0=0;zxc0<zxcareas.length;zxc0++){
       var zxcoords=zxcareas[zxc0].coords.split(',');
       zxcareas[zxc0].set=[zxcoords[0]/zxcw,zxcoords[1]/zxch,zxcoords[2]/zxcw,zxcoords[3]/zxcw];
      }
     }
    }
    
    function zxcCordsSet(zxcimgid,zxcmapid){
     var zxcimg=document.getElementById(zxcimgid);
     var zxcmap=document.getElementById(zxcmapid);
     var zxcareas=zxcmap.getElementsByTagName('AREA');
     for (var zxc0=0;zxc0<zxcareas.length;zxc0++){
      if (zxcareas[zxc0].set){
       zxcareas[zxc0].coords=zxcareas[zxc0].set[0]*zxcimg.width+','+zxcareas[zxc0].set[1]*zxcimg.height+','+zxcareas[zxc0].set[2]*zxcimg.width+','+zxcareas[zxc0].set[3]*zxcimg.height;
      }
     }
    document.Show.Show1.value=zxcareas[0].coords;
    }
    
    function Test(oo){
    document.Show.Show0.value=oo;
    }
    /*]]>*/
    </script></head>
    
    <body onload="zxcSetCords('tstmap',400,400);zxcCordsSet('tstimg','tstmap');" onresize="zxcCordsSet('tstimg','tstmap');">
    <img src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="60%" usemap="#tstmap" id="tstimg" style="position:absolute;left:0px;top:0px;" />
    <map name="tstmap"  id="tstmap">
    <area shape="rect" coords="260,25,290,55" onmouseover="Test('over');"  onmouseout="Test('out');" />
    </map>
    <script> vic=0; </script>
    <form name=Show id=Show style="position:absolute;visibility:visible;top:420px;left:0px;" >
    <input size=100 name=Show0 >
    <input size=10 name=Show1 >
    <input size=10 name=Show2 >
    <input size=10 name=Show3 >
    <input size=10 name=Show4 >
    <input size=10 name=Show5 >
    <input size=10 name=Show6 >
    <input size=10 name=Show7 >
    <input size=10 name=Show8 >
    <input size=10 name=Show9 ><br>
    <textarea name=TA rows=1 cols=100 ></textarea>
    </form>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • Users who have thanked vwphillips for this post:

    dave- (09-04-2008)

  • #4
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Yes, I posted the question in the HTML and CSS forum but it got deleted as a multiple posting because I made the mistake of doing it concurrently with this posting
    Last edited by dave-; 09-04-2008 at 04:25 PM. Reason: missed word

  • #5
    New Coder
    Join Date
    Aug 2008
    Posts
    11
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Thumbs up

    Many thanks Vic! I would mark this thread resolved if I I could figure out how to do that. Thanks again. Great code!


  •  

    Posting Permissions

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