How to Make a CSS Image Map
CSS image maps allow developers to place hot spots within images that contain links to other web pages. For example, a hot spot may be placed around the face of a person in the image which contains a link to their personal web page. When a user places the mouse over the person's face a shape will appear that delineates the hot spot area. Creating a CSS image map involves calling an image in html and then setting up the corresponding CSS codes between the html <head> tags. This articles demonstrates how to make an image map of the eyes and nose on a portrait Ginevra de Benci painted by Leonardo da Vinci.
Other People Are Reading
Things You'll Need
- Text editor, such as Notepad, Emacs, ConText Mozilla, Explorer or other browser
Instructions
-
Mapping It Out
-
1
Create two linked web pages. This example creates one for the eyes and one for the nose. The eyes page will read "These are the eyes" and the nose page will read "This is the nose." The sample html below creates the two pages:
<html>
<head>
<title>Eyes</title>
</head>
<body>
<h1>These are the eyes!</h1>
</body>
</html> -
2
Create the html tags for the image. Open a blank document and use the following code to call the image from the directory. You will have to change the name and the size specifications of your image:
<html>
<head>
<title>Face</title>
<div id="image">
<img src="da_vinci.jpg" width = "550" height = "425"/>
</div>
</body>
</html> -
-
3
Add links to the images within an unordered list tag. To add the links place the following code between the image and the division tags:
<ul>
<li class="d_eyes">
<a href="eyes.html" title = "eyes">
eyes
</a>
<li class="d_nose">
<a href="nose.html" title = "nose">
nose
</a>
</li>
</ul>
You may want to change the class names to better suit your image. -
4
Create the CSS for the image. The following code must go between the </title> and the </head> tags of the html document:
<style type="text/css">
#image {
width: 550px;
height: 425px;
position: relative;
}
#image ul {
margin: 0;
padding: 0;
list-style: none;
}
You can adjust the values however you like. For example, you can choose to add a value for image padding. Make sure that the reference matches the div name. In this example it is "image." You may choose another one like "picture" or "pic" etc. -
5
Create the CSS for the links. The following CSS code situates two separate hot spots over the eyes and nose:
#image .d_eyes a{
position: absolute;
width: 100px;
height: 20px;
text-indent: -1000em;
}
#image .d_nose a{
position: absolute;
width: 40px;
height: 20px;
text-indent: -1000em;
}
#image .d_eyes a{
top: 140px;
left: 270px;
}
#image .d_nose a{
top: 180px;
left: 300px;
}
#image a:hover{
border:5px solid #000000
}
</style>
Of course, your specifications will vary as your image will be different. A graphic design software like Coral Draw or Adobe Photoshop can provide pixel position information. However, you can always find the correct position by trial and error as well. Save the page in the same directory as the other two files. -
6
Test the Image map. Go to the directory where the files are saved and double click on the html file where the picture appears. You should see your picture in the browser. Run your mouse where the hotspots were placed. You will see a black frame appear. Click inside the frame and the reference pages will open.
-
1
Tips & Warnings
Try with a rather big image first as they are easier for developing image maps.
Make sure your CSS references match the reference names of the html. Otherwise the image map will fail to execute.
References
- Photo Credit M. Vuskovich
