Infobulle image avec liens mouse over
sangnom
Messages postés
7
Statut
Membre
-
sangnom Messages postés 7 Statut Membre -
sangnom Messages postés 7 Statut Membre -
Bonjour,
L'architecture de mon site est quasi terminée (grâce à ce forum entre autre donc merci à tous ceux qui m'ont aidé jusqu'ici). Mais il me reste un petit challenge à relever.
J'ai besoin : d'une div qui affiche des images différentes en fonction du lien sur lequel la souris pointe(mouse over). Ces liens se trouvent dans une autre div overflow.
J'ai pensé aux infobulles, j'ai essayé ce script :
http://blog.damienalexandre.fr/index.php?post/2005/09/24/40-info-bulle-javascript
mais il ne convient pas du tout pour ce que je veux faire.
Pensez vous que ce que je veux faire est possible en XHTML/CSS/JS ou est ce peine perdue.
Encore merci à tous les gens qui aident aussi spontanément.
L'architecture de mon site est quasi terminée (grâce à ce forum entre autre donc merci à tous ceux qui m'ont aidé jusqu'ici). Mais il me reste un petit challenge à relever.
J'ai besoin : d'une div qui affiche des images différentes en fonction du lien sur lequel la souris pointe(mouse over). Ces liens se trouvent dans une autre div overflow.
J'ai pensé aux infobulles, j'ai essayé ce script :
http://blog.damienalexandre.fr/index.php?post/2005/09/24/40-info-bulle-javascript
mais il ne convient pas du tout pour ce que je veux faire.
Pensez vous que ce que je veux faire est possible en XHTML/CSS/JS ou est ce peine perdue.
Encore merci à tous les gens qui aident aussi spontanément.
A voir également:
- Infobulle image avec liens mouse over
- Partager des photos avec un lien - Guide
- Image iso - Guide
- Start pxe over ipv4 - Forum Windows 10
- Reduire taille image - Guide
- Move mouse - Télécharger - Utilitaires
2 réponses
tu mets, dans ta 1ère div (celle ou tu veux afficher les images) une balise img vide, en lui définissant un id :
<img id='id_image'/>
pour les liens de ta 2nde div (celle qui contient les liens donc ^^) tu fais quelquechose comme :
<a href='.......' onmouseover="document.getElementById('id_image').src='le_de_l_image_a_afficher'" onmouseout='document.getElementById("id_image").src=""'></a>
après, tu peux jouer avec la visibilité du div qui contient l'image, ainsi que son z-index, qui définit sa position "vers l'avant", c'est à dire que plus le z-index est grand, plus le div sera au premier plan
<img id='id_image'/>
pour les liens de ta 2nde div (celle qui contient les liens donc ^^) tu fais quelquechose comme :
<a href='.......' onmouseover="document.getElementById('id_image').src='le_de_l_image_a_afficher'" onmouseout='document.getElementById("id_image").src=""'></a>
après, tu peux jouer avec la visibilité du div qui contient l'image, ainsi que son z-index, qui définit sa position "vers l'avant", c'est à dire que plus le z-index est grand, plus le div sera au premier plan
