Affichage d'un div au survol d'un lien
Résolu/Fermé
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
-
18 août 2008 à 12:22
dino - 16 août 2011 à 15:49
dino - 16 août 2011 à 15:49
A voir également:
- Affichage d'un div au survol d'un lien
- Créer un lien pour partager des photos - Guide
- Verifier un lien - Guide
- Lien url - Guide
- Renommer un lien hypertexte - Forum Réseaux sociaux
- J'ai cliqué sur un lien douteux android - Forum Virus
8 réponses
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
18 août 2008 à 13:45
18 août 2008 à 13:45
Salut,
"Soit un menu css avec sous et sous-sous-menu... " intoxiqué aux problèmes de maths ? xD
Je propose une solution javascript. Supposons que les div contenant les images soient masquées au chargement de la page ; au survol du lien, la div devient visible, puis lorsque le curseur n'est plus sur le lien, la div redevient invisible.
Voici un exemple :
Bon courage !
Pour des explications sur mon code, n'hésite pas à demander ;)
"Soit un menu css avec sous et sous-sous-menu... " intoxiqué aux problèmes de maths ? xD
Je propose une solution javascript. Supposons que les div contenant les images soient masquées au chargement de la page ; au survol du lien, la div devient visible, puis lorsque le curseur n'est plus sur le lien, la div redevient invisible.
Voici un exemple :
<html>
<head>
<title>test pijaku</title>
<script type="text/javascript"><!--
div = {
show: function(elem) {
document.getElementById(elem).style.visibility = 'visible';
},
hide: function(elem) {
document.getElementById(elem).style.visibility = 'hidden';
}
}
--></script>
<style type="text/css"><!--
div {visibility:hidden}
--></style>
</head>
<body>
<ul>
<li onMouseOver="div.show('div1')" onMouseOut="div.hide('div1')">lien 1</li>
<li onMouseOver="div.show('div2')" onMouseOut="div.hide('div2')">lien 2</li>
<li onMouseOver="div.show('div3')" onMouseOut="div.hide('div3')">lien 3</li>
</ul>
<div id="div1">
<img src="" alt="image 1" />
</div>
<div id="div2">
<img src="" alt="image 2" />
</div>
<div id="div3">
<img src="" alt="image 3" />
</div>
</body>
</html>
Bon courage !
Pour des explications sur mon code, n'hésite pas à demander ;)
Et supposons que le javascript soit désactivé ???
Vois donc ce lien il t'en apprendra beaucoup ....
css menu et texte en survol
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol
Vois donc ce lien il t'en apprendra beaucoup ....
css menu et texte en survol
http://css.alsacreations.com/Construction-de-menus-en-CSS/Un-menu-avec-commentaires-au-survol
Bonjour, je me permets de poser une question dans ce topic car j'utilise la fonction javascript donnée par Groarh ici mais j'ai un problème :
j'ai donc un div qui s'affiche au survol du lien et est caché ensuite. Le seul problème est que lors du chargement de la page, il est d'ores et déjà affiché et ce n'est qu'après avoir passé la souris sur le lien que le div se cache.
Comment faire pour qu'il ne s'affiche pas avant le survol du lien ?
merci de m'aider, j'ai pas réussi à trouver une solution qui s'intègre sur mon début de code.
j'ai donc un div qui s'affiche au survol du lien et est caché ensuite. Le seul problème est que lors du chargement de la page, il est d'ores et déjà affiché et ce n'est qu'après avoir passé la souris sur le lien que le div se cache.
Comment faire pour qu'il ne s'affiche pas avant le survol du lien ?
merci de m'aider, j'ai pas réussi à trouver une solution qui s'intègre sur mon début de code.
pijaku
Messages postés
12263
Date d'inscription
jeudi 15 mai 2008
Statut
Modérateur
Dernière intervention
4 janvier 2024
2 752
18 août 2008 à 14:52
18 août 2008 à 14:52
Superbe!!! Génial!!!
Merci beaucoup.
Merci beaucoup.
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Groarh
Messages postés
682
Date d'inscription
vendredi 1 août 2008
Statut
Membre
Dernière intervention
28 juin 2015
185
27 oct. 2008 à 14:40
27 oct. 2008 à 14:40
@css mania : tu comptes t'en sortir avec les pseudo-classes ? Là, il s'agit de faire apparaître un autre élément, et puisque tu as l'air de bien connaître le css tu dois savoir, je pense, que le css 2.1 ne permet pas de faire ça.
Ensuite, j'ai dit que je proposais une solution javascript, et cette solution a convenu à pikaju.
J'admets que j'aurais pu proposer une solution avec des gestionnaires d'évènements, mais c'est toujours plus long à expliquer.
Enfin, le topic est résolu depuis un mois et demi. J'ai vu pire en matière de déterrage de sujet, mais bon quand même... :)
Ensuite, j'ai dit que je proposais une solution javascript, et cette solution a convenu à pikaju.
J'admets que j'aurais pu proposer une solution avec des gestionnaires d'évènements, mais c'est toujours plus long à expliquer.
Enfin, le topic est résolu depuis un mois et demi. J'ai vu pire en matière de déterrage de sujet, mais bon quand même... :)
Utilisateur anonyme
20 nov. 2009 à 22:42
20 nov. 2009 à 22:42
desolé du deterage
mais je voulais quand meme remercier Groarh
ta solution fonction nickel chez moi
j'ai juste modifié un truc dans ton script
dans la deuxieme partie, je met ".display = 'none';" au lieu de ".visibility = 'hidden';"
comme sa le div disparait totalement quand on en a pas besoin
et pour Alphatrion
si tu n'a pas trouvé
il faut que tu indique dans le css, sur la class de ton div "display:none" ou "visibility:hidden"
++
mais je voulais quand meme remercier Groarh
ta solution fonction nickel chez moi
j'ai juste modifié un truc dans ton script
dans la deuxieme partie, je met ".display = 'none';" au lieu de ".visibility = 'hidden';"
comme sa le div disparait totalement quand on en a pas besoin
et pour Alphatrion
si tu n'a pas trouvé
il faut que tu indique dans le css, sur la class de ton div "display:none" ou "visibility:hidden"
++
Je déterre le sujet mais vous savez comment superposer les div? Pour éviter qu'elles soient les unes sous les autres?
Merci
Merci
Bonjour!
Qui peux m'aider ????
Voilà, j'ai bâti mon propre site et j'ai changer l'image du curseur
Seulement ...le curseur passe derrière mes images plutôt que devant.!!!!
On le vois passé sur ma bannière et après !!! ..... pu rien !!!
Que dois-je changer dans le script....aidez moi SVP.
Je suis novice
Voici mon site! => http://chatterie-hello-kitty.e-monsite.com/
Qui peux m'aider ????
Voilà, j'ai bâti mon propre site et j'ai changer l'image du curseur
Seulement ...le curseur passe derrière mes images plutôt que devant.!!!!
On le vois passé sur ma bannière et après !!! ..... pu rien !!!
Que dois-je changer dans le script....aidez moi SVP.
Je suis novice
Voici mon site! => http://chatterie-hello-kitty.e-monsite.com/
9 févr. 2009 à 15:01
l'explication que tu as donné m'aide un peu beaucoup dans mes recherches mais la chose que je n'arrive pas c'est que je voudrais que l'image différente qui apparait a chaque survol se trouve au même endroit.Or avec cette methode elle se situe les une en dessous des autres!!
y aurai t-il une astuce que je n'ai pas compris?
je te remercies
ansofette
14 janv. 2010 à 19:47
je cherche à garder cette page: https://www.118712.fr/sortir.html
sauf que je voudrais que mes div masquées apparaissent au survol de la souris au lieu d'avoir à cliquer sur les boutons.
Quand je rentre ton code, si je garde cette partie la :
<style type="text/css"><!--
div {visibility:hidden}
--></style>
plus aucune div ne reste. Si je l'enlève, tout s'affiche à l'ouverture de la page.
T'aurai pas une solution pour définir les div que l'on veut masquer afin que les autres ne bougent pas ?
merci beaucoup
14 janv. 2010 à 20:01
je suis pas sûr de comprendre le problème, mais je crois qu'il te suffira d'attribuer une class aux div qui doivent apparaitre qu'après passage de souris (genre <div class="popup">) et dans ton css tu mets :
.popup {visibility:hidden}
22 mars 2011 à 21:09
signé: un pov débutant
16 août 2011 à 15:49