jQuery: image map tutorial

Building an image map is an easy task with jQuery, because jQuery works together with CSS, which is a great aid in this case. In this tutorial I'm going to show you how to create a simple image map with jQuery and CSS. As you will see, nothing is impossible in web development: it just takes longer.

The map

Our map is a 400 x 400 pixels wide image which depicts the Abruzzo region in Italy. The map has a marker that will later show a balloon tip with more information. Here's the map:

What we have to do is:

1. position a link element just over the marker
2. position and hide the balloon tip just near the marker

This can be easily accomplished with CSS.

The CSS styles

We need to use contextual positioning to exactly position our elements. But how we can get the coordinates of the marker? You can do this by opening the image map with an image editor and then you can track down your coordinates using the appropriate tools.

In our case, however, we have to work with the following markup:

<div id="map">

 <img src="abruzzo-map.png" alt="Abruzzo's map" />
 
 <p id="active"><a href="#">Open</a></p>
 
 <div class="tooltip">Vasto, Abruzzo, Italy</div>

</div>

Our initial CSS styles will be the following:

#map {
 width: 600px;
 margin: 0 auto;
 position: relative;
}

#map img {
 display: block;
 width: 400px;
 height: 400px;
}

We've specified position: relative to contextually position the marker and the tooltip just inside our map area. Here are the styles for the marker:

#map #active {
 width: 20px;
 height: 20px;
 margin: 0;
 position: absolute;
 top: 189px;
 right: 221px;
}
#map #active a {
 display: block;
 width: 100%;
 height: 100%;
 text-indent: -1000em;
}

The dimensions of the marker are proportional to the dimensions of the circle marker on the map. To position it, I've first used a red border to see where this element actually appears on the page. Then, when I was sure that the link was just over the circle marker, I've removed the border.

Our balloon tooltip, instead, has the following styles:

#map div.tooltip {
 font: bold small Arial, sans-serif;
 color: #fff;
 width: 200px;
 height: 100px;
 background: url(balloon.png) no-repeat;
 line-height: 85px;
 text-align: center;
 text-transform: uppercase;
 position: absolute;
 top: 138px;
 right: 50px;
 display: none;
 cursor: pointer;
}

The tooltip will cover the circle marker when revealed.

The jQuery code

Our jQuery code must only perform two tasks:

1. show the tooltip when the circle marker is clicked
2. hide the tooltip when a user clicks on it

$(document).ready(function() {

  $('#active a:first-child').click(function(e) {
  
    $('div.tooltip').fadeIn(1000);
  
    e.preventDefault();
  
  });
  
  $('div.tooltip').click(function() {
  
    $(this).fadeOut(1000);
  
  
  });

});

You can see the demo below.

Demo

Live demo