Effet de survol
Résolu/Fermé
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
-
26 août 2011 à 11:40
troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 - 7 sept. 2011 à 17:58
troubadour2 Messages postés 277 Date d'inscription vendredi 11 juin 2010 Statut Membre Dernière intervention 19 juin 2016 - 7 sept. 2011 à 17:58
A voir également:
- Effet de survol
- Effet miroir word - Guide
- Restreindre instagram effet - Guide
- Effet visuel windows 10 - Guide
- Effet miroir pdf - Forum Graphisme
- Effet scintillement photoshop ✓ - Forum Photoshop
13 réponses
Utilisateur anonyme
26 août 2011 à 11:49
26 août 2011 à 11:49
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>
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
26 août 2011 à 17:15
26 août 2011 à 17:15
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...
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
26 août 2011 à 19:21
26 août 2011 à 19:21
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'"
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
26 août 2011 à 23:42
26 août 2011 à 23:42
Bonjour
Je vais essayer ta solution de suite elle me parait plus simple pour mes compétences.
Merci
Je vais essayer ta solution de suite elle me parait plus simple pour mes compétences.
Merci
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
27 août 2011 à 00:06
27 août 2011 à 00:06
C'est re-moi
Merci pour ton aide cela fonctionne parfaitement bien.
Je te remercie.
Merci pour ton aide cela fonctionne parfaitement bien.
Je te remercie.
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
29 août 2011 à 18:18
29 août 2011 à 18:18
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.
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
30 août 2011 à 06:58
30 août 2011 à 06:58
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>
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
5 sept. 2011 à 16:13
5 sept. 2011 à 16:13
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
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
5 sept. 2011 à 20:24
5 sept. 2011 à 20:24
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
troubadour2
Messages postés
277
Date d'inscription
vendredi 11 juin 2010
Statut
Membre
Dernière intervention
19 juin 2016
1
7 sept. 2011 à 17:58
7 sept. 2011 à 17:58
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
En fait regarde sur mon site c'est ça que je voulais faire.
Merci encore pour ton coup de main
http://site.cliquedecruet.fr
