View Full Version : help with a dynamic imagemap hotspot please!

04-08-2004, 12:20 AM
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!

04-08-2004, 12:28 PM
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


04-08-2004, 12:57 PM
See an example (view also attchment):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
function newCoord(){
function alertCoord(){
function splitCoord(){
var coord = document.getElementById('x').getAttribute('coords').split(',');
var c = 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(){
h = document.getElementById('imag').offsetHeight;
w = document.getElementById('imag').offsetWidth;
alert('Image dimentions are: W='+w+' H='+h)
<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="#">