CSS imagemap with text rollover

Hi, I am currently building a website which needs a map of english and welsh counties. I want to make it as simple as possible for users so am trying to create a rollover map which displays the county name. This is what I have so far: http://www.bluetomatoes.co.uk/map02/map.html

I designed it using ImageReady but as you can see the user has to download a new whole new image for each county (about 55 images!). ImageReady generates java script, but I have heard it is possible to achieve the same result using CSS, and without all the image downloads.

Can anyone help? It would be really appreciated.

Geoff

p.s. I did previously post this on the java forum and 'ukgeoff' replied suggesting I used CSS. But for some reason my thread disappeared and I couldn't log in. So ukgeoff- thanks a lot for your help previously...but annoyingly I can't access it!

Was probably lost in the recent downtime.

I don't know... Doing this in CSS sounds really, really tricky. I think the best way to do this while still keeping it accessible is to include your imagemap (remember those alt attribues) and also include a Text only version... like a series of menus on another page for people who can't use the image for whatever reason.

In that case I may do away with the rollover effect and just have it as an image map with alt / title tags...

or maybe javascript could provide some help?

It must be possible to rollover a point in an image to display a second image at the same time...isn't it?

Maybe Javascript could provide an answer... bear in mind though that some browsers block javascript...

Woohoo!!!! my 500th post! Get some!

With CSS you use a single image with all of your button states

for example say you have a button 100px wide by 25px tall.

You could have an image with a normal and hover state say 300px by 150px. The larger image will help if the font size gets scaled or something. Then you position like so.

#foo li a {
text-decoration:none;
background:url(../images/foo.jpg) 0px 0px no-repeat;
}

#foo li a:hover {
background:url(../images/foo.jpg) 0px -50px no-repeat;
}

something like that of course the values would depend on your need. This does a few things.

1. A single image to handle all of your buttons and multiple states
2. Eliminates the IE flicker bug.

And if you wanted text (assuming you had text on your button graphic) you could do

#foo span {
visibility:hidden !important;
display:none;
}

and add a <span>Link text</span> to the li like

<li><a href="" title="" accesskey=""><span>Blah!</span></a></li>

Hope this at least gets you on the right track. Although i prefer if possible to use actual text on the link elements over graphical text. I wouldn't rely on javascript for something like this mainly because there is no need. Also you have to think roughly 30% of users have JS disabled for one reason or another. Also if you ever need scalable tabs etc this article demonstrates what I am talking about here with a twist and may help you understand the concept a bit more. http://www.alistapart.com/articles/slidingdoors2/

Is this what you had in mind?

Started at the top of the map and working my down so the top of the map hovers ok.

http://www.thewanderer.us/map/map.htm

I've been tweaking this thing quite a bit and it's looking pretty darn good now. It has image preloading by using div backgrounds so they won't show up when CSS is disabled. The links are in a structured list. I've used z-index selectively to place smaller countries above others so things function properly. I consider this ready to go... it's all yours, no strings attached. You just need to finish up the rest of the countries, figure out the rest of the z-indexes and positioning and all that.

Oh yeah.. it checked out in IE, Mozilla, Opera, Firefox and validates xhtml strict.

Good luck with it!

Hats off to you!

That is uber cool!

That is the kind of thing I had in mind but the task of setting up all those IDs just seemed really daunting and I'd imagine it would be really fiddly...especially if you did it with every county! Again, hats off for making it all validate and everything!

Hats off indeed! It looks awsome! Thanks for your input everyone

Thanks guys. It was a fun and interesting project. The daunting part is setting up all the counties for the hover. (did I say countries earlier...lol).

If you need any guidance with that geoff let me know, but it's a simple task, just time consuming. Check out the gif's that I've already done for reference. The orange part needs to be the transparent color.

The bit that interests me is that surely all those divs have to be rectangular... you can't have polygon divs.... so how have you managed to get them to stay so perfectly within the necessary county? are some of them multiple divs to cover the extremities of the county or did you just go for best fit?

Either way... stormin work!

My god I happy with this map http://www.bluetomatoes.co.uk/map02/map.html
mriene you are a legend!

Took all day to finish it!

Minute44: They are rectangular divs, its a case of using z-index to have the smaller counties ontop on the larger ones. Works suprisingly well...

Way to go geoff. I imagine it did take some time, but it looks and works great. You finished it up well.

I was checking out all the counties and looks like you did very well on the index settings also, nice job.

FYI.. Nottinghamshire isn't hovering right. That's the only one I saw.

Don't forget to put all the CSS in it's own file now that it's done.

Minute, you have to crop each county to the minimal size that encompasses the white part of the county. This also is what helps the overall file size of the project. You then set any white parts of other counties as the color used for transparency and fill the county itself with whatever hover color you want. You could get extremely detailed, as you mentioned, by using multiple divs to get a more precise fit for each county, but after experimenting it seems fine with just one and plenty precise for it's purpose. Setting the indexes properly is very important, otherwise the rectangles can overlap the smaller counties. Just a matter of checking them all over and over and over again as you set each index. The main idea is to have the biggest part/center of the county to function properly as that's where most people will be targeting their selection.

Cool, it's just I've been given the task of making the website for the company I work at... They want a map and when they saw my valid XHTML site they went: "well, couldn't you make the map in XHTML as well?"

Cheers.

I am trying to re-create something very similar, but your example does not work in IE5, is there any reason for this?

Yeah, IE5 is crap. IE6 has been out for a very long time so people should be updated by now. Anyone not updated to IE6 must hardly browse the internet and NEVER do their windows updates. You simply cannot browse the internet with IE5 anymore without half the sites not functioning which should alert people to get with the times. The more people continue to support the old crap, the longer it takes to get people updated. Don't bother with IE5 no matter that the stats say 4.2%. Thankfully, IE5 is on a constant decline even with those who continue to support that garbage.

In my opinion the map is so cool people using IE5 will feel like the are missing out and will immediately upgrade...taking that 4.2% down to 0%!

Hi, I'm having a problem with the map... http://www.bluetomatoes.co.uk/map02/index_show.php

Not sure what I've done but for some reason on Internet Explorer it is displaying a kind of hidden list down the left hand side. This causes a scroll bar on the right, and also you can't click on the 'useful links' section.

Any ideas what I might have done wrong?

Thanks,
Geoff

p.s I know the colours are wrong when you hover over, the only one I have sorted is cornwall