Problème d'affichage : image hover

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

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, 14h37

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, 14h54

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, 15h00

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, 15h00

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, 15h02

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

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

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

**FunkyBearz** · 27/02/2007, 15h12

Yes ça fonctionne.

Merci

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

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.

**mLk92** · 27/02/2007, 15h16

Pas mal !! mais une question importante me subvient, où est-ce que tu déclare tes images ? vu qu'elles sont différente l'une de l'autre.

**mLk92** · 27/02/2007, 15h17

Envoyé par FunkyBearz

Yes ça fonctionne.

Merci

De rien, on est aussi là pour ça

**FunkyBearz** · 27/02/2007, 15h35

Effectivement cette méthode est très utile, même si ce n'est que pour de petites images ça peut être très pratique.

**MasterOfChakhaL** · 27/02/2007, 15h38

Envoyé par mLk92

... où est-ce que tu déclare tes images ? vu qu'elles sont différente l'une de l'autre.

Justement, l'astuce consiste à n'avoir qu'une seule image qui contient les deux zones.
Le css est là pour n'afficher que ce que tu souhaites. A chaque fois une zone sera masquée puisque tu défini les dimensions du lien et que l'image est deux fois plus grande.

**mLk92** · 27/02/2007, 15h57

mmmh interressant, ça éviterai de charger le serveur et les pauvres utilisateurs de 56k lol.

Je testerais !

**FunkyBearz** · 27/02/2007, 16h18

Hum dernière question & je vous laisse

toujours au même endroit : http://funkybearz.com/series/

Comment faire pour aligner 3 images? avoir 3 images sur chaque ligne en somme, la elles sont à la ligne automatiquement.

Merci pour vos réponses.

EDIT : c'est fait avec ta méthode MasterofChakhal & ça marche nickel

sauf ça :'(

**mLk92** · 27/02/2007, 16h22

euh balise

Code :

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

<p></p>

tu met trois images par balise "p" soit par paragraphe

**MasterOfChakhaL** · 27/02/2007, 16h28

Salut,

Vu que tu es obligé de mettre les liens en display block pour que les dimensions soient respectées, il te reste éventuellement à les placer en float: left.

Il te faudra alors placer un element quelconque avec la propriété clear: both à la suite de tes images si tu veux éviter les chevauchements avec le reste de ta page.
En effet, un élément flottant est sorti du flux de la page et n'est donc plus pris en compte pour le calcul des dimensions des éléments parents. La propriété clear modifie ce comportement et se place forcément sous les éléments flottants qui le précède dans le code.
Comme cet élément, lui, sera touours dans le flux, il va "pousser" le bas de l'élément parent sous les flottants.

EDIT:
pour avoir trois images par lignes, tu peux les mettres en float comme expliqué précedemment.
une image sur trois aura en plus la propriété clear: right