I heart Stu Nicholls' image maps!

So I was working on this map of New Zealand today. I've got a bunch of dots all over the map, and a piece of text that goes with each dot.

I wanted to hover over a dot and have the dot light up, and the relevant piece of text come up - but not next to the dot. Rather, I wanted all the pieces of text to show up in the same place on the graphic - somewhere out at sea where they are easy to read.

In the olden days I'd have made some kind of hideous image map in Dreamweaver - and used Dreamweaver's proprietary scripting to do all kinds of mouseovers and mouseouts in various places on the map. The HTML would have been impenetrable - as I realised today when I took a look at "one I did earlier" and couldn't for the life of me remember how precisely I did it - and it would have filled up my lovely clean CSS-styled page with tons of crap.

Surely I thought - there must be a better way. Flash? Nope - it's not a Flash site and I want it to stay that way. JavaScript? Hmmm - I'm not exactly a guru... I bet there's a way to do it with JavaScript, but I wonder if you can do it using nothing but CSS?

Googlegooglegoogle - oh! here's that lovely Stu Nicholls, popping up in my Google search results. Wonder how he does his...

Hmmmm. It has a big image, a bunch of rollovers where the graphic changes, and some text (and an image I don't need) somewhere else on the page. This could be it!

I just love playing with coding tricks and techniques, and adapting them to do what I need them to do. I'm such a geek. Most of the time these days I know enough to solve most CSS problems or challenges I come across, but sometimes you need a bit of help - and this was definitely one of those times.

What's great about Stu's technique is that it uses a simple definition list to hold all the text, with a link and a span inside the <dd> - and that's about it! There's also an image and an empty <em> tag (to draw a line from the large graphic to its accompanying piece of text) inside each <dd>, but as I don't need these bits, I can get rid of them and make it even more minimalist.

All the styling and absolute positioning of my text and the hover-state dots goes into the stylesheet, which keeps the HTML super-clean and tidy. No Flash, OnMouseOvers or JavaScript in sight! Amazing!

It took me a little while to figure out what each hook does, and I've realised that the positioning of each piece of text is calculated in terms of its relationship with the position of its accompanying dot. This will make for an interesting evening of measuring positions on my photoshop file to the nearest pixel, and translating these into co-ordinates... Still, I think it's a brilliant solution.

I'll show you the map when it's finished. So far I have precisely ONE dot and ONE piece of text in the right place. But at least I know it can be done now.

Thanks, Stu - you rock!

Hope my clients like it...

UPDATE 13/12/08: I meant to add a link to the completed map ages ago, but I completely forgot. Here it is at last - Māori Media Network - click on Why Māori radio > Radio map to view it. Oh - and the client loved it. Yaay!

Technorati tags: Stu Nicholls, CSSplay, image maps, old master, map, New Zealand, hover, text, dots, rollovers, pure CSS, absolute positioning, definition list, web development, tricks, hacks, Google, Maori Media Network, Māori Media Network, WebWeaver's World, webweaver.