View Full Version : Make liquid images clickable with JavaScript?

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?

09-02-2008, 01:07 PM
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<script language="JavaScript" type="text/javascript">

// 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(',');

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){

function Test(oo){

<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');" />
<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>


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

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: