HTML
Bonjour
Je me permets de vous solliciter pour une aide sur de la programmation HTML...
J'ai une image que voici :
https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg
Je souhaiterai créer 3 zones cliquables différentes au niveau des noms en bas de l'image (Tabasco, Habanero & Jalapeno). Jusque là, ça va... Mais je souhaiterai également que lorsque on passe la souris sur chacune des zones, une infobulle (différente à chaque fois) apparaisse (ex: "TA", "HA", "JA").
Voici ce que j'ai tenté, en vain...
<img src="https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg" usemap="#map" /><map name="mymap"><area shape="rect" coords="373,874,741,1031" title="TA" href="https://fr.wikipedia.org/wiki/Tabasco_(sauce)" target="_blank">
<area shape="rect" coords="805,981,1237,1050" title="HA" href="https://fr.wikipedia.org/wiki/Piment_habanero" target="_blank">
<area shape="rect" coords="1330,891,1693,949" title="JA" alt="" href="https://fr.wikipedia.org/wiki/Piment_jalape%C3%B1o" target="_blank"></map>
Pourriez-vous SVP m'indiquer où le bas blesse ? J'ai cherché sur des tas de forums mais sans résultats...
L'image a pour but d'être éditée sur une page de géocaching (https://www.geocaching.com)
Merci de m'avoir lu
Jala
Je me permets de vous solliciter pour une aide sur de la programmation HTML...
J'ai une image que voici :
https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg
Je souhaiterai créer 3 zones cliquables différentes au niveau des noms en bas de l'image (Tabasco, Habanero & Jalapeno). Jusque là, ça va... Mais je souhaiterai également que lorsque on passe la souris sur chacune des zones, une infobulle (différente à chaque fois) apparaisse (ex: "TA", "HA", "JA").
Voici ce que j'ai tenté, en vain...
<img src="https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg" usemap="#map" /><map name="mymap"><area shape="rect" coords="373,874,741,1031" title="TA" href="https://fr.wikipedia.org/wiki/Tabasco_(sauce)" target="_blank">
<area shape="rect" coords="805,981,1237,1050" title="HA" href="https://fr.wikipedia.org/wiki/Piment_habanero" target="_blank">
<area shape="rect" coords="1330,891,1693,949" title="JA" alt="" href="https://fr.wikipedia.org/wiki/Piment_jalape%C3%B1o" target="_blank"></map>
Pourriez-vous SVP m'indiquer où le bas blesse ? J'ai cherché sur des tas de forums mais sans résultats...
L'image a pour but d'être éditée sur une page de géocaching (https://www.geocaching.com)
Merci de m'avoir lu
Jala
2 réponses
-
ContributeurBonjour,
Mets le title dans les attributs du lien :
<img src="https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg" usemap="#map" /><map name="mymap"><area shape="rect" coords="373,874,741,1031" href="https://fr.wikipedia.org/wiki/Tabasco_(sauce)" target="_blank" title="TA"> <area shape="rect" coords="805,981,1237,1050" href="https://fr.wikipedia.org/wiki/Piment_habanero" target="_blank" title="HA"> <area shape="rect" coords="1330,891,1693,949" alt="" href="https://fr.wikipedia.org/wiki/Piment_jalape%C3%B1o" target="_blank" title="JA"></map>
-
Merci beaucoup pour cette réponse très rapide !!!
Malheureusement, cela ne fonctionne pas quelque soit la position de l'attribut "title"...
L'infobulle n’apparaît que lorsque je retire la "map" et que donc il n'y a plus de zones cliquables mais un seul lien dans l'image complète. Dès que j'introduis une carte, les zones cliquables ne présentent pas d'infobulle. (grrrrrr) -
Contributeur@JalaJe ne sais pas si c'est la cause, mais il y a une erreur dans ton code, tu mets usemap="#map" dans les attributs de l'image et tu mets name="mymap" comme nom. Il faudrait mettre usemap="#mymap" dans les attributs de l'image.
-
-
Contributeur@JalaMalheureusement, je n'ai pas d'autre solution à ton problème.
-
-
Bonsoir,
Chez moi,<!DOCTYPE> <html> <body> Version 1.0 <img src="https://s3.amazonaws.com/gs-geo-images/9f07ef11-ee09-400f-91fb-15a5631a86c3.jpg" usemap="#mymap" /> <map name="mymap"> <area shape="rect" coords="373,874,741,1031" href="https://fr.wikipedia.org/wiki/Tabasco_(sauce)" target="_blank" title="TA"> <area shape="rect" coords="805,981,1237,1050" href="https://fr.wikipedia.org/wiki/Piment_habanero" target="_blank" title="HA"> <area shape="rect" coords="1330,891,1693,949" alt="" href="https://fr.wikipedia.org/wiki/Piment_jalape%C3%B1o" target="_blank" title="JA"> </map> </body> </html>
fonctionne très bien avec Firefox, mais l'image déborde évidemment...
