...

View Full Version : Make liquid images clickable with JavaScript?



dave-
08-31-2008, 11:45 PM
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?

Arty Effem
09-02-2008, 03:15 AM
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?

vwphillips
09-02-2008, 01:07 PM
<!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>

dave-
09-04-2008, 05:13 PM
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:o

dave-
09-04-2008, 05:20 PM
Many thanks Vic! I would mark this thread resolved if I I could figure out how to do that. Thanks again. Great code! :thumbsup:



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum