Creating Image Map using CSS
Image Map is used to present your pictures in much user friendly nature. They are great to present something to end users. Though, the rise of Flash has decreased the use of Image Maps but still there are places where you can use it.Image Map is basically an elaborate variation of the <a> tag, an image map allowed an image file to contain multiple hotspots that linked to any number of web pages or external sites. CSS does allow you to create an image map with some subtle mouse over effects with a few slick modifications to the <ul> and <li> tags.For this exercise, we’re going to use the image shown below to create an image map with two hotspots using CSS code. Save the file to your hard drive and then open it in an image editor that will allow you to measure the image in pixels.
This image will be used to create a CSS image map
Now that you have the image saved to your hard drive and open in an image editor, let’s start coding the HTML and CSS code that will make the image map. In a text or HTML editor, enter the code below, then save your file with an .htm extension.
CSS Image Map
