Créer une bulle dans une carte

Bonjour,

est-il possible de créer des bulles explicatives de ce type avec le css :
http://img198.imageshack.us/img198/8507/bullesannuaire.jpg

J'ai créé des bulles avec un script mais cela ne fonctionne pas avec Firefox
uniquement avec iE

<AREA SHAPE="POLY" COORDS="18,142,76,132,48,192,30,193,20,181" HREF="AdressesClubs/Finistere.htm" onmouseover="bulle('FINISTÈRE')"onmouseout="abulle()" title="Finistère">
--------

voila le lien vers la page en question : http://gemopa.free.fr/carte_france.html

Merci d'avance pour vos suggetions
Modifié par gemopa (15 May 2009 - 09:32)

Pas possible de le faire en CSS : d'ailleurs sur mon navigateur, les bulles n'apparaissent pas de la sorte, mais ce sont simplement des infobulles (dans <a title="Finistère" ..>).

Le site que tu donnes utilise des javascript pour faire une bulle de la sorte.

Si c'est possible, avec des divs cachés et qui s'affichent en hover.

Le javascript te permettra bien plus, mais c'est des gadgets après...

C'est effectivement possible en utilisant "hover". Bien sûr celà pose quelques problèmes, qui dépendent de la façon de l'implémenter.

Sur Web Designer Wall, un article récent donne quelques exemples plutôt sympas.

Un autre article sur un autre site présente une solution de type "image-map" qui se rapproche peut-être plus de ce que souhaite obtenir gemopa, je ne sais pas.

Quant à implémenter ce genre de solution, ça peut être sympa et/ou intéressant, mais il faut faire attention à certains points...

* Pour un "simple" hover en CSS, ne pas oublier que IE6 ne supporte le hover que sur les liens. Ce n'est pas toujours une "bonne solution" et on se retrouve vite avec des liens qui ne vont nulle part. Pour un menu c'est bien, pour légender une photo ça l'est moins.

* Javascript permet d'obtenir des choses plus intéressantes encore, mais c'est -forcément- moins accessible car un certain nombre de visiteurs le désactivent.

* Comment masquer au mieux le texte à cacher/montrer ? Question accessibilité, je n'ai pas encore trouvé la solution miracle A ce sujet, lire cet article d'Alsa.

Bon, maintenant, si c'est pour afficher "Finistère" au-dessus d'une carte où "Finistère" est déjà écrit, l'intérêt me semble limité

Merci à tous pour vos réponses

mistike a écrit :

Bon, maintenant, si c'est pour afficher "Finistère" au-dessus d'une carte où "Finistère" est déjà écrit, l'intérêt me semble limité

Oui mais le nom des départements est tellement petit sur la carte que je trouvais plus sympa pour les visiteurs de rajouter cette bulle car en navigant sur la carte tu vois tout de suite quel département est concerné.

En ce qui concerne la bulle avec «title="Finistère"» c'est pareil c'est trop petit et pour l'instant je l'ai laissé vu que Firefox n'accepte pas mon script mais juste cette bulle.

Je vais essayer de voir avec tout ce que vous m'avez donné.

Merci encore et bon week-end à tous.

Asahi a écrit :
Pas possible de le faire en CSS : d'ailleurs sur mon navigateur, les bulles n'apparaissent pas de la sorte, mais ce sont simplement des infobulles (dans <a title="Finistère" ..>).

Le site que tu donnes utilise des javascript pour faire une bulle de la sorte.

Bien sur c'est un script mais qui ne fonctionne pas avec «Firefox»
le site en question c'est le mien

voilà le code:

chaine=""
+"<div id='text' style='position:absolute;left:4px;top:80px;width:1px;height:1px;'></div>"
+"<Layer name='text' left='4' top='80' width='100' height='16'></Layer>"
document.write(chaine);

bname=navigator.appName;var Xpos=0;var Ypos=0;bversion=parseInt(navigator.appVersion);

if (bname=="Firefox"){brows=true}
else{brows=false}

if (bname=="Netscape"){brows=true}
else{brows=false}

if(brows){
 document.captureEvents(Event.MOUSEMOVE);
 function MouveA(evnt) {
  Xpos = evnt.pageX;
  Ypos = evnt.pageY;
 }
 document.onMouseMove = MouveA;}
else {
 function MouveB() {
  Xpos = event.clientX;
  Ypos = event.clientY;
 }
 document.onmousemove = MouveB;
}

function gbulle() {
 var cx;var cy;
 cx=Xpos+16;cy=Ypos-16;
 if (brows) {document.text.left=cx;document.text.top=cy;}
 else {document.all.text.style.left=cx;document.all.text.style.top=cy;}
 setTimeout("gbulle()",15);
}

function bulle(texte){
if (brows){document.layers['text'].document.writeln('<table BORDER=3 BGCOLOR="#CC0000" BORDERCOLOR="#0000FF" BORDERCOLORDARK="#0000FF"cellpadding="2"><tr><td bgcolor=#0000FF><font color=#FFFF00 size=2 face=Arial><strong><\strong><NOBR>'+texte+'</NOBR></font></TD></TR></TABLE>');
document.layers['text'].document.close();}
else{text.innerHTML='<table BORDER=3 BGCOLOR="#CC0000" BORDERCOLOR="#FFD000" BORDERCOLORDARK="#FF8F00"cellpadding="2"><tr><td bgcolor=#0000FF><font color=#FFFF00 size=2 face=Arial><strong><\strong><NOBR>'+texte+'</NOBR></font></TD></TR></TABLE>'}
}
function abulle(){
if (brows){document.layers['text'].document.writeln('');document.layers['text'].document.close();}
else{text.innerHTML=''}
}

gbulle();

Très franchement, si tes "zones" sont des liens, alors un bête hover stylé me semble vraiment plus simple !

Si je peux me permettre une remarque ? Je trouve ta carte un peu chargée... Une carte plus "simple" (peut-être sans les noms des régions ?), voire encore plus simple et colorisée de façon à mettre en valeur les départements pour lesquels il y a effectivement des clubs déclarés ? Non ?

mistike a écrit :
Très franchement, si tes "zones" sont des liens, alors un bête hover stylé me semble vraiment plus simple !

Ok je vais voir cela

mistike a écrit :

Si je peux me permettre une remarque ? Je trouve ta carte un peu chargée... Une carte plus "simple" (peut-être sans les noms des régions ?), voire encore plus simple et colorisée de façon à mettre en valeur les départements pour lesquels il y a effectivement des clubs déclarés ? Non ?

Oui tu as probablement raison, cette carte je l'avais trouvé sur le net et certaines personnes tenaient à voir les régions alors je m'étais décidé pour celle-là et c'est aussi pour cette raison que j'ai rajouté les bulles question visibilité

Bonjour gemopa,

je te propose de regarder attentivement ce tutoriel qui te propose de modifier l'apparence d'une infobulle.

Cela peut s'avérer utile dans ton cas.