créer un site


[reglé] Changer l'arrière-plan d'une image en rollover

Poster un nouveau sujet sur css   Répondre au sujet à css:[reglé] Changer l'arrière-plan d'une image en rollover    Accueil Forum -> css
Voir le sujet précédent :: Voir le sujet suivant  
Auteur Message
Malo-net
html mioche
html mioche
Message[reglé] Changer l'arrière-plan d'une image en rollover , Posté le: 20-09-2004 22:30

Bonjour. Malgré tous les tutos que j'ai lus là-dessus, et toutes les pages dont j'ai essayé de comprendre le code, un truc m'échappe...

Alors voilà mon cas :

J'ai une image .gif avec un arrière-plan transparent. Sur ma page elle a donc la couleur d'arrière-plan du body qui est un éspèce de beige. Je voudrais que l'arrière plan devienne d'une autre couleur qd la souris passe dessus. Comme ça, ça évite d'avoir une seconde image à charger.

Alors, voilà ce que j'ai fait et qui ne marche pas :

CSS:

Code:
.skeudenn {
  margin-left: auto;
  margin-right: auto;
  text-align: left;
  margin-top: 25px
  width: 125px;
  height: 103px;
  border: 0px;
  }
.skeudenn:hover {
  background-color: blue;
  }


HTML :

Code:
<a href="sonerezh/index.html">
<img class="skeudenn" alt="va sonerezh" src="../images/badig.gif">
<p class="kreiz">sonerezh</p></a></div>


Merci d'avance...


Dernière édition par Malo-net le 01-10-2004 23:00; édité 1 fois
Malo-net
html mioche
html mioche
Messagechangé , Posté le: 27-09-2004 21:17

Euh... maintenant j'ai trafiqué un peu tout, et ça marche sous IE, mais pas sous FF...

Voici mes nouveaux codes :

CSS :

Code:
.kreiz {
  text-align: center;
  font-family: Arial;
  font-size: 10pt;
  }
.kreiz: hover {
  background-color: orange;
  }


Code:
a {
  font-family: Arial;
  font-size: 10pt;
  }
a: hover {
  background-color: yellow;
  }


HTML :

Code:
<div class="menu">
<div class="bloc3">
<a href="musique/index.html" class="kreiz"><img class="skeudenn" alt="ma musique" src="../images/badig.gif"></a><hr /><a href="musique/index.html">musique</a></div>
<div class="bloc4">
<a href="liens/index.html" class="kreiz"><img class="skeudenn" alt="liens" src="../images/liammou.gif"></a><hr /><a href="liens/index.html">liens</a></div>
<div class="bloc4">
<a href="contact/index.html" class="kreiz"><img class="skeudenn" alt="contactez-moi" src="../images/darempred.gif"></a><hr /><a href="contact/index.html">contact</a></div>
</div>
SIBELIUS
html mioche
html mioche
Message[reglé] Changer l'arrière-plan d'une image en rollover , Posté le: 27-09-2004 22:15

Dans ton cas, tu appliques le background sur la balise <a> et non sur l'image.
Or <a> est une balise "en-ligne" et n'a pas de dimensions à proprement parler... donc on ne voit pas le background.
Malo-net
html mioche
html mioche
Message[reglé] Changer l'arrière-plan d'une image en rollover , Posté le: 27-09-2004 22:32

Pourtant, si je mets :

Code:
skeudenn: hover {
    background-color: yellow;
    }


ça ne marche pas non plus Sad ...

(N.B. : skeudenn est le class que je donne à mes images-lien)
SIBELIUS
html mioche
html mioche
Message[reglé] Changer l'arrière-plan d'une image en rollover , Posté le: 27-09-2004 22:40

Oui, parce que IE ne reconnait la pseudo-classe :hover que si elle est appliquée sur <a>.
Pour éviter ce cercle vicieux, il faut pouvoir donner une taille à <a>, donc la transformer en bloc : http://www.alsacreations.com/articles/blocinline/
Malo-net
html mioche
html mioche
Messagemerci. , Posté le: 27-09-2004 23:00

Merci, j'ai appliqué :
Code:
display: bloc


à mon lien et à mon image, mais ça ne marche tjs pas...

N.B. : j'ai essayé l'orthographe bloc et block car je n'étais pas sur, ça ne marche avec aucune d'elles...
SIBELIUS
html mioche
html mioche
Message[reglé] Changer l'arrière-plan d'une image en rollover , Posté le: 28-09-2004 8:47

Il faut donner des dimensions à <a>.

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
<!--
a img {border: none;}
a.test {
display: block;
width: 150px;
height: 150px;
}
a.test:hover {
background: blue;
}
-->
</style>
</head>
<body>
<a class="test" href=""><img alt="" src="image.gif" height="95px" width="80px" /></a>
</body>
</html>
Malo-net
html mioche
html mioche
MessageMerci ! , Posté le: 28-09-2004 10:53

Merci ! Je vous dirais ce que ça donne !
Malo-net
html mioche
html mioche
MessageC'est reglé ! , Posté le: 01-10-2004 23:00

C'est reglé !

En fait j'avais un autre problème aussi : j'utilise WSCITE pour programmer, et il ne consiérait :hover correct que quand il y avait un espace entre celui-ci et la a.

Or IE comprend :hover avec un espace, mais pas FF !

Donc, qd j'ai enlevé mon espace entre les deux, ça a marché (par contre WSCITE considère ça incorrect...) !
Montrer les messages depuis:   
Poster un nouveau sujet sur css   Répondre au sujet à css:[reglé] Changer l'arrière-plan d'une image en rollover    Accueil Forum -> css Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers:  
S'enregistrerS'enregistrer
ProfilProfil
Se connecter pour vérifier ses messages privésSe connecter pour vérifier ses messages privés
RechercherRechercher
Liste des MembresMembres
FAQFAQ
ConnexionConnexion 


© Mentions Légales