Image hover
Bonjour,
voilà, je crée une barre menu en ce moment même. La voici:
HTML
<nav><a href="news.html";><img src="file:///C:/wamp/.../news.png " class="news"/></a>
<a href="chroniques.html";><img src="file:///C:/wamp/www/.../chroniques.png" class="chroniques"/></a>
<a href="bio.html";><img src="file:///C:/wamp/www/.../bio.png" class="bio"/></a>
<a href="clips.html";><img src="file:///C:/wamp/www.../clips.png" class="clips"/></a>
<a href="forum.html";><img src="file:///C:/wamp/www/.../forum.png" class="forum"/></a></nav>
CSS
nav
{width: 677px;
/*toujours penser à mettre une taille au block, de façon à pouvoir le centrer correctement*/
margin-top: 180px;
margin-left : auto;
margin-right : auto;}
Comme vous pouvez le voir j'ai utilisé des png pour recrée les bouton de mon menu
j'aimerais qu'ils puissent changer de couleur lorsque je place mon curseur dessus, Jai donc utilisé la fonction Hover comme ceci:
ex:
.news:hover
{background-image: url(file:///C:/wamp/www/.../newshover.png);}
Mais comme vous vous doutez bien le bouton Hover c'est placé en dessous du bouton "news" :/
j'aimerais de l'aider s'il vous plait.
Merci :)
voilà, je crée une barre menu en ce moment même. La voici:
HTML
<nav><a href="news.html";><img src="file:///C:/wamp/.../news.png " class="news"/></a>
<a href="chroniques.html";><img src="file:///C:/wamp/www/.../chroniques.png" class="chroniques"/></a>
<a href="bio.html";><img src="file:///C:/wamp/www/.../bio.png" class="bio"/></a>
<a href="clips.html";><img src="file:///C:/wamp/www.../clips.png" class="clips"/></a>
<a href="forum.html";><img src="file:///C:/wamp/www/.../forum.png" class="forum"/></a></nav>
CSS
nav
{width: 677px;
/*toujours penser à mettre une taille au block, de façon à pouvoir le centrer correctement*/
margin-top: 180px;
margin-left : auto;
margin-right : auto;}
Comme vous pouvez le voir j'ai utilisé des png pour recrée les bouton de mon menu
j'aimerais qu'ils puissent changer de couleur lorsque je place mon curseur dessus, Jai donc utilisé la fonction Hover comme ceci:
ex:
.news:hover
{background-image: url(file:///C:/wamp/www/.../newshover.png);}
Mais comme vous vous doutez bien le bouton Hover c'est placé en dessous du bouton "news" :/
j'aimerais de l'aider s'il vous plait.
Merci :)
3 réponses
-
je cerois que le hover n'est pas compatible avec les images. Mais apparement en CSS3, c'est possible de faire des trucs sympa:
https://www.lafermeduweb.net
Sinon, je pense qu'il faut regarder du coté javascript, avec les evènements du type OnMouse
exemple:<img src="truc.png" onmouseover="this.src='truc2.png'" onmouseout="this.src='truc.png'"/>
-
Javascript oui mais non.
Il ne faut pas oublier qu'on peut désactiver le javascript.
Première chose:
Les chemins de type file:///C:/wamp/www/ sont à bannir.
Il faut mettre des chemins relatifs (idéalement).
Si tes images sont dans le même dossier que ta page, tu peux simplement mettre:<a href="news.html"><img src="news.png" class="news"/></a>
Tu peux faire la chose suivante:<a href="news.html" id="news"><span>News</span></a>
CSS:a#news span{display:none;} a#news{background:url(news.png);} a#news:hover{background:url(newshover.png);} -
css oui, mais il ne faut pas oublier qu'on peut désactiver le CSS
Et BIM ! xD
Mais sinon, bonne astuce en CSS :)
