Effet de survol
Résolu
troubadour2
Messages postés
284
Statut
Membre
-
troubadour2 Messages postés 284 Statut Membre -
troubadour2 Messages postés 284 Statut Membre -
Bonjour,
Je viens de créer un menu avec photoshop (4 liens) j'ai utilisé l'outil tranche pour la découpe et je n'arrive pas à comprendre comment on fait pour avoir l'effet hover lorsqu'on survol un lien.
Malgrès les tutos je ne comprend pas, pouvez-vous m'aider il y a trop longtemps que je galère.
Merci beaucoup pour votre aide.
Je viens de créer un menu avec photoshop (4 liens) j'ai utilisé l'outil tranche pour la découpe et je n'arrive pas à comprendre comment on fait pour avoir l'effet hover lorsqu'on survol un lien.
Malgrès les tutos je ne comprend pas, pouvez-vous m'aider il y a trop longtemps que je galère.
Merci beaucoup pour votre aide.
13 réponses
-
Bonjour,
Avec la CSS par exemple :
<head>
...
<style>
#menu1 {background:url(images/image1.png)}
#menu1:hover {background:url(images/image2.png)}
</style>
</head>
<body>
...
<div id="menu1"></div>
...
</body>
-
Bonjour
Merci de votre réponse.
Malheureusement je ne comprend pas pourtant cela doit être simple.
En fait mon menu c'est une image créé avec photoshop donc pour afficher le menu je fait:
<img src"mon_image.png" alt="" title="">
je ne vois pas comme je fait pour le hover même en créant une deuxième image.
Merci encore de votre aide. -
n'affiche pas ton image avec la balise img mais dans un div où l'image est appelé par le css du style:
ton html:<div id="ton-menu"> <div id="item1"> </div> <div id="item2"> </div> <div id="item3"> </div> <div id="item4"> </div> </div>
ton css:#item1{ background-image: url(images/image1.png); } #item1:hover{ background-image: url(images/image1survol.png); } #item2{ background-image: url(images/image2.png); } #item2:hover{ background-image: url(images/image2survol.png); } etc... -
si j'ai bien compris il faut que je fasse le menu en dur?
mais alors à quoi sert l'image?
je sais ma question peut-être bête.
Merci de votre aide -
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question -
Salut,
Je critique pas du tout la solution proposée, mais je t'en indique une autre, en gros tu as
<img src="1.jpg"/>
et tu veux mettre la 2.jpg au survol, tu remplaces donc par
<img src="1.jpg" onmouseover='this.src="2.jpg'' onmouseout='this.src="1.jpg"'/>
si ça marche pas, mets genre 2.jpg;'" au lieu de 2.jpg'"
-
Bonjour
Je vais essayer ta solution de suite elle me parait plus simple pour mes compétences.
Merci -
C'est re-moi
Merci pour ton aide cela fonctionne parfaitement bien.
Je te remercie. -
Bonjour
Super ton site c'est une merveille moi je débute seulement.
Pour mon menu c'est génial ça fonctionne.
Dis moi tu connait les sprites CSS.
Voilà je veux essayer le fonctionnement j'ai réussi à faire un petit menu avec les sprites mais je n'arrive pas à réduire mon menu c'est à dire le mettre en pourcentage.
J'ai 4 liens correspondant à 1 seule image 1800px X 160px
Je voudrais la réduire mais ça ne veux pas fonctionner.
Merci de ton aide si toute fois tu peux me dire si tu sais comment résoudre ça.
Merci-
Oui, les sprites c'est la nouvelle méthode pour faire ce que je t'ai dit, mais sans utiliser de javascript.
https://www.alsacreations.com/tuto/lire/1068-sprites-css-background-position.html
Sinon pour ton image, tu peux mettre width= ta largeur, height= sa hauteur.
-
-
Bonjour
Je vais laisser en javascript car je n'arrive pas à réduire mon image avec width.
C'était pour éviter si jamais quelqu'un avait javascript de désactiver il n'aura pas de menu
je post quand même mon script si toute fois tu peux me dire comment faire.
Merci<style> .icone { width: 450px; height: 80px; display: inline-block; background-image: url("image/bloc_haut/menu_horizontal/menu.png" ); background-repeat: no-repeat; } .menu { width:100%; } .icone-1 { background-position: left top; } .icone-2 { background-position: 33.33% top; } .icone-3 { background-position: 66.67% top; } .icone-4 { background-position: 99.99% top; } .icone-1:hover { background-position: left bottom; } .icone-2:hover { background-position: 33.33% bottom; } .icone-3:hover { background-position: 66.67% bottom; } .icone-4:hover { background-position: 99.99% bottom; } </style> <ul class="menu"> <li class="icone icone-1"></li> <li class="icone icone-2"></li> <li class="icone icone-3"></li> <li class="icone icone-4"></li> </ul> -
Bonjour
je suis toujours avec mon design, peux tu me donner quelques conseil s'il te plait.
Je te laisse d'abord regarder ce que ça donne sur:
http://site.cliquedecruet.fr
En fait je n'arrive pas à comprendre pour faire en sorte que lorsque je survol un lien horizontal ça m'affiche mon div avec des sous menus et lorsque je suis sur un des 4 autres lien ça m'affiche un autre div avec d'autres sous menu et cache celui d'avant.
Merci de ton aide.-
Voici un bon tuto pour démarrer. Tu n'auras qu'à placer des images de tes boutons au lieu des zones de texte correspondant (tu comprendras après le tutoriel).
http://www.css-faciles.com/menu-deroulant.php
-
-
Bonjour
.
Merci pour ton lien.
En fait je me suis mal expliqué.
C'est malheureusement pas tout à fait ce que je souhaite.
Il faut en fait lorsque je clique sur un menu ça m'affiche le sous menu correspondant et en cliquant sur un autre menu ça me remplace par le sous menu correspondant.
Merci beaucoup -
Bonjour
En fait regarde sur mon site c'est ça que je voulais faire.
Merci encore pour ton coup de main
http://site.cliquedecruet.fr -
De rien ! Dis si ça marche pas. C'est comme ça que j'ai fait ce menu par exemple http://kungfu-trunghoa.redheberg.com/
