HTML
Jala
-
telliak Messages postés 3668 Date d'inscription Statut Membre Dernière intervention -
telliak Messages postés 3668 Date d'inscription Statut Membre Dernière intervention -
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
A voir également:
- HTML
- Editeur html - Télécharger - HTML
- Espace html ✓ - Forum HTML
- [**] Balise pour un espace vide en hml. Merci ✓ - Forum Webmastering
- /Var/www/html/index.html ✓ - Forum Linux / Unix
- Html download - Télécharger - HTML
2 réponses
Bonjour,
Mets le title dans les attributs du lien :
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>
Bonsoir,
Chez moi,
fonctionne très bien avec Firefox, mais l'image déborde évidemment...
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...
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)
C'était une étourderie...
C'est rectifié mais ça ne fonctionne toujours pas.
Merci encore pour ces réponses.