Image Mapping ? - GoFuckYourself.com

Spudman · 02-09-2005, 11:35 AM

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 · 02-09-2005, 11:37 AM

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 · 02-09-2005, 11:43 AM

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 · 02-09-2005, 11:51 AM

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 · 02-09-2005, 12:00 PM

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 · 02-09-2005, 12:06 PM

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 · 02-09-2005, 12:08 PM

cheers sexdwarf,

anyone know any others ways of achieving this ?

calmlikeabomb · 02-09-2005, 12:20 PM

Like I mentioned earlier you can use styling sheets.

Code:

*/ 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 · 02-09-2005, 03:52 PM

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..

02-09-2005, 11:35 AM	#1
Spudman Confirmed User Join Date: Aug 2002 Location: UK Posts: 3,198	Image Mapping ? 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. __________________ Take it Easy !!!

02-09-2005, 11:37 AM	#2
sexdwarf Confirmed User Join Date: Jan 2005 Posts: 196	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... __________________ ICQ me for any programming projects - Agency quality work for non-agency prices ICQ 337 028 441

02-09-2005, 11:43 AM	#3
Spudman Confirmed User Join Date: Aug 2002 Location: UK Posts: 3,198	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 ?? __________________ Take it Easy !!!

02-09-2005, 11:51 AM	#4
calmlikeabomb Confirmed User Join Date: May 2004 Location: SW Palm Bay, Florida Posts: 1,323	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.... __________________ subarus.

02-09-2005, 12:00 PM	#5
Spudman Confirmed User Join Date: Aug 2002 Location: UK Posts: 3,198	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 __________________ Take it Easy !!!

02-09-2005, 12:06 PM	#6
sexdwarf Confirmed User Join Date: Jan 2005 Posts: 196	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) __________________ ICQ me for any programming projects - Agency quality work for non-agency prices ICQ 337 028 441

02-09-2005, 12:08 PM	#7
Spudman Confirmed User Join Date: Aug 2002 Location: UK Posts: 3,198	cheers sexdwarf, anyone know any others ways of achieving this ? __________________ Take it Easy !!!

02-09-2005, 12:20 PM	#8
calmlikeabomb Confirmed User Join Date: May 2004 Location: SW Palm Bay, Florida Posts: 1,323	Like I mentioned earlier you can use styling sheets. Code: / 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. __________________ subarus. Last edited by calmlikeabomb; 02-09-2005 at 12:22 PM..

02-09-2005, 03:52 PM	#9
mortenb Confirmed User Join Date: Jul 2004 Location: Denmark ICQ: 7880009 Posts: 2,203	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..