View Full Version : image map for background image in a div tag

10-12-2008, 09:02 PM
Can someone please tell me how I can create some maps for an image thats the background of a div tag.
<div id="main div" style="border: 1px solid blue; background-image: url(background800600full.gif); width: 800px; background-repeat: repeat-x;" align="center">
I'd like to create maps for 3 segments of the image. Im a novice to maps, divs etc and the tutorials online dont have exactly what I'm looking for
Also I have just noticed that on my local browser the image appears but when I upload to my webserver it doesnt appear unless I do a direct insert ie <IMG>

Much appreciated

10-12-2008, 09:21 PM
dont think you can

not for background images anyway

10-12-2008, 09:25 PM
dont think you can

not for background images anyway

Nope, you'd have to insert the image in the div I think.

10-13-2008, 02:34 AM
The image should show up on the server just fine as long as it's actually uploaded.

If you create the links for the "image map" as a list, then they can be styled to appear as an image map, with the background image applied to ul rather than div.

Here's a rough example (http://www.solsector.com/cary/image_map/) and it's partly based on the ideas in this article (http://www.alistapart.com/articles/sprites).

10-13-2008, 01:15 PM
I would go with Cary's approach as well. Keep the background image and apply links on top of it. Look at the alistapart article he linked to.

10-18-2008, 10:57 PM
Thank you all for response, i used layer and linked it.. :)