[PB] Image Mappée + InfoBulle

Sujet résolu

24 juillet 2009 à 12:07:19

Bonjour aux forumeurs du site du zér0.
Je vais être rapide et le plus clair possible.

J'ai fais une petite image composée d'un rectangle rouge, d'un cercle jaune et d'un polygone vert. Avec DreamWeaver CS4, j'ai ouvert une page internet vierge et ai incrusté cette image dans la page. J'ai dessinée les régions des trois formes géométriques.

Maintenant, je voudrais que lorsque le pointeur de la souris passe sur ces régions, une infobulle m'affiche par exemple : "rectangle rouge". C'est cette infobulle qui me pose soucis. Tout marche, le pointeur sur le cercle jaune m'affiche le texte "Cercle jaune" ainsi de suite mais quand je passe le pointeur sur le bout de phrase en dessous de l'image, l'infobulle "rectangle rouge" apparaît. Bizzare pourtant j'ai bien mis que le texte doit s'afficher dans le rectangle rouge... Une aide ?

Voici mon code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<script src="SpryAssets/SpryTooltip.js" type="text/javascript"></script>
<link href="SpryAssets/SpryTooltip.css" rel="stylesheet" type="text/css" />
<style type="text/css">

</style>
</head>

<body>
<p><img src="alta.PNG" alt="" width="605" height="440" border="0" usemap="#ma_map" id="sprytrigger5"/>
<map name="ma_map" id="sprytrigger1">
<area shape="circle" coords="445,128,93" href="#" />
<map id="sprytrigger2">
<area shape="rect" coords="78,108,218,331" href="#" />
<map id="sprytrigger3">
<area shape="poly" coords="416,275,479,314,489,358,421,391,289,384" href="#" />
</map>
</p>
<hr />
<p class="b">Vérifie tes couleurs !</p>
<div class="tooltipContent" id="sprytooltip2">Rectangle rouge</div>
<div class="tooltipContent" id="sprytooltip1">Cercle jaune</div>
<div class="tooltipContent" id="sprytooltip3">Polygone vert</div>
<script type="text/javascript">

</script>
</body>
</html>

Peut-être avez-vous remarquez que DreamWeaver utilise la "technologie" SPRY. Moi si vous me donnez autre chose je m'en fout tant que ça marche

Golmote

24 juillet 2009 à 12:17:28

Pourquoi utilises-tu 3 maps ? o_O

Pourquoi tes maps ont-elles les mêmes id que tes divs.
Un id doit toujours être unique !

XavMipe

24 juillet 2009 à 12:26:40

J'ai trois formes géométriques donc j'ai mis <map id="sprytriggerX"> à chacune d'elles.
Après je peux faire ceci mais où je vais mettre mes id de formes ? :

<map name="ma_map" id="sprytrigger1">
<area shape="circle" coords="445,128,93" href="#" />
<area shape="rect" coords="78,108,218,331" href="#" />
<area shape="poly" coords="416,275,479,314,489,358,421,391,289,384" href="#" />
</map>

Golmote

24 juillet 2009 à 12:28:18

EDIT : euh non, oublie, j'ai rien dit... je raconte n'importe quoi... :-°

Si tu gardes tes trois maps, ne faudrait-il pas que tu refermes les deux premières ? Je sais pas si ça peut résoudre le problème...

XavMipe

24 juillet 2009 à 12:38:33

Citation

Si tu gardes tes trois maps, ne faudrait-il pas que tu refermes les deux premières ? Je sais pas si ça peut résoudre le problème...

Bien essayé mais non... il m'affiche seulement ma première map qui est le cercle jaune.

Golmote

24 juillet 2009 à 12:40:32

Ah oui exact, bon bah mon idée de départ était bonne, il te faut une seule map.
Et tu mets les id sur les area.

<map name="ma_map">
<area shape="circle" coords="445,128,93" href="#" id="sprytrigger1" />
<area shape="rect" coords="78,108,218,331" href="#" id="sprytrigger2" />
<area shape="poly" coords="416,275,479,314,489,358,421,391,289,384" href="#" id="sprytrigger3" />
</map>

XavMipe

24 juillet 2009 à 12:47:20

Ohhh génial !! Ca marche impeccable. Merci Golmote !

Juste une dernière question. Pour ne pas finir idiot ce soir et pour que tu ne m'es pas haché le travail, peux-tu m'expliquer pourquoi mon code ne marchait pas ?

Merci encore, je marque le topic résolu ! Un grand merci !

Golmote

24 juillet 2009 à 13:35:05

Bah tu avais mis 3 maps... mais pas fermée...

et seule la première map avait le name="ma_map" qui indiquait à l'image qu'il fallait l'utiliser...

Bref. Il te fallait une seule map. A partir de là, il est plutôt logique que les id soient à placer sur les area

XavMipe

24 juillet 2009 à 16:30:51

En y réfléchissant bien c'est vrai... Peut-être que le nez dans le code ma aveuglé ? :-°