Image hover
Justao
-
justao Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
justao Messages postés 1 Date d'inscription Statut Membre Dernière intervention -
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 :)
A voir également:
- Image hover
- Image iso - Guide
- Reduire taille image - Guide
- Acronis true image - Télécharger - Sauvegarde
- Légender une image - Guide
- Image gratuite - Guide
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:
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:
Tu peux faire la chose suivante:
CSS:
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);}