Afficher un texte "onmouseover"
Résolu
stiopka
Messages postés
609
Statut
Membre
-
stiopka Messages postés 609 Statut Membre -
stiopka Messages postés 609 Statut Membre -
Bonjour,
Qui pourrait m'apprendre comment faire apparaître un texte lorsque le pointeur se place à une position précise d'une image? Juste un texte, pas de lien, et qui disparaît quand le pointeur n'est plus dans la zone définie?
Merci
Qui pourrait m'apprendre comment faire apparaître un texte lorsque le pointeur se place à une position précise d'une image? Juste un texte, pas de lien, et qui disparaît quand le pointeur n'est plus dans la zone définie?
Merci
A voir également:
- Onmouseover text
- Sms to text - Télécharger - Sauvegarde
- Text wrangler - Télécharger - Traitement de texte
- Atom text editor - Télécharger - Édition & Programmation
- Any text searcher - Télécharger - Gestion de fichiers
- Text spinner français - Télécharger - Outils professionnels
2 réponses
Salut,
Au moins deux solutions possibles :
1- Si les différentes positions de ton image sont des zones rectangulaires, tu peux découper ton image selon ces zones afin de les afficher dans des éléments html différents. Il suffira alors d'ajouter un attribut title sur ces éléments html pour faire apparaitre le texte.
Exemple avec une image affichée dans deux div : https://jsfiddle.net/d3b2ehm5/1/
2- Si les positions de ton images ne sont pas rectangulaires, tu peux utiliser les éléments html map et area afin de définir les zones sur lesquelles le texte apparaitra. Tu pourras alors utiliser l'attribut title sur ces zones pour afficher le texte au passage de la souris.
Exemple : https://www.w3schools.com/TAGS/tag_area.asp
Bonne journée,
Au moins deux solutions possibles :
1- Si les différentes positions de ton image sont des zones rectangulaires, tu peux découper ton image selon ces zones afin de les afficher dans des éléments html différents. Il suffira alors d'ajouter un attribut title sur ces éléments html pour faire apparaitre le texte.
Exemple avec une image affichée dans deux div : https://jsfiddle.net/d3b2ehm5/1/
2- Si les positions de ton images ne sont pas rectangulaires, tu peux utiliser les éléments html map et area afin de définir les zones sur lesquelles le texte apparaitra. Tu pourras alors utiliser l'attribut title sur ces zones pour afficher le texte au passage de la souris.
Exemple : https://www.w3schools.com/TAGS/tag_area.asp
Bonne journée,
et pour modifier un texte dans la page vous pouvez utilisez innerHTML avec Javascript.
Au passage lplutôt que onMouseOver vous pouvez utiliser un listener object(écouteur d'objet) ce qui sera bien plus propre et efficace car permet de séparer le javascript du HTML:
http://www.w3schools.com/jsref/met_element_addeventlistener.asp