Image changeante au passage du curseur !? Résolu/Fermé

Question

Bonjour,
Bonjour Bonjour,
J'ai des boutons qui s'affichent en arrière plan avec du css sur mon site
Je voudrais leur mettre un effet de onemouseover !Du style quand on passe la souris dessus ça affiche une autre image !
Et je voudrais faire ça en css svp .
plz

Utilisateur anonyme · Answer

donne moi le code source complet de ta page web pour que je puisse y mettre le code qui te permet de faire l'effet désiré

jmg78 · Answer

avec le lien ça suffit

kind-david · Answer

Nan mais les boutons ils sont dans le style.css donc faut modifier style.css 
Mais comment ?

kind-david · Answer

Dzl j'peu pas mettre le lien ça marche aps

Utilisateur anonyme · Answer

en fait, les boutons sont dans l'image qui sert d'arrière plan c'est ça ?

kind-david · Answer

Nan en faite les boutons sont des image qui sont paramétré par rapport au style.css tu voi ske jveu dire ou pas ? 
(va sur mon profil ya le lien vers mon site et les bouton ke je parle ce sont ceux en vert a gauche)

Utilisateur anonyme · Answer

Voici le code source de ta page web : 0K3Y

Site en construction !

et du fichier .css: /*Configuration générale */ * { margin: 0; padding: 0;} body { margin: 0; background-image: url(images/extensiblehead.jpg) ; background-repeat: repeat-x; font-family: Arial, Helvetica, sans-serif; font-size: 0.8em; } a { color: #D1B02D; } a:hover {text-decoration: none; } /* -Header- */ #header { width: 373px; height: 153px; background: url(images/header.jpg) no-repeat ; margin: 0; } #header span { display: none; } /* -Menu header- */ #menuhorizontal { height: 27px; margin: -96px 0 0 362px; list-style-type: none; } #menuhorizontal li { float: left; display: block; width: 81px; height: 27px; margin: 0 4px 0 5px ; line-height: 15px; background: url(images/menuheader.jpg) no-repeat; text-align: center; } #menuhorizontal li a { color: #fff; font-size: 1em; text-decoration: none; } #menuhorizontal li a:hover {text-decoration: underline;} /* Barre de Connexion */ #connexion { height: 45px; margin: 24px 0 0 370px; color: #6a6a6a; padding: 7px 0; } /* Menu vertical */ #menuvertical { width: 140px; margin: 57px 0 0 0 ; float: left; list-style-type: none; } #menuvertical li { display: block; width: 140px; height: 25px; line-height: 25px; text-align: right; margin: 7px 0 0 0; background: url(images/menuvertical.jpg) no-repeat; } #menuvertical li a { color: #fff; text-decoration: none; margin: 0 10px 0 0; } #menuvertical li a:hover{text-decoration: underline;} /* Contenu */ #contenu { width: 670px; margin: 45px 0 0 185px; } #contenu h2 { color: #fb8800; margin: 25px 9px 0 0; font-size: 1em; } #footer { clear: both; margin: 70px 0 0 0; text-align: center; } La on va pouvoir travailler:

kind-david · Answer

Euh .. ouais !
Tu sais comment faire ?

kind-david · Answer

Help !

Nep_51 · Answer

Bonjour

Je n'ai pas lu ton pavé de code... trop long
Je sais pas si c'est ce que tu voudrai mais dans le style il existe une option hover.

Exemple sur une div (a toi d'adapter ensuite)
div{
background-image:url(image1);
}
div:hover{
background-image:url(image2);
}

Ton fond sera donc l'image1 et quand la souris passe sur ta div, elle deviens image2.

Nep 
http://www.cultureg.com

kind-david · Answer

6mer Nep_51

kind-david · Answer

/*Configuration générale */

* { margin: 0; padding: 0;}

body {
margin: 0;
background-image: url(images/extensiblehead.jpg) ;
background-repeat: repeat-x;
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}

a { color: #D1B02D; }

a:hover {text-decoration: none; }

/* -Header- */

#header {
width: 373px;
height: 153px;
background: url(images/header.jpg) no-repeat ;
margin: 0;
}

#header span {
display: none;
}

/* -Menu header- */

#menuhorizontal {
height: 27px;
margin: -96px 0 0 362px;
list-style-type: none;
}

#menuhorizontal li {
float: left;
display: block;
width: 81px;
height: 27px;
margin: 0 4px 0 5px ;
line-height: 15px;
background: url(images/menuheader.jpg) no-repeat;
text-align: center;
}

#menuhorizontal li a {
color: #fff;
font-size: 1em;
text-decoration: none;
}

#menuhorizontal li a:hover {text-decoration: underline;}

/* Barre de Connexion */

#connexion {
height: 45px;
margin: 24px 0 0 370px;
color: #6a6a6a;
padding: 7px 0;
}

/* Menu vertical */

#menuvertical {
width: 140px;
margin: 57px 0 0 0 ;
float: left;
list-style-type: none;
}

#menuvertical li {
display: block;
width: 140px;
height: 25px;
line-height: 25px;
text-align: right;
margin: 7px 0 0 0;
background: url(images/menuvertical.jpg) no-repeat;
}

#menuvertical li a {
color: #fff;
text-decoration: none;
margin: 0 10px 0 0;
}

#menuvertical li a:hover{text-decoration: underline;}

/* Contenu */

#contenu {
width: 670px;
margin: 45px 0 0 185px;
}

#contenu h2 {
color: #fb8800;
margin: 25px 9px 0 0;
font-size: 1em;
}

#footer {
clear: both;
margin: 70px 0 0 0;
text-align: center;
} 

Euh comment j'pourrais modifier la partie grasse surlignée ?!
sil'te'plait

Utilisateur anonyme · Answer

Voici la solution en gras (tu met une autre image d'arrière plan nommé par exemple menuverticalDuneAutreCouleur.jpg):




/*Configuration générale */ 

* { margin: 0; padding: 0;} 

body { 
margin: 0; 
background-image: url(images/extensiblehead.jpg) ; 
background-repeat: repeat-x; 
font-family: Arial, Helvetica, sans-serif; 
font-size: 0.8em; 
} 

a { color: #D1B02D; } 

a:hover {text-decoration: none; } 

/* -Header- */ 

#header { 
width: 373px; 
height: 153px; 
background: url(images/header.jpg) no-repeat ; 
margin: 0; 
} 

#header span { 
display: none; 
} 

/* -Menu header- */ 

#menuhorizontal { 
height: 27px; 
margin: -96px 0 0 362px; 
list-style-type: none; 
} 

#menuhorizontal li { 
float: left; 
display: block; 
width: 81px; 
height: 27px; 
margin: 0 4px 0 5px ; 
line-height: 15px; 
background: url(images/menuheader.jpg) no-repeat; 
text-align: center; 
} 

#menuhorizontal li a { 
color: #fff; 
font-size: 1em; 
text-decoration: none; 
} 

#menuhorizontal li a:hover {text-decoration: underline;} 

/* Barre de Connexion */ 

#connexion { 
height: 45px; 
margin: 24px 0 0 370px; 
color: #6a6a6a; 
padding: 7px 0; 
} 

/* Menu vertical */ 

#menuvertical { 
width: 140px; 
margin: 57px 0 0 0 ; 
float: left; 
list-style-type: none; 
} 

#menuvertical li { 
display: block; 
width: 140px; 
height: 25px; 
line-height: 25px; 
text-align: right; 
margin: 7px 0 0 0; 
background: url(images/menuvertical.jpg) no-repeat; 
} 

#menuvertical li a { 
color: #fff; 
text-decoration: none; 
margin: 0 10px 0 0; 
} 

#menuvertical li:hover{text-decoration: underline;background: url(images/menuverticalDuneAutreCouleur.jpg) no-repeat;} 

/* Contenu */ 

#contenu { 
width: 670px; 
margin: 45px 0 0 185px; 
} 

#contenu h2 { 
color: #fb8800; 
margin: 25px 9px 0 0; 
font-size: 1em; 
} 

#footer { 
clear: both; 
margin: 70px 0 0 0; 
text-align: center; 
}

kind-david · Answer

Ouah TotoAussi tu geres trop !merci
Tchuss .

kind-david · Answer

Image changeante au passage du curseur !?

Regarde ce que ça donne h t t p : / / 0 k 3 y . h o s t s e . c o m /
YEEEAAAHH ^^

Image changeante au passage du curseur !?

15 réponses

Discussions similaires