Problème d'affichage : image hover

Version imprimable

Voir 40 message(s) de cette discussion en une page

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:

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 :)

27/02/2007, 13h37
mLk92
salut, tu as je pense mal écris ta déclaration de style, peut etre comme ceci :
Code:

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 :)
27/02/2007, 13h54
FunkyBearz

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.

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

Code:

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>

27/02/2007, 14h00
mLk92
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:

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

code Css:
Code:

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.
27/02/2007, 14h02
mLk92

Tes balises <style></style> doivent être déclaré entre les balise <head></head> et non <body></body>.
27/02/2007, 14h07
FunkyBearz

Ah oui c'est pas con pour les balise style :lol:

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 :)
27/02/2007, 14h12
FunkyBearz

Yes ça fonctionne.

Merci :hola:
27/02/2007, 14h13
MasterOfChakhaL
Salut,

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

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:

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.
27/02/2007, 14h16
mLk92

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.
27/02/2007, 14h17
mLk92

Citation:

Envoyé par FunkyBearz

Yes ça fonctionne.

Merci :hola:

De rien, on est aussi là pour ça :aie:
27/02/2007, 14h35
FunkyBearz

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.
27/02/2007, 14h38
MasterOfChakhaL

Citation:

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.
27/02/2007, 14h57
mLk92

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

Je testerais !
27/02/2007, 15h18
FunkyBearz

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 :'(
27/02/2007, 15h22
mLk92

euh balise

Code:

<p></p>

tu met trois images par balise "p" soit par paragraphe :)
27/02/2007, 15h28
MasterOfChakhaL

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
27/02/2007, 15h34
FunkyBearz

Le problème vient évidement du display:block mais si je change pour display:inline l'image ne s'affiche carrément plus.

Quelqu'un a une idée?
27/02/2007, 15h39
MasterOfChakhaL

je ne t'ai pas dit d'enlever le display: block ...
27/02/2007, 15h40
FunkyBearz

Citation:

Envoyé par MasterOfChakhaL

je ne t'ai pas dit d'enlever le display: block ...

Euh en faite je suis juste un des pires boulet de ce forum, je n'avais pas vu la deuxième page, je me répondais à moi même en faite :D

Je vais lire vos réponses maintenant ;)

Voir 40 message(s) de cette discussion en une page