Flexible image mapping - Is there a way in HTML or CSS to assign image map

WhatheJunk

New member
coordinates relatively? I know how to define image maps, or images within which a link can be placed using coordinates and whatnot.

I also know how to define a scaling rule to images, so that they remain in scale to the parent element as you re-size the window..

Is there a way to combine the two, and make it so that the coordinates are assigned to a relative proportion, instead of a fixed size?

For example, if you have this code:

<map name="pictures">
<area href="index.html"Shape="poly" coords="68,6 303,6, 265,45, 29,45,">
</map>
<img src="images/bt/writings_up.gif" border="0" class="nav" usemap="pictures">

..It will create an invisible link layered over the said picture. The image is assigned to scale by percentage in proportion to the parent element, or the background, using the CSS style sheet code,

img {width:30%}

What I'm trying to do is make it so that said link will follow the picture's movement, scaling in size along with the image, so that the link isn't hovering around the edges of the image...

Is that possible in either HTML or CSS?
 
Back
Top