Effet de survol
Résolu
troubadour2
Messages postés
277
Date d'inscription
Statut
Membre
Dernière intervention
-
troubadour2 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
troubadour2 Messages postés 277 Date d'inscription Statut Membre Dernière intervention -
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.
A voir également:
- Effet de survol
- Effet miroir word - Guide
- Effet miroir photo - Accueil - Photo
- Effet miroir telephone - Guide
- Effet de photo gratuit - Télécharger - Montage photo
- Effet ralenti video - Guide
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>
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.
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:
ton css:
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
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'"
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
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
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.
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
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.
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
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
.
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