Pure CSS Rollover Map Demo – England Regions

Jason Judge — Tue, 07 Apr 2009 16:36:30 +0000

A tutorial for producing these maps will be provided soon. With the help of InkScape and a spreadsheet, they are not quite as fiddly as you would expect. Each map consists of a single image, with all the roll-over images as a part of the main map image.

It uses a ‘sprite’ technique to move the roll-over background images into position when the mouse hovers over the [square] regions. Why do it like this? Firstly there is no JavaScript involved. Secondly it keeps the number of objects downloaded to a minimum – just one stylesheet (or set of styles) and one image. Lastly, it degrades nicely to a simple unordered list when CSS is not available or relevant.

Half Size

Full Size with Picture Roll-Overs

You are not limited to colours in the roll-over. You can add whatever images you like. If using PNGs (as we are here) you can even include alpha-transparency to overlay the main map with a semi-transparent roll-over image.

Since this demo uses PNGs, Internet Explorer 6 (and below) users may see grey-blue backgrounds around the images. You can work around this by using GIF images instead. However, I would encourage IE6 users to upgrade in the first instance.

Credits

The rest are my own snaps: Catbells, Drax Power Station, Angel of the North, a member of the Queen’s Guard and a Clapper Bridge in Cornwall.

First Considerations

Phill Brown — Wed, 20 Aug 2008 18:23:22 +0000

Over the next few months I’ll be working on a project that involves coding the frontend of a website.

The first thing I consider is what level of accessibility is the site going to follow and at what cost. I always write a site to adhere to a strict xhtml standard:

[sourcecode language='html'][/sourcecode]

Why? If I don’t follow a standard then what am I actually following. There isn’t any extra effort in doing things by the book so why avoid it?

The next thing is browser compatabily. I think that a website should be available to as large an audience as possible. Unfortunately this means using hacks – there is no way around it. The browsers as of today that I want to support are:

Firefox 1.0+
Internet Explorer 6.0+
Safari 1.0+
Opera 9.0+

Throughout this project there will be lots of stumbling blocks regarding browser compatability – how these are overcome will be explained in future posts.

Consilience Media » Web Interface

Pure CSS Rollover Map Demo – England Regions

Half Size

Full Size with Picture Roll-Overs

First Considerations