Partage

Mettre une image pour le "hover"...

...afin que le lien change d'apparence

26 novembre 2005 à 18:30:47

Bonjours, j'ai mis des lien-images dans mon mennu pour que ça soit plus jolie, et j'aimerais que quand je passe la souris sur le lien-image, une autre image apparaisse(de meme taille).
Alors j'ai essayé des trucs dans ".ma_class a hover" pour le faire mais je n'y arrive pas. Le background image ne vas pas nonplus, je veut que ça me le fasse exactement a l'endroit du lien.
Donc il y a-t-il une propriété CSS pour ça?

Merci d'avance

Aerhus

26 novembre 2005 à 19:00:12

background-image marche très bien...

Tien :

a.image_lien
{
width: 135px; /*La largeur maximum de l'image à afficher*/
height: 22px; /*La hauteur maximum de l'image à afficher*/
background-image: url(C:/Documents and Settings/yannick/Mes documents/Mes images/Kim%20Possible0001.jpg); /*L'image de fond*/
}

a.image_lien:hover
{
background-image: url(C:/Documents and Settings/yannick/Mes documents/Mes images/LH-Kim-Running.jpg); /*L'image de fond quand on pointe sur le lien*/
}

Par contre fait attention, dans le lien de l'image ne met pas des \, faut les remplacer par / sinon sa marche pas ( enfin chez moi sa marche pas en tout cas

)

zoomworld

26 novembre 2005 à 19:03:31

Bien sure qu'il y a une solution !
tu as penser a la bonne fonction CSS mais tu a du te tromper de le html?

Alors voila pour le CSS:

Citation : CSS

.menu li.news
{
width:50px;
height:50px;
background:black url("../images/menu/news.jpg") no-repeat;
font-size:0px;
}
.menu li.news:hover {
background:black url("../images/menu/news 2.jpg") no-repeat;
}

Et voila pour le html :

Citation : xHTML

<div class="menu">
<ul>
<li class="news" title="News"><a href="http://www.light-prod.com">News</a></li>
</ul>
</div>

L'exemple que je t'ait donné est valable pour un menu avec images ... mais je pense que tu pourra deviner ce qui se passe pour les images normaux

EDIT : apocalimse a été plus rapide que moi?? et avec de meilleurs explications?? o_O

Aerhus

26 novembre 2005 à 19:08:56

Je n'ai pas vraimment donné de meilleur explications, et puis toi tu as mi le code (x)html en plus

zoomworld

26 novembre 2005 à 19:21:48

on se partage les gains? 50-50 ?

Lenwë

26 novembre 2005 à 19:52:30

Bien merci a vous deux ça donne physiquement ce que je voulais.
Mais le prob, en ayant pris la méthode de Bledfeet, c'est que l'image n'est plus cliquable(plus de lien!) Comment remédier au prob?

<div class="element_menu">
<h3>Titre menu</h3> 

<li class="boutonacceuil"><a href="http://www.lesite.com">gggggghsrth</a></li>
<li><a></a></li><br />
<li><a></a></li>

</div>

Voila donc le hover marche bien mais il n'y a pas la possibilité de cliquer pour acceder au lien.

Un autre (petit) problème : je vois 2 puces noires a cause des "li", comment faire pour ne pas les voir, car je vais aussi mettre des images pour les autre liens du menu.(donc je ne veu pas de puces)
A noté que ces puce ne gène pas pour le placement de mon image, apparemment.

Aerhus

26 novembre 2005 à 21:57:28

Lol, le lien c'est le texte... Et comme tu as mi font-size: 0px, le texte et TOUT petit!

Si tu regarde bien en haut a gauche de ton bouton il y a une barre bleu, c'est ton texte... Et ton lien est la

Lenwë

26 novembre 2005 à 23:24:07

Bah c'est trop nul! lol!
Comment faire pour avoir la meme chose mais avec un lien digne de ce nom (qui fait la taille de l'image.
Parceque, c'est bien beau tout ça, mais le but premier c'est d'avoir un lien^^!

Mut

26 novembre 2005 à 23:34:12

Sinon, il y a toujours la solution du JavaScript...

function rollover1()
{
on document.getElementById('image').src='image1.jpg';
}
function rollover2()
{
on document.getElementById('image').src='image2.jpg';
}

Et après :

A toi de modifier le code

Lenwë

26 novembre 2005 à 23:38:09

Oulala, moi je ne connais pas du tout ce language! Il se met où? dans le CSS? Le HTML?
Mais il n'y aurait pas une solution simple en html, car j'y suis presque maintenant, il me manque plus que le lien marche.

Mut

26 novembre 2005 à 23:41:18

Awi d'accord

Sinon, ta solution en CSS semblait pas mal ; tu peux essayer d'appliquer ce style à une balise <a>...

ratdecav

26 novembre 2005 à 23:51:50

Salut, la solution de apocalisme est la bonne , c'est bien l' image qui fait le lien . Alors que dans la solution de bledfeet que tu as repris , c' est le texte.
Essaye tu verras ça roule ++

Lenwë

27 novembre 2005 à 0:16:57

Et bien je vien d'essayer la solution de apocalisme, et je n'y arrice pas mieu : l'image s'affiche en fonction du texte écris, c'est encore pire!
Mais j'ai trouvé une solution : en gardan la soluce de Bledfeet, j'ai remis le texte a 20px au lieu de 0px, sauf que sur le html j'ai mis des "_" entre les balise, pour que sa fasse une sorte de soulignage...
Je vous montre :

.element_menu li.boutonacceuil
{
background-image: url("http://s144851876.onlinehome.fr/images/boutonacceuil.png");
font-size: 0px;
width:125px;
height:25px;

}
.element_menu li.boutonacceuil:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonacceuilhover.png") no-repeat;
font-size: 20px;
color: black;
}
.element_menu li.boutonnews
{
background-image: url("http://s144851876.onlinehome.fr/images/boutonnews.png");
font-size: 0px;
width:125px;
height:25px;

}
.element_menu li.boutonnews:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonnewshover.png") no-repeat;
font-size: 20px;
color : black;
}

Dite moi ce que vous en penssez, je vous file l'adresse provisoire : C'est par ici!
Allez y uniquement avec firefox ou Opera, car ça a l'air de foirer complet sous IE!
Vous pourrez remarquer qu'il y a encores les puces devant les image quand vous passé dessu le lien, moi je ne les veu pas. Comment je fais pour les enlever?

Apart ça, j'ai commencé le site hier, donc c'est normal qu'il n'y ai rien, j'ai passé 4-5h dessu pour le moment(création d'images script et compagnie).

ratdecav

27 novembre 2005 à 0:41:51

Je reprend ton code et je te le poste, il y a pas mal de pb : les balises de listes ne sont pas encadrées par des <ul> et ton css est un peu en vrac , a tout de suite . . .

dworkin

27 novembre 2005 à 1:10:40

Le mieux c'est de faire une image qui contient les deux images que tu souahite afficher.

Va donc voir ce lien : Réaliser un design complet : titre et menu

Et regarde comment est fait le changement de fond pour le menu. C'est très instructif, et c'est très probablement la meilleure méthode.

Bon courage.

ratdecav

27 novembre 2005 à 1:32:04

Sinon, ça marche a peu près il me semble :

<html>
<head>
<style type="text/css">
ul {
list-style:none;
font-size:25px;
}

a {
width:125;
height:25;
}

a.boutonnews {
color:red;
background:url(tonimage.jpg);

}
a.boutonnews:hover {
color:blue;
background:url(tonimage2.jpg);

}
a.boutonaccueil {
color:red;
background:url(tonimage2.jpg);

}
a.boutonaccueil:hover {
color:blue;
background:url(tonimage.jpg);

}
</style>
</head>
<body>
<div >
<ul>
<li><a href="#" class="boutonnews">news</a></li>
<li><a href="#" class="boutonaccueil">accueil</a></li>
</ul>
</div>
</body>

Par contre , Alsacreation c' est vrai c' est top ;
++

dworkin

27 novembre 2005 à 1:35:34

As tu regardés l'article dont je t'ai donné le lien.

Tu devrais essayer, je t'assure.

Il n'y a pas de mal à faire bien les choses, tu sais... ?

;-)

ratdecav

27 novembre 2005 à 8:57:36

Salut smn.andre, et les joies du bidouillages alors ?

Les propositions de liens vers Alsacreations pour le css ou Nexen pour le php ou jejavascript pour le js sont légions sur le forum.

Par contre, il y a aussi plein de gens sympa, plus ou moins débutant, qui participent, s' impliquent et trouvent ensemble des solutions , ce qui est très formateur , non ?

Tu me demandes si j' ai regardé l' article que tu proposes, (oui chef), mais toi tu n' as pas lu les codes postés pour proposés des corrections personnelles.

Nos avis divergent, mais notre passion est commune je crois.
Alors codons, codons, il en resteras toujours quelque chose . . .

++

Lenwë

27 novembre 2005 à 14:32:17

Ratdecav, j'ai pas encore mis ton caode a la place du mien, car il me semble que avec ce que tu proposes, je vais voir les écritures "acceuil" et "News", donc pas seulement les images... Je me trompe?
J'ai quand meme remis les "ul" mais ça m'a décalé mes images de 40px sur la droite.
J'ai donc été obligé de faire un "margin-left: -40px". Donc c'est vraiment du gros bidouillage!
Et dans le css j'au mis ce que tu as mis pour la balise ul. J'avais pas pensé au "list-style : none"! Merci

Bien si le site que m'as proposé smn.andre est une bonne solution, je vais allé voir. Mais j'espère que ça change pas trop de trucs dans mon script!

Si vous avez une solution plus simple, allez y!
PS : le lien que j'ai fait auparavant sur mon site es obsolète, vu que je bosse en local(sur mon PC). J'actualiserais quand j'aurais plus avancé sur le problème.

dworkin

27 novembre 2005 à 14:35:37

Citation : ratdecav

Les propositions de liens vers Alsacreations pour le css ou Nexen pour le php ou jejavascript pour le js sont légions sur le forum.

Par contre, il y a aussi plein de gens sympa, plus ou moins débutant, qui participent, s' impliquent et trouvent ensemble des solutions , ce qui est très formateur , non ?

Si tu as besoin d'un code, je préfère t'envoyer sur un tutoriel de référence, bien fait, et surtout où je suis sur que tu comprendras et apprendras, plutot que de donner une solution vite fait bien fait...

simple différence de pédagogie...

Lenwë

27 novembre 2005 à 14:55:58

YYYOOOUUUHHHOOUUUU!!!!! J'ai trouvé!!! Il me fallait juste apliquer la propriété "display: block" au balise a de la class "element_menu"(j'ai trouvé ça sur alsacréations!)

Je vous montre mon CSS et le html qui va avec :

#menu
{
float: left; /* Le menu flottera à gauche */
width: 130px; /*taille du menu */
}

.element_menu
{
background-color: none;
background-image: url("http://s144851876.onlinehome.fr/images/fondmenu.jpg");
background-repeat: repeat-x;
border: 2px solid black;
margin-bottom: 5px; /* Pour éviter que les éléments du menu ne soient trop collés */
}
.element_menu h3 /* Tous les titres de menus */
{
color: rgb(225,188,111);
font-family: Arial, "Arial Black", "Times New Roman", Times, serif;
text-align: center;
font-size: 17px;
}

.element_menu li.boutonacceuil
{
background-image: url("http://s144851876.onlinehome.fr/images/boutonacceuil.png");
font-size: 0px;
width:125px;
height:25px;

}
.element_menu li.boutonacceuil:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonacceuilhover.png") no-repeat;
font-size: 20px;
color: black;
}
.element_menu li.boutonnews
{
background-image: url("http://s144851876.onlinehome.fr/images/boutonnews.png");
font-size: 0px;
width:125px;
height:25px;

}
.element_menu li.boutonnews:hover
{
background: black url("http://s144851876.onlinehome.fr/images/boutonnewshover.png") no-repeat;
font-size: 20px;
color : black;
}
.element_menu ul
{
list-style: none;
font-size: 25px;
margin-left: -40px;
}
.element_menu a
{
width: 125px;
height: 25px;
display: block;

}

<div id="menu">

<div class="element_menu">
<h3>Titre menu</h3> 

<ul>
<li class="boutonacceuil"><a href="http://www.lesite.com"></a></li>
<li class="boutonnews"><a href="http://www.lesite.com"></a></li>
<li><a></a></li>
</ul>

<h3>Titre menu</h3>
<ul>
<li><a></a></li>
<li><a></a></li>
<li><a></a></li>

<h3>Partenaires</h3>

<li><a href="http://www.artgamer.com">Artgamer</a></li>
<li><a href="http://www.siteduzero.com">Site du Zero</a></li>
<li><a></a></li>

</div>

</div>

J'ai actualisé mon FTP, donc vous pouvez voir les changements : ici!

Voila, bien il me reste a faire tous les autres boutons, mais ça ne devrai pas me poser de problèmes.

J'attends vos autre commentaire si quelque chose cloche, ou si vous avez des suggestions!

ratdecav

27 novembre 2005 à 17:51:44

Super, Silke.
Je trouve que ça prend vraiment bonne tournure.
Sinon pour te faire râler un peu, l' attribut hover ne fonctionne, avec msie, que pour les liens donc ...
Mais avec ff c' est tout bien .
++

Lenwë

27 novembre 2005 à 18:13:58

Oui, je sais que sous IE, ça affiche mes liens-image avec un fond gris, et ils ne changent pas en hover!
Comment faire pour que ça marche aussi sur IE!
Je veu pas tout recommencer alors que ça marche sous Opera et Ff!
Ca vient du format de mon image? c'est du PNG, ça devrai marcher! Et le but de mon image qui n'est pas en "hover", c'est qu'elle reste transparente, afin que je voi le fond, qui est en dessous! Et si je met autre chose que du PNG, ça va plus etre transparent si?(je sais que pour JPG en tout cas, ça me mais un fond blanc)

Lenwë

28 novembre 2005 à 18:47:59

Conaissez vous une autre solution pour que mon image reste en transparence? Car IE gobe pas la transparence du PNG c'est ça?
Pour le hover, je vais essayer de l'apliqué sur la balise "a" pour que ça marche aussi sur IE.
Mais ce qui me pose problème c'est cette transparence de mon image PNG qui affiche un fond gris sur IE...

Lenwë

30 novembre 2005 à 21:57:59

C'est bon, pour le hover sous IE, j'ai réussi a l'appliquer sur la balise "a".
Mais pour l'image, comment la faire aparaitre en transparence, il y a-t-il un autre format que le PNG qui le permet? Car IE ne veu pas accepter la transparence de mon image, il me met un fond gris.
Bmp peutètre? je ne sais pas moi!
C'est par ici!

Don't let me down, please!

A part cela, savez vous si il y a un attribut CSS pour centrer une image au millieu d'un block div?