Styling an image map?

[Schmoopy]

Hi there, I have an image map, but I want to somehow style it in CSS so that as I add more hotspots, they will each have their own background-image. I've searched around but haven't found anything, is it possible?

Here is the code I currently have for the map:

<img src="images/map/ukcentres3.png" alt="UK" usemap="#map" style="border:none; z-index:0;"/>
<map name="map" id="map">

  <area shape="circle" coords="169,659,9"  href="#" alt="Ivyleaf Mountainboarding Centre" title="Ivyleaf Mountainboarding Centre"/>
  <area shape="circle" coords="187,648,9"  href="#" alt="South West Mountainboard Centre" title="South West Mountainboard Centre"/>
  <area shape="circle" coords="238,639,8"  href="#" alt="Ride The Hill (Quantock)" title="Ride The Hill (Quantock)"/>
  <area shape="circle" coords="347,646,8"  href="#" alt="Haredown" title="Haredown"/>
  <area shape="circle" coords="388,644,8"  href="#" alt="Knockhill Mountainboard Centre" title="Knockhill Mountainboard Centre"/>
  <area shape="circle" coords="173,258,9"  href="#" alt="Air Fusion" title="Air Fusion"/>
  <area shape="circle" coords="375,616,8"  href="#" alt="Ride The Hill (XBP)" title="Ride The Hill (XBP)"/>
  <area shape="circle" coords="350,609,8"  href="#" alt="Oakwood Youth Challenge" title="Oakwood Youth Challenge"/>
  <area shape="circle" coords="333,598,8"  href="#" alt="The Waterside Centre" title="The Waterside Centre"/>
  <area shape="circle" coords="177,292,8"  href="#" alt="Newmilns Ski and Board Centre" title="Newmilns Ski and Board Centre"/>
  <area shape="circle" coords="250,478,8"  href="#" alt="Hale Superbole" title="Hale Superbole"/>
  <area shape="circle" coords="248,515,10" href="#" alt="The Edge" title="The Edge"/>
  <area shape="circle" coords="247,545,8"  href="#" alt="Court Farm" title="Court Farm"/>
  <area shape="circle" coords="256,575,8"  href="#" alt="Red Hill Extreme" title="Red Hill Extreme"/>
  <area shape="circle" coords="266,554,7"  href="#" alt="Out To Grass" title="Out To Grass"/>
  <area shape="circle" coords="287,563,8"  href="#" alt="Bugsboarding" title="Bugsboarding"/>
  <area shape="circle" coords="253,393,8"  href="#" alt="Surf The Turf" title="Surf The Turf"/>
  <area shape="circle" coords="129,707,9"  href="#" alt="Xtreme Academy" title="Xtreme Academy"/>
  <area shape="circle" coords="147,581,9"  href="#" alt="Wild West Mountain Boarding" title="Wild West Mountain Boarding"/>
  <area shape="circle" coords="199,515,9"  href="#" alt="The Dragon Run" title="The Dragon Run"/>
  <area shape="circle" coords="102,390,9"  href="#" alt="Surfin' Dirt" title="Surfin' Dirt"/>
  <area shape="circle" coords="288,429,9"  href="#" alt="Another World MBC" title="Another World MBC"/>
  <area shape="circle" coords="397,579,8"  href="#" alt="Stubbers Activity Centre" title="Stubbers Activiy Centre"/>
  <area shape="circle" coords="314,629,10" href="#" alt="Ride The Hill (Deptford Downs)" title="Ride The Hill (Deptford Downs)"/>
  <area shape="circle" coords="261,663,10" href="#" alt="Coastal Mountain Boarding Centre" title="Coastal Mountain Boarding Centre"/>
  <area shape="circle" coords="210,572,8"  href="#" alt="Greenman MBC" title="Greenman MBC"/>
  <area shape="circle" coords="300,475,9"  href="#" alt="Ride The Hill (KMC)" title="Ride The Hill (KMC)"/>
</map>
</div>

I've already tried styling it like "#map area{ background:url(images/image.jpg) no-repeat; }" but no luck as of yet =/.

So instead of having to make a new image every time I want to add a new hotspot, there would be a background image already there, making it much simpler. Here is a link to the page so you can see what I mean:

http://www.bombthehills.com/ridingspots-uk.html

Thanks in advance,

Jack.

[Schmoopy]

I guess this means it isn't possible?

I've tried all sorts of things and none of them work, so I don't think they want you to be able to style the image map.

Oh well, guess I'll keep having to make new images for each map

[Snookerman]

I'm sure you've googled for this, but in case you haven't seen these pages, here are some results I found that might help you out:

http://archivist.incutio.com/viewlist/css-discuss/40492
http://www.tanfa.co.uk/archives/show.asp?var=289
http://www.cssplay.co.uk/articles/imagemap/

Hope that helps.

[Schmoopy]

Yea I had already searched for them, but unfortunately those are only for CSS based images maps, which isn't really what I was looking for.

It's not a huge deal though, making new maps in photoshop isn't too hard.

Thanks anyway.

[BLiZZaRD]

Man, this seems like it should be do-able. I do know that the ImageMap doesn't recognize CSS "commands" (for lack of better word). So perhaps a new thought on the matter would help...

What if you have your little target images separate. So the Map is the background image of the page. Use CSS to position the clickable icons there on the background. You could make a class in CSS with the image in it. Then you just have to edit the page with the link and CSS class and the dot will appear. In CSS you can then position it.

Seems like a lot of work though... hmmm there has to be something.... Let me think on it.

[Schmoopy]

Yea, I can see what you mean but positioning all those images again in CSS would take some time, for now I'm happy to just make new images, I just like coming up with ways to make things easier for myself

[BLiZZaRD]

What about a "grid"? Your map/background image could be split into sections the size of your icons. Each grid square could have a variable placed with it. Then in CSS you just change the background image to show the icon, and in the HTML you just add the link.

It would be a lot of work to set it up, but afterwords only 3 seconds to add a clickable spot.

[Schmoopy]

Indeed, well it's a good idea but I think I've sort of gone off the idea now, it just sounds too much for me to be bothered with, and as not many new centres will be cropping up that often I'll just leave it down to good old Dreamweaver for the image maps and photoshop for the map.

Thanks very much for your input anyway.