Image Map in style tags

[onpnt]

Is there a way for me to incorperate a image map into the style tages where I set the background image. I can't seem to find a reference to doing it and I can't figuer out how to get the maps to work correctly.
<STYLE TYPE=&quot;text/css&quot;><!--
BODY{
background-image: url(&quot;Brochure2.jpg&quot;
background-position: -18% 80%;
background-repeat:
no-repeat;
background-attachment:
fixed;
}
--></STYLE>

I want to use this USERMAP for the image
<MAP NAME=&quot;map1&quot;>
<AREA SHAPE=RECT COORDS=&quot;667,388,821,611&quot; HREF=&quot;ZachF.htm&quot; ALT=&quot;&quot; OnMouseOut=&quot;window.status=''; return true&quot; OnMouseOver=&quot;window.status='About Zach Fell'; return true&quot;>
<AREA SHAPE=RECT COORDS=&quot;477,385,639,614&quot; HREF=&quot;equip.htm&quot; ALT=&quot;&quot; OnMouseOut=&quot;window.status=''; return true&quot; OnMouseOver=&quot;window.status='Equipement'; return true&quot;>
<AREA SHAPE=RECT COORDS=&quot;292,387,453,614&quot; HREF=&quot;TomF.htm&quot; ALT=&quot;&quot; OnMouseOut=&quot;window.status=''; return true&quot; OnMouseOver=&quot;window.status='About Tom Fell'; return true&quot;>
<AREA SHAPE=default HREF=&quot;index.htm&quot;>
</MAP>

Thanks for the help.

onpnt I may not get it the 1st or 2nd time,
but how sweet that 15th time can be.

 

[starway]

You can't combine imagemap with background image.
Imagemap works only for ordinary <img> tags.

 

[onpnt]

now I have a beginner question though. how do I obtain the same positioning as the style I have set with in the IMG tags?
I'm trying to work around changing a picture my client gave me, so I jsut want to get rid of the top and left white borders by moving it.

background-position: -18% 80%;
background-repeat: no-repeat;

Thanks starway,
onpnt I may not get it the 1st or 2nd time,
but how sweet that 15th time can be.

 

[starway]

>>I jsut want to get rid of the top and left white borders by moving it.
I don't really understand what exactly do you need, you have to show the code or be more presize.

In general, in order to set a desired image position you can place it inside a table cell and use all known html table techniques, or place it inside absolutely-positioned block element.

 

[BlueMango]

Wouldn't it be easiest to edit your image? There are many free image editing programs available on the internet (The Gimp, Paint Shop Pro, plain old MSPaint even..) with which you could crop out the areas you don't want easily.

However, answering your last question..
put this in your CSS:

#map { position:absolute; left:-18%; top:80% }

then, use this code for your image:
[tt]<IMG src=&quot;Brochure2.jpg&quot; usemap=&quot;map1&quot; height=&quot;height&quot; width=&quot;width&quot;>[/tt]

Note that it is fairly important to set the height and width of your image explicitly, otherwise a user agent (browser) might act strangly while the image is loading..

Also, make sure that your co-ordinates that you are using in your image-map are relative to the image's pixels, NOT to the screen like I assume you have it now...

Hope that helps!