CSS Image Maps with change map color on rollover
In this tutorial, we're not only going to get you up to speed on how to create a CSS image map, but, we're also going to take it a couple steps further and add hover states to our image map using a CSS background image sprite, as well as a "tooltip" like popup.
view demo
view demo
Introduction
In the days of table based web design, using image maps in your web layouts were quite common. They were used to define clickable areas, or "hotspots", within several sliced images (coming together to form one image). During this time, these hotspots were used mostly for navigational purposes. Today, image maps created in CSS are not only a much leaner and cleaner markup, but they're also easily editable and are often used for displaying additional content when hovered, not just as a means of navigation.
Before we get started, let's take a look at an old school image map using tables. First of all, the majority of interface designers used an image editing program like Fireworks or Photoshop to slice the image into its separate sections, and then exported it into HTML using tables.
What you'd end up with is 17 images, a spacer gif, and a mess of table rows and very un-semantical markup.
If you take a look at the page, you'll notice it does exactly what it's supposed to do. It's when you look "under the hood" you'll see the mess, not to mention, adding additional functionality to the image map, like hover states, usually requires javascript.
Semantics and the taboo of table based web design aside, how much of a nightmare is it to edit that? I mean, if you decided to change the source image whatsoever there's a lot of legwork to be done to re-export it into HTML, especially if your 17 images becomes 25 images. My stomach turns just to think about it.
What we're going to do is cut the HTML into a fraction of what you see above, while using only one image and CSS.
First, we'll be recreating the above mess in a much leaner, easily manageable, and semantic way. Once we get our feet wet and get comfortable with how CSS image maps work, we'll kick it up a notch and use a CSS background image sprite to add some hover states to our image map. Lastly, as if that wasn't enough, we'll take it even one step further and demonstrate how an image map's use is not necessarily restricted to its navigational purposes, but proves to be quite useful in providing additional information about specific sections of the image map using a "tooltip" like pop-up.
Noobnote:
As pointed out in the comments, I don't want to confuse a beginner with the HTML map tag and image slicing. I refer to the above example as "image map" when, in all actuality, it is a way of slicing and image into a table and creating its hotspots that way. I have always just referred to both ways as image mapping, and I apologize for any confusion.Recreate our image map using CSS
In the table based image map, I used Photoshop to slice my continents map into 17 different images to be used for my 6 hotspots, or clickable links. In our CSS image map, we're only going to use one image.
map-color.png
Apparently Wikipedia didn't want to include Antarctica in the continents map so we'll be working with 6 instead of 7! Oh well, the important lesson here is CSS image maps, not geography.
What we're going to do is create an unordered list and use our map-color.png as its background-image. Fire up your text-editor of choice and create a new html document with the following markup in it:
1.<ul id="continents">
2. <li id="northamerica"><a href="http://en.wikipedia.org/wiki/North_America">North America</a></li>
3. <li id="southamerica"><a href="http://en.wikipedia.org/wiki/South_America">South America</a></li>
4. <li id="asia"><a href="http://en.wikipedia.org/wiki/Asia">Asia</a></li>
5. <li id="australia"><a href="http://en.wikipedia.org/wiki/Australia">Australia</a></li>
6. <li id="africa"><a href="http://en.wikipedia.org/wiki/Africa">Africa</a></li>
7. <li id="europe"><a href="http://en.wikipedia.org/wiki/Europe">Europe</a></li>
8.</ul>
What we have here is a simple unordered list containing our 6 continents and links to their information on wikipedia.org.
Let's add some basic styles to our ul element.
01.ul#continents {
02. list-style: none;
03. background: url(images/map-color.png) no-repeat 0 0;
04. position: relative;
05. width: 580px;
06. height: 268px;
07. margin: 0;
08. padding: 0;
09.}
02. list-style: none;
03. background: url(images/map-color.png) no-repeat 0 0;
04. position: relative;
05. width: 580px;
06. height: 268px;
07. margin: 0;
08. padding: 0;
09.}
Some basic styles here, nothing special. We removed the list-style, added a background image, declared its width and height to be the same as our background image, and reset the margins and padding. The important declaration to pay attention to here is its position value of relative. This will allow for us to absolutely position our li elements next. You should have something like this.
Now we need to position our li elements according to their size and location on the continents map.
To make it easier for positioning our li elements, I recommend adding a 1px border to each li element, to guide us as a wireframe. We can remove the border when we're done positioning our li elements. Also, because all of our li elements will have this border AND also have a position value of absolute, rather than repeating ourself on each element's declarations, let's add them to all the li elements in our unordered list. Below your ul#continents styles add the following styles:
1.ul#continents li {
2. border: 1px solid #000;
3. position: absolute;
4.}
If you look at the page now, you'll see all of our li elements all bunched up in the left hand corner, overlapping one another. This is because they all have an absolute position, but there aren't any left, top, right, or bottom property values declared yet. We'll do that next.
Right below the ul#continents li styles, add the following styles:
01.#northamerica {
02. width: 227px;
03. height: 142px;
04. top: 2px;
05. left: 0px;
06.}
07.
08.#southamerica {
09. width: 108px;
10. height: 130px;
11. top: 131px;
12. left: 76px;
13.}
14.
15.#africa {
16. width: 120px;
17. height: 140px;
18. top: 83px;
19. left: 209px;
20.}
21.
22.#europe {
23. width: 120px;
24. height: 84px;
25. top: 1px;
26. left: 211px;
27.}
28.
29.#asia {
30. width: 215px;
31. height: 175px;
32. top: 1px;
33. left: 283px;
34.}
35.
36.#australia {
37. width: 114px;
38. height: 95px;
39. top: 152px;
40. left: 432px;
41.}
All we did was give each li element its respected height and width values, and also positioned each of them using the left and top properties.
Noobnote:
An easy way to get an idea of where to start with our left and top properties, I simply used Photoshops rectangle marquee selection tool and the "info" panel to give me an estimate. Once I had an approximate value from there, I fine tuned it in the CSS declarations.
Now if you take a look at our page, you'll see a nice little wireframe of our image map. This is where the borders come in handy for fine tuning the positions. I think it looks good where it is, let's move on!
Right now, our li elements are only "clickable" within the text area of each anchor element. We want our entire li element to be clickable, so we need to add some styles to our anchor elements. I've highlighted the new styles needed.
01.ul#continents {
02. list-style: none;
03. background: url(images/map-color.png) no-repeat 0 0;
04. position: relative;
05. width: 580px;
06. height: 268px;
07. margin: 0;
08. padding: 0;
09.}
10.
11.ul#continents li {
12. border: 1px solid #000;
13. position: absolute;
14.}
15.
16.ul#continents li a{
17. display: block;
18. height: 100%;
19. text-indent: -9000px;
20.}
21.
22.#northamerica {
23. width: 227px;
24. height: 142px;
25. top: 2px;
26. left: 0px;
27.}
28.
29.#southamerica {
30. width: 108px;
31. height: 130px;
32. top: 131px;
33. left: 76px;
34.}
35.
36.#africa {
37. width: 120px;
38. height: 140px;
39. top: 83px;
40. left: 209px;
41.}
42.
43.#europe {
44. width: 120px;
45. height: 84px;
46. top: 1px;
47. left: 211px;
48.}
49.
50.#asia {
51. width: 215px;
52. height: 175px;
53. top: 1px;
54. left: 283px;
55.}
56.
57.#australia {
58. width: 114px;
59. height: 95px;
60. top: 152px;
61. left: 432px;
62.}
First thing we did was declare our display property value as block, instead of its default of inline, allowing for us to give it a height value, in which case we're giving it a value of 100%. We also gave it a negative text-indent value, because we want our text to only exist if CSS is disabled, otherwise we don't want it shown on our image map.
That's it! You can now remove the border values from your li elements and you'll have a simple CSS image map.
Not only is the markup cleaner, and easier to read, but, it's also a lot easier to make modifications to. For instance, if we went in and added Antarctica to the map, we'd simply need to create another li element and position it accordingly.
Add hover states to our map
So far we have demonstrated how to implement a simple image map using CSS, but, from a presentational standpoint, there doesn't seem to be much of a difference between the two image maps (table based vs. CSS). Where CSS image maps stand out is the ability to use a CSS background image sprite to add hover states to our image map.
I used another map from wikipedia to create a simple image sprite.
map.png
As you can see, I created a new image called map.png. I'm going to replace the map-color.png in my ul#continents styles with my new sprite image.
01.ul#continents {
02. list-style: none;
03. background: url(images/map.png) no-repeat 0 0;
04. position: relative;
05. width: 580px;
06. height: 268px;
07. margin: 0;
08. padding: 0;
09.}
If you were to look at your page with the new background image, you wouldn't see a difference. What we need to do is add background image to our anchor elements, but only when they are hovered. What we're going to do is use the same background image as our ul#continents element on our anchor elements when they are hovered. We'll then need to position the background image according to its position within the sprite.
Let's go ahead and start with North America. At the bottom of your styles, add the following CSS rules:
1.ul#continents li a:hover {
2. background: url(images/map.png) no-repeat 0 0;
3.}
4.
5.ul#continents li#northamerica a:hover {
6. background-position: 0 -270px;
7.}
What we've done is added our background image (map.png) to all of our anchor elements within the continents unordered list. We then declared the background position on our anchor element inside of the li#northamerica. If you take a look at our image map now, you'll see when you hover North America, it has a nice little hover state letting you know you're hovering over North America. If you hover the other continents, you'll see a piece of the the colored version of North America, because we haven't changed their background-positions yet. We'll do that now.
Below the last CSS rules you just put in your styles, go ahead and add the rest of the background position values.
01.ul#continents li#southamerica a:hover {
02. background-position: -226px -273px;
03.}
04.
05.ul#continents li#africa a:hover {
06. background-position: -209px -417px;
07.}
08.
09.ul#continents li#europe a:hover {
10. background-position: -22px -427px;
11.}
12.
13.ul#continents li#asia a:hover {
14. background-position: -363px -268px;
15.}
16.
17.ul#continents li#australia a:hover {
18. background-position: -412px -455px;
19.}
Take a look at our image map now, and you'll see the background positions itself accordingly, when you hover over each continent.
How easy was that?! That's a nice little image map, with minimal markup, done 100% with CSS, and no javascript.
Here's our image map CSS and HTML up to this point:
001.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
002.<html xmlns="http://www.w3.org/1999/xhtml">
003.<head>
004.<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
005.<title>CSS Image Maps - With Hover States</title>
006.<style type="text/css">
007.ul#continents {
008. list-style: none;
009. background: url(images/map.png) no-repeat 0 0;
010. position: relative;
011. width: 580px;
012. height: 268px;
013. margin: 0;
014. padding: 0;
015.}
016.
017.ul#continents li {
018. position: absolute;
019.}
020.
021.ul#continents li a{
022. display: block;
023. height: 100%;
024. text-indent: -9000px;
025.}
026.
027.#northamerica {
028. width: 227px;
029. height: 142px;
030. top: 2px;
031. left: 0px;
032.}
033.
034.#southamerica {
035. width: 108px;
036. height: 130px;
037. top: 131px;
038. left: 76px;
039.}
040.
041.#africa {
042. width: 120px;
043. height: 140px;
044. top: 83px;
045. left: 209px;
046.}
047.
048.#europe {
049. width: 120px;
050. height: 84px;
051. top: 1px;
052. left: 211px;
053.}
054.
055.#asia {
056. width: 215px;
057. height: 175px;
058. top: 1px;
059. left: 283px;
060.}
061.
062.#australia {
063. width: 114px;
064. height: 95px;
065. top: 152px;
066. left: 432px;
067.}
068.
069.ul#continents li a:hover {
070. background: url(images/map.png) no-repeat 0 0;
071.}
072.
073.ul#continents li#northamerica a:hover {
074. background-position: 0 -270px;
075.}
076.
077.ul#continents li#southamerica a:hover {
078. background-position: -226px -273px;
079.}
080.
081.ul#continents li#africa a:hover {
082. background-position: -209px -417px;
083.}
084.
085.ul#continents li#europe a:hover {
086. background-position: -22px -427px;
087.}
088.
089.ul#continents li#asia a:hover {
090. background-position: -363px -268px;
091.}
092.
093.ul#continents li#australia a:hover {
094. background-position: -412px -455px;
095.}
096.
097.</style>
098.</head>
099.
100.<body>
101.<ul id="continents">
102. <li id="northamerica"><a href="http://en.wikipedia.org/wiki/North_America">North America</a></li>
103. <li id="southamerica"><a href="http://en.wikipedia.org/wiki/South_America">South America</a></li>
104. <li id="asia"><a href="http://en.wikipedia.org/wiki/Asia">Asia</a></li>
105. <li id="australia"><a href="http://en.wikipedia.org/wiki/Australia">Australia</a></li>
106. <li id="africa"><a href="http://en.wikipedia.org/wiki/Africa">Africa</a></li>
107. <li id="europe"><a href="http://en.wikipedia.org/wiki/Europe">Europe</a></li>
108.</ul>
109.</body>
110.</html>
Create a "tooltip" like pop-up when hovering our continents
By now, you should probably have a pretty good feeling about CSS image maps and how to implement them. What we're going to do now is take it one step further and create a "tooltip" like pop-up to each of our continents when they are hovered. First thing we need to do is remove the negative text-indent declaration from our anchor elements.
01.ul#continents {
02. list-style: none;
03. background: url(images/map.png) no-repeat 0 0;
04. position: relative;
05. width: 580px;
06. height: 268px;
07. margin: 0;
08. padding: 0;
09.}
10.
11.ul#continents li {
12. position: absolute;
13.}
14.
15.ul#continents li a{
16. display: block;
17. height: 100%;
18.
19.}
Now when you view your image map, you'll notice that all the country named anchors are visible again. We're going to take care of that now.
In the HTML of our image map, wrap the text content of each of our anchor elements in a <span> tag. So our html in the body should now look like this:
1.<ul id="continents">
2. <li id="northamerica"><a href="http://en.wikipedia.org/wiki/North_America"><span>North America</span></a></li>
3. <li id="southamerica"><a href="http://en.wikipedia.org/wiki/South_America"><span>South America</span></a></li>
4. <li id="asia"><a href="http://en.wikipedia.org/wiki/Asia"><span>Asia</span></a></li>
5. <li id="australia"><a href="http://en.wikipedia.org/wiki/Australia"><span>Australia</span></a></li>
6. <li id="africa"><a href="http://en.wikipedia.org/wiki/Africa"><span>Africa</span></a></li>
7. <li id="europe"><a href="http://en.wikipedia.org/wiki/Europe"><span>Europe</span></a></li>
8.</ul>
If you look at our image map now, you won't see any changes in our layout. Now, as I said, we only want text to show when we hover over one of our continents. So what we need to do is hide our span elements until our anchor element has been hovered. We will do this by using the display property.
Add the following CSS rules at the bottom of your styles:
1.ul#continents li a span {
2. display: none;
3.}
4.
5.ul#continents li a:hover span {
6. display: block;
7.}
What we're telling the browser to do is hide all span elements (display: none) until its parent anchor element is hovered, in which, it will change from display: none to display: block.
Take a look at our image map now and hover each continent. You'll now see the text will only show when its parent anchor element has been hovered. Let's make this thing look better, and add some useful information to the span elements, rather than just the country's name.
Note: I changed the way my HTML markup looks in the unordered list code for readability, it will not render the page any differently.
01.<ul id="continents">
02. <li id="northamerica">
03. <a href="http://en.wikipedia.org/wiki/North_America">
04. <span>
05. <strong>North America</strong>
06. Population: 528,720,588
07. </span>
08. </a>
09. </li>
10. <li id="southamerica">
11. <a href="http://en.wikipedia.org/wiki/South_America">
12. <span>
13. <strong>South America</strong>
14. Population: 385,742,554
15. </span>
16. </a>
17. </li>
18. <li id="asia">
19. <a href="http://en.wikipedia.org/wiki/Asia">
20. <span>
21. <strong>Asia</strong>
22. Population: 3,879,000,000
23. </span>
24. </a>
25. </li>
26. <li id="australia">
27. <a href="http://en.wikipedia.org/wiki/Australia">
28. <span>
29. <strong>Australia</strong>
30. Population: 21,807,000
31. </span>
32. </a>
33. </li>
34. <li id="africa">
35. <a href="http://en.wikipedia.org/wiki/Africa">
36. <span>
37. <strong>Africa</strong>
38. Population: 922,011,000
39. </span>
40. </a>
41. </li>
42. <li id="europe">
43. <a href="http://en.wikipedia.org/wiki/Europe">
44. <span>
45. <strong>Europe</strong>
46. Population: 731,000,000
47. </span>
48. </a>
49. </li>
50.</ul>
What we've done is wrap <strong> tags around our each of our continents' names and added each of their respected population counts.
Now we need to add some styles to our new elements and we're done. First thing we want to do is remove the underline from our anchor elements. Go ahead and find your ul#continents li a rules in your styles and add the highlighted style declaration.
1.ul#continents li a{
2. display: block;
3. height: 100%;
4. text-decoration: none;
5.}
Now we need to add some more rules to our span elements. Add the highlighted styles.
01.ul#continents li a:hover span {
02. display: block;
03. padding: 5px;
04. width: 150px;
05. background: #000;
06. position: relative;
07. top: 50%;
08. font: 11px Arial, Helvetica, sans-serif;
09. opacity: .75;
10. filter:alpha(opacity=75);
11. color: #FFF;
12.}
What we're doing here is giving our span elements (when they're parent anchor element is hovered) some styles to make our content look a little better and more like a tooltip.
Noobnote:
If you're not familiar with the opacity or filter:alpha properties, they're simply being used to drop the opacity of our span elements. Please note that these two declarations will cause your CSS to not validate. You could use javascript (jQuery) to apply the opacity settings if you wanted to, but for the sake of this demonstration I'm not going to worry about my CSS validating. Just know, without these two declarations your CSS and HTML to this point will certainly validate.
Take a look at our image map now, and you'll see we have implemented a nice little tooltip, when hovering each continent, giving us each of their populations!
Labels: CSS
2 Comments:
it's amazing CSS image maps with changing color.Post more and more like that.keep it up
Hi. Greetings. This post is really good and blog is really interesting. It gives good details.
Website Designer Australia
Post a Comment
Subscribe to Post Comments [Atom]
<< Home