Image Mapping ?

[Spudman]

hi,

Does anyone know how to image map an image that is the background to a table ?

here is the code i'm using and its works fine with normal images but when the image is a background its not working.

<TABLE BORDER=0 CELLPADDING=0 CELLSPACING=0 WIDTH=500 HEIGHT=200 BACKGROUND="Top.gif" alt="" usemap="#Top_Map">
<map name="Top_Map">
<area shape="poly" alt="" coords="172,111, 237,104, 301,101, 374,103, 435,109, 376,123, 314,129, 237,126" href="#">
</map>

Cheers for any help

Spudman.

[sexdwarf]

you can only use the usemap attribute for img, object and input (type="image") tags... what are you trying to accomplish since there may be other ways of doing it...

[Spudman]

i have the image background "top.gif" and i need to map a certain part of it. is this possible to do as the image is a set as a background ??

[calmlikeabomb]

You should probably be using css...

show us the table with the background image and tell us what part needs to be mapped. So we can help you easier....

[Spudman]

if this image was in the table above as its background and i want to have the "G" linked somwhere, this is what i'm trying to achieve. i dont have my specific file uploaded to show you. If anyone can point me in the right direction to sorting this it would be much appreciated.

Cheers
Spudman

[sexdwarf]

with dhtml you can track the mouse coordinates within an object, and have a global hook for the mousedown action... so if the mouse coordinates are within a certain range you can make it perform an action, if not make it ignore and continue it's regular business...

while not exactly what you need, here is a script i wrote that handles mouse coordinates etc... with some tweaking you could make it work to your needs...

http://dev3.impactpoint.net/ipMagnify.zip

(for those wanting to use this script in a commercial project, please read the licencing information, for non-commercial use feel free to play around though)

[Spudman]

cheers sexdwarf,

anyone know any others ways of achieving this ?

[calmlikeabomb]

Like I mentioned earlier you can use styling sheets.

*/ Set margins to align Gmap.gif with background image */
div.Gmap {
background-image: url("http://www.url.com/images/Gmap.gif")
margin: 0px 0px 0px 0px;
z-index: 1;
*/ Adjust the z-index rendering accordingly */
}

Basicly what I am doing here is creating a second image that will be postioned over the area of the background that needs to be mapped.

In this case, the Gmap.gif will need to be positioned over your table aligned with the "G" in the background.

[mortenb]

why not just put a transparent gif in an img tag on top of that background.. then you could put the map on the transparent gif..