HTML

Fermé

Jala - 28 mai 2016 à 17:05
telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 - 31 mai 2016 à 15:22

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

A voir également:

HTML
Editeur html - Télécharger - HTML
Html download - Télécharger - HTML
/Var/www/html/index.html ✓ - Forum Linux / Unix
&Nbsp html ✓ - Forum Webmastering
[HTML] -   á et les autres - Forum HTML

2 réponses

Réponse 1 / 2

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451
28 mai 2016 à 17:16

Bonjour,

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>

Jala
28 mai 2016 à 17:39

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)

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > Jala
28 mai 2016 à 17:56

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

Jala
28 mai 2016 à 18:00

Oups merci !
C'était une étourderie...
C'est rectifié mais ça ne fonctionne toujours pas.
Merci encore pour ces réponses.

dugenou Messages postés 6087 Date d'inscription mercredi 19 janvier 2005 Statut Contributeur Dernière intervention 30 juillet 2021 1 451 > Jala
28 mai 2016 à 18:10

Malheureusement, je n'ai pas d'autre solution à ton problème.

Réponse 2 / 2

telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
Modifié par telliak le 28/05/2016 à 22:55

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

Jala
31 mai 2016 à 07:01

Merci Telliak
Malheureusement, cela ne fonctionne toujours pas... Je pense donc que la page sur laquelle j'essaie de mettre cette image (geocaching) ne le permet pas ou ne peux pas interpréter certaines balises...

telliak Messages postés 3655 Date d'inscription mercredi 20 septembre 2006 Statut Membre Dernière intervention 27 mars 2024 875
31 mai 2016 à 15:22

Effectivement, cela peut provenir du contexte, mais là pour t'aider... il faudrait la page entière. Est-elle accessible ?

Discussions similaires

&nbsp ; Quelle Fonction ?

Espace en HTML

la balise ou

Image cliquable dans html

ou ou

Discussions similaires

Newsletters