CSS Atoms | CSS3 tutorials, tips, and articles - CSS tutorials, tips, and articles

What is an Image Map? A CCS Image Map allows multiple clickable hotspots on a single image.

For this tutorial I am going to use an image of a map (you can use any image). When I hover over each continent, a square will appear. Clicking over each continent will take me to that continent’s website.

Although, this techniques mixes presentation with content, it is still valid for HTML.

Total management control and security are a must! Check out Server Intellect dedicated servers; superior performance and reliability.

Let’s begin:

STEP ONE:
Save any image for web and add it to your HTML page inside a named div:

    <div id="image">
 
<img src="images/OurContinents.jpg" width="576" height="452" alt="Our Continents" />
 
    </div>

STEP TWO:
After the image div let’s add a list of links to each continent. (Include the list inside the “image” div).
Each list is going to have a new class (to identify each continent), a title attribute for each link (to contain the continent’s name), and a “_blank” target (to open the link in a new window).

 <div id="image">
 
    <img src="images/OurContinents.jpg" width="576" height="452" alt="Our Continents" />
 
    <ul>
 
    <li class="NorthAmerica">
    <a href="http://en.wikipedia.org/wiki/North_America" title="North America" target="_blank"> 
    North America
    </a>
    </li>
 
    <li class="SouthAmerica">
    <a href="http://en.wikipedia.org/wiki/South_America" title="South America" target="_blank">
    South America
    </a>
    </li>
 
    <li class="Europe">
    <a href="http://en.wikipedia.org/wiki/Europe" title="Europe" target="_blank">
    Europe
    </a>
    </li>
 
    <li class="Asia">
    <a href="http://en.wikipedia.org/wiki/Asia" title="Asia" target="_blank">
    Asia
    </a>
    </li>
 
    <li class="Africa">
    <a href="http://en.wikipedia.org/wiki/Africa" title="Africa" target="_blank">
    Africa
    </a>
    </li>
 
    <li class="Australia">
    <a href="http://en.wikipedia.org/wiki/Australia" title="Australia" target="_blank">
    Australia
    </a>
    </li>
 
    </ul>
 
    </div>

STEP THREE:
Let’s add the style for our “image” id. Open your CSS file, specify the style for the image using: #image.
In there we are going to set the width, height, and position of the div.
- The width and height (using pixels).
- The position property is going to be “relative”. It will allow the links to be positioned absolutely, in relation to the edges of the div.

#image {
            width: 576px;
            height: 452;
            position: relative;
}

STEP FOUR:
We don’t want the list bullets to show. So, let’s eliminate them by setting a new style for our unordered list <ul>, and adding a list-style property.

#image ul {
            margin: 0;
            padding: 0;
            list-style: none;
}

STEP FIVE:
Let’s add the style for our links and move them to the top-left corner by adding an absolutely position. Set the preferred hit area by setting the links widths and heights. Then, let’s hide the links by setting a negative text indent.
Later, we can individually position them over the correct continent.

#image a {
            position: absolute;
            width: 80px;
            height: 80px;
            text-indent: -1000em;
}

STEP SIX:
It’s time to position our links over the relevant continents. In order to do this, we are going to give a placement position (top and left) to the classes we applied before to each link.

#image .NorthAmerica a {
            top: 80px;
            left: 80px; 
}
 
#image .SouthAmerica a {
            top: 200px;
            left: 100px;
}
 
#image .Europe a {
            top: 180px; 
            left: 300px;
}
 
#image .Asia a {
            top: 190px;
            left: 390px;
}
 
#image .Africa a {
            top: 220px;
            left: 220px; 
}
 
#image .Australia a {
            top: 330px;
            left: 370px; 
}

STEP SEVEN:
To conclude, let’s apply a color border to the links to create a rollover effect.

#image a:hover {
            border: 1px solid #C4DFF0; 
}

By using an unordered list you learned how to use the positioning technique to create a pure CSS image map and remote rollover.

Image provided by fotolia.

Explore all the extras included with Server Intellect hosting solutions. That’s why I chose them. They are more than just a web hosting provider.