Create CSS pin balloons with ease
Home page of Africa Tour 2008, created by guys from Stylishmedia is a good example of how simple solutions can also be effective. In this tutorial I will recreate (in my own way) their effect using World map.
As I said, the effect is more than simple - each continent is marked with a "pin balloon" (I couldn't think of a better name) and when you hover the balloons they get larger. This is something that many of us have done many times, I'm sure of it. However, this example has a trick: balloons grow diagonally starting at the anchor point (anchor point is the little triangle that comes out of the balloon).
View live demo
So, we have three tasks:
- to anchor each balloon properly
- to position each balloon properly
- to add the hover effect
Anchoring and positioning
Each balloon will be a div with a background image, absolutely positioned inside the relatively positioned World map. This is the HTML structure that we need.
<div id="map">
<div id="america"></div>
<div id="europe"></div>
<div id="africa"></div>
<div id="asia"></div>
<div id="australia"></div>
<div id="southAmerica"></div>
</div>
And the css:
#map { width:669px; height:351px; background-image:url('map.jpg'); position:relative;}
#map div { width: 120px; height:60px; position:absolute; cursor:pointer; background-repeat:no-repeat;}
This part is simple. Each balloon will be 120x60px, absolutely positioned.
Now, let us examine the image below. We want to anchor the balloon to the center of the North America. That is in the position x = 150px, y = 120px. Simplest way to position an element is to set its top and left values. To do that, we have to subtract the width and height of the balloon image from the x and y of the anchor point. In case of North America, our positioning point will be x = 30px, y = 60 px.
But there is more. We want our anchor point to remain fixed while the balloon grows in the opposite direction. In order to achieve this we need to position the background image properly. Div named #america will have "background-position:right bottom" and that will assure that anchor point will not move.
#america { background-image:url('america_small.png'); top:60px; left:30px; background-position:right bottom;}
This allows us to simply show another image on hover:
#america:hover {background-image:url('america_big.png');}
Let us examine the next example: Africa's balloon is flipped horizontally in comparison to North America's balloon. This only means a different background image position.
The image will be positioned to the left and bottom:
#africa{background-image:url('africa_small.png'); top:160px; left:360px; background-position:left bottom;}
Other balloons can be anchored using the same approach. Now, let's see the full CSS code:
#map { width:669px; height:351px; background-image:url('map.jpg'); position:relative;}
#map div { width: 120px; height:60px; position:absolute; cursor:pointer; background-repeat:no-repeat;}
/* Right-anchored baloons */
#america { background-image:url('america_small.png'); top:60px; left:30px; background-position:right bottom;}
#america:hover {background-image:url('america_big.png');}
#europe{background-image:url('europe_small.png'); top:50px; left:240px; background-position:right bottom;}
#europe:hover {background-image:url('europe_big.png');}
#southAmerica{background-image:url('southamerica_small.png'); top:190px; left:110px; background-position:right bottom;}
#southAmerica:hover {background-image:url('southamerica_big.png');}
/* Left-anchored baloons */
#africa{background-image:url('africa_small.png'); top:160px; left:360px; background-position:left bottom;}
#africa:hover {background-image:url('africa_big.png');}
#asia{background-image:url('asia_small.png'); top:60px; left:480px; background-position:left bottom;}
#asia:hover {background-image:url('asia_big.png');}
#australia{background-image:url('australia_small.png'); top:200px; left:540px; background-position:left bottom;}
#australia:hover {background-image:url('australia_big.png');}
As I said at the beginning, effective doesn't always mean complicated. Now, where can this effect be used? Primarily on maps (world maps, region maps or city maps). You can use it to pinpoint any location, from town to your company's headquarters, for example. I can't see any other usage, can you?
More articles in
Blog archive or
elsewhere