Rodrigue Hunel

Cet article est la traduction de Create CSS pin balloons with ease de Janko Jovanovic. Au cours de cet article nous verrons une méthode pour créer uniquement avec du code CSS et (X)HTML des étiquettes ayant la forme de bulles d'information.

Introduction

La page d'accueil du site de l'Africa Tour 2008, créée par les mecs de Stylishmedia est un bon exemple montrant comment mettre en place facilement ce genre de procédé. Dans ce tutoriel, je tenterai de reproduire (par mes propres moyens) l'effet qu'utilise la carte présentée ci-dessous.

Comme je l'ai dit, l'effet est très simple puisque chaque continent est, par défaut, marqué par une étiquette en forme de bulle (je suis dans l'incapacité de donner un nom plus explicite) et à son survol elle s'agrandit. C'est le genre de choses que nous avons dû réaliser assez souvent, j'en suis sûr. Cependant, cet exemple a une astuce : la bulle grandira diagonalement en partant de son point d'ancrage (le point d'ancrage est représenté par le petit triangle placé à l'extrémité de la bulle).

Voici une petite démonstration en ligne.

Nous avons trois tâches bien distinctes

• Ancrer proprement chaque bulle ;
• Positionner proprement chaque bulle ;
• Ajouter l'effet au survol.

Ancrage et positionnement

Chaque bulle doit être représentée par une division (<div>), ayant une image en guise d'arrière-plan, positionnée de manière absolue (position: absolute) sur la carte du monde positionnée quant à elle de manière relative (position:relative).

Voici la structure HTML à utiliser

<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>

Et le code CSS associé

#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;  
} 

Cette partie est très simple. Chacune des bulles doit avoir une position absolue et avoir des dimensions égales à 120px par 60px.

Maintenant, regardons l'image ci-dessous. Nous souhaitons ancrer la bulle au centre de l'Amérique du Nord à la position x = 150px et y = 120px. La méthode la plus simple pour positionner un élément est de fixer la valeur CSS du top et left qui lui sont associés. Pour ce faire, nous devons soustraire la largeur et la hauteur de l'image représentant la bulle à la valeur de l'abscisse x et de l'ordonnée y du point d'ancrage. Dans notre cas, la position de notre point est x = 30px et y = 60px.

Mais ce n'est pas tout. Nous voulons que notre point d'ancrage reste inchangé pendant que la bulle s'élargira dans la direction opposée. Afin d'y parvenir, nous devons positionner l'image de fond correctement. La balise <div> identifiable par #america devra avoir la propriété CSS background-position: right bottom qui nous assurera que le point d'ancrage ne bougera pas.

#america {  
    background-image:url('america_small.png');  
    top:60px;  
    left:30px;  
    background-position:right bottom;  
} 

Le code qui suit nous permettra d'afficher aisément une autre image au survol :

#america:hover { background-image:url('america_big.png'); }

Regardons l'exemple suivant : la bulle associée à l'Afrique est symétrique (symétrie axiale) à celle de l'Amérique du Nord. Cela signifie que la position de l'image de fond sera différente.

L'image sera positionnée en bas et à gauche :

#africa {  
    background-image:url('africa_small.png');  
    top:160px;  
    left:360px;  
    background-position:left bottom;  
}

Les autres bulles peuvent être placées en utilisant la même méthode.

Voici le code CSS final

#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;  
}  
/* Bulles d'information fixées à droite */  
#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');  
}  
/* Bulles d'information fixées à gauche */  
#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');  
}  

Comme je l'ai dit au début, ce n'était pas si compliqué. Maintenant, où pouvons-nous utiliser cet effet ? Premièrement sur les cartes (cartes du monde, des régions ou des villes). Vous pouvez l'utiliser pour indiquer n'importe quel endroit, la localisation du siège de votre entreprise, par exemple. Je ne vois pas d'autres possibilités, et vous ?

Dernière mise à jour : 28 févr. 2011 à 02:14