Problème d'affichage : image hover

**FunkyBearz** · 27/02/2007, 13h23

Bonjour à tous,

J'ai une question bête,

Je voudrais que lorsque l'on passe le curseur sur mon image (qui est un lien), celle ci change pour affichier une autre image.

J'ai essayé sur une page "bidon" ici : http://funkybearz.com/series/index2.html

Tout le code est dispo en affichant la source ou tout tiens simplement ici :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<html>
<head>
<title>HuReeKo signs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">  
a.heures:hover 
img { 	background: url(http://funkybearz.com/series/img/24heures2.jpg); } 
</style>
<div class="heures">
<a href="http://funkybearz.com"><img src="http://funkybearz.com/series/img/24heures.jpg" border="0" /></a>
</div>

Je voudrais savoir ou j'ai fait une erreur car l'image "hover" ne s'affiche pas

Merci de votre aide

**mLk92** · 27/02/2007, 13h37

salut, tu as je pense mal écris ta déclaration de style, peut etre comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
.heures a:hover{ background: couleur url(' ...') no-repeat; }

Vu la déclaration que tu as faites, tu devrais revoir les notions de CSS et voir comment les propriétés CSS sont généralement déclarées.

voir ces sites:

www.developpez.com
www.w3schools.com/css/default.asp

Bon courage

**FunkyBearz** · 27/02/2007, 13h54

C'est gentil pour les sites mais ça va j'ai pourtant de bonnes notions en css, j'ai déclaré ma classe un peu à l'arrache c'est vrai.

Je vais essayer ta solution mais justement je l'avais déja essayé de cette manière il me semble.

**FunkyBearz** · 27/02/2007, 14h00

C'est étrange, cela ne fonctionne toujours pas :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<html>
<head>
<title>HuReeKo signs</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<style type="text/css">  
.heures a:hover{ background: #FFF url('http://funkybearz.com/series/img/24heures2.jpg') no-repeat; }
</style>
<div class="heures">
<a href="http://funkybearz.com"><img src="http://funkybearz.com/series/img/24heures.jpg" border="0" /></a>
</div>

**mLk92** · 27/02/2007, 14h00

Tu as de la chance, j'avais mon bouquin Css avec moi, voici comment déclarer une image réactive (un lien image donc):

code hmtl:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<a class='image' href='..' alt='..'></a>

code Css:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
a.image {
  display: block;
  width: ..;
  height: ..;
  background: url(...) no-repeat 0 0;
}
 
a.image:hover{
  background-image: url(..);
}

En espérant que ça t'aide.

**mLk92** · 27/02/2007, 14h02

Tes balises <style></style> doivent être déclaré entre les balise <head></head> et non <body></body>.

**FunkyBearz** · 27/02/2007, 14h07

Ah oui c'est pas con pour les balise style

Merci pour ton aide en tout cas, j'essaie ça dessuite, mais il n'y a plus de raison que ça ne marche pas, merci à toi

**MasterOfChakhaL** · 27/02/2007, 14h13

Salut,

Pour aller un peu plus loin, tu peux aussi faire une seule image réunissant tes deux images initiales

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
+-------------+
|      1      |
+-------------+
|      2      |
+-------------+

pour l'exemple, on va dire que chaque zone de l'image fait 100px*50px (donc l'image que tu utiliseras fera 100px*100px)
puis:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
a.image {
  display: block;
  width: 100px;
  height: 50px
  background: transparent url(...) left top no-repeat;
}
 
a.image:hover{
  background-position: left -50px;
}

l'interêt?
Comme tu n'as qu'une image, tu n'auras pas de temps de latence lors du survol car l'image sera entièrement chargée. Si tu utilises deux images, le chargement de l'image pour le survol n'aura lieu que lors du survol.

Problème d'affichage : image hover

Survol d'un élément en CSS (:hover)

Vue hybride

Discussions similaires

Partager

Partager