First time visitor? The tutorials start here.

Making Accessible Image Maps with CSS

For this next part, it would be helpful to have an image editor handy, so you can measure out the coordinates of each celestial body in pixels.

The Sun touches the top, bottom, and left of the image, and its width is at least 90px. Since the nearest planet (Mercury) is roughly 150px from the left edge, let’s go about halfway between 90 and 150 for this link’s width. Remember, we gave the sun’s link the id of “sun”:

#sun {
	left: 0;
	top: 0;
	width: 120px;
	height: 100%;
}

Now for Mercury, which is about 148px in from the left and 180px down from the top. Since Mercury is very tiny, a link of 20px square would be more user-friendly than a link that only covers Mercury. To get the top and left positioning for this tiny dot in the picture, subtract half of 20 from 148 and 180.

#mercury {
	left: 138px;
	top: 170px;
	width: 20px;
	height: 20px;
}

Follow the same method for all the other tiny planets.

For the larger planets, you’ll want to imagine a square drawn around each planet (it’s easiest to actually draw a square around them on a copy of the graphic), then measure the top left corner of that square from the top and left of the whole graphic. For Jupiter, this turns out to be roughly 280px from the left and 138px from the top.

As for Jupiter’s width and height, they are roughly 84px. Since Jupiter takes up plenty of space in the graphic, 84×84 should be large enough for its link.

#jupiter {
	left: 280px;
	top: 138px;
	width: 84px;
	height: 84px;
}

Getting fancy

Hover effects

If you wish, you could create a background graphic for each link, which shows when the link is hovered on. For example, using an image like this sun image, you can make the sun appear to brighten when it’s hovered on.

To have an image appear when the sun is hovered on, use something like this in your CSS:

a#sun:hover {
	background: url(sun.jpg) left top no-repeat;
}

Another technique would be to load the original graphic in your image editor and lighten each planet, without lightening the space background. Then, use the same graphic but with different positioning for each hover state. With the sun, the CSS would look the same as the CSS I just posted. But for Jupiter, you would position the background -280px horizontally and -138px vertically, since 280 and 138 are the coordinates of where that link starts.

To show you an example of this, let’s say the background graphic is called planets_hover.jpg. Taking into account the CSS for Jupiter’s regular state, its hover state would look something like this:

a#jupiter:hover {
	background: url(planets_hover.jpg) -280px -138px;
}

You can either add no-repeat to the end or leave it off. Since the image is far too big to tile within the link, it doesn’t really matter in this case.

Links in front of links

I wouldn’t see much use for this in most cases, but what if you want the sun’s link to extend past Mercury and Venus, with all its gasses getting brighter as it’s hovered on? In that case, you would make that link and its background image wider, of course. Then, you would apply one z-index to the Sun, with another, larger z-index for Mercury and Venus.

Adding to the existing CSS, the part highlighted in bold:

#sun {
	left: 0;
	top: 0;
	width: 120px;
	height: 100%;
	z-index: 10;
}
#mercury {
	left: 138px;
	top: 170px;
	width: 20px;
	height: 10px;
	z-index: 20;
}

When you define Venus, do the same with its z-index that you did with Mercury. The actual numbers for the z-index are arbitrary and any positive numbers should work, as long as Mercury and Venus have a higher z-index than the sun.

The finished product

See the finished product here.

That about does it for this tutorial. I hope you’ve enjoyed it and found it useful. 🙂

This post has multiple pages. Go to page: 1 2

If you found this article useful, please spread the word:
Stumble it! Digg! Tweet it!



Questions or comments?

Please log in to post a comment. Sorry, but it prevents this from happening. If you're not registered yet, you can register here.