HTML/JavaScript Image Map Help

Question

I made this image as the opening page for a website I'm making. I put the image in JavaScript so that it would adjust itself according to the screen resolution. But, when I tried to create an image map for the bar at the bottom it would not make an image map. Could anyone solve this problem? Is it because the image is in JavaScript?

Here is the link to the page: http://www.hilaal.org/index1.html.

Thank You for any help.

Answer 1

The problem seems to be (for me anyway) that your coordinates are wrong.  I tried your page, and got a height of 824 pixels, despite the fact that your Y coordinates aren't scaled appropriately and start at 878 to 992, which was off the screen!

You need some additional logic in there-- something like:

var x1,y1,x2,y2;

x1 = scale_coord(47,1800,correctwidth);

x2 = scale_coord(206,1800,correctwidth);

y1 = scale_coord(878,1005,correctheight);

y2 = scale_coord(992,1005,correctheight);

document.write("<area shape=\"rect\" coords=\""+x1+","+y1+","+x2+","+y2+\" herf=\"index.htm\" />");

function scale_coord(val,norm,max) {

  return int(max*(val/norm));

}

But really, I wouldn't do it that way-- Your image is going to suffer from JPEG compression and expansion on the user's screen, so it's going to look a little ugly.  Probably better to create buttons as separate div styles (text on a gradient background), or text on an image background (a gradient background image won't look as bad when compressed, but text will).

DaveE