[Résolu] Rollover sur image

Bonjour,

Je souhaite substituer une image par une autre à l'aide du CSS.

Je pensais avoir trouvé:

XHTML:
<a href="#"><img src="http://www.site.com/image.jpg" id="image"/></a>


CSS:
#image a:hover
{
background-image:url(http://www.site.com/image2.jpg);
}

Mais ça ne marche pas

Où pêche-je ?

Merci de votre aide,

Modifié par mailbox13630 (22 May 2009 - 19:26)

Merci pour ces infos (je suis une bleue...alors je fais encore quelques mega boulettes

J'avais placé mon image comme si elle avait un lien, donc entre les balises <a></a> (mais je n'ai pas mis d'url dans la balise), en pensant que le a:hover me permettrait de substituer l'image au survol.
Que nénnnni.

Si je t'ai bien suivi, je peux substituer une image de fond par une autre.
Donc, si je place une image comme image de fond d'une cellule de tableau, je peux la remplacer par une autre grâce au CSS.

Comment dois-je m'y prendre?

Merci d'avance,

mailbox13630 a écrit :
Comment dois-je m'y prendre?

Eh bien, exactement comme tu le décris:

mailbox13630 a écrit :
1) je place une image comme image de fond d'une cellule de tableau, 2) je peux la remplacer par une autre grâce au CSS

Ce qui peut se traduire ainsi en code:

td {
  background-image: url(image1.jpg);
}
td:hover {
  background-image: url(image2.jpg);
}

C'est un exemple. Le code réel sera sans doute différent car il faudra viser plus précisément les éléments concernés, on aura des styles plus précis, etc.

Attention: s'il s'agit d'une image porteuse d'une information, et notamment d'un intitulé textuel, cette image doit être placée dans le code HTML, avec un élément IMG (et un texte alternatif qui va bien... je ne fais pas l'injure de rappeler les fondamentaux de HTML, je suppose qu'ils sont connus ). Dans ce cas, il faudra réaliser l'effet de changement d'image au survol en passant par JavaScript, ce qui est un petit peu moins simple (et demande des connaissances de base en JavaScript).

Bonjour,

Pour l'injure sur les fondamentaux de l'HTML, je t'en dispenses, j'ai dépassé ce stade ;-D grâce a site du zéro par lequel j'ai commencé.
Merci pour ton aide. Ca fonctionne très bien.

Pour compliquer la chose, je souhaite appliquer des images différentes sur chacune des cellules.
Pour que tu comprennes, ce tableau va contenir des photos de personnes dans un état (premier visuel), et au passage de la souris, on découvre ces personnes dans un autre état.

J'ai donc pensé à mettre un identifiant unique à chaque cellule <td>, mais ça ne fonctionne pas.
Voici mon code:

XHTML:

 
<td id="image1"></td>
<td id="image3></td>

CSS:

 
#image1 td
{
background-image:url(image1.jpg);
}

#image1 td:hover
{
background-image:url (image2.jpg);
}

#image3 td
{
background-image:url(image3.jpg);
}

#image3 td:hover
{
background-image:url (image4.jpg);
}

Gracie mille
Modifié par mailbox13630 (22 May 2009 - 11:09)

Bonjour,

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Correction faite.

Mille excuses,

Pour le coup, un rappel des fondamentaux de CSS, et notamment des sélecteurs, me semble nécessaire. Petite lecture qui va bien:
http://www.floatthatbox.com/articles/selecteurs-css-21-partie-1.php
(et la partie 2 tant qu'à faire)

En l'occurrence, ton code CSS ne marche pas car le sélecteur #image1 td ne correspond à aucun élément dans ta page.

Bonjour,

Merci pour l'adresse, je vais la consulter et la mets en favoris.

Pour mon code, ça fonctionne bien, (petit moment de bonheur quand on parvient enfin à ses fins

En attribuant une id à chaque balise td, (en l'occurence #image ), puis #image:hover{autre image}, ça fonctionne bien et tout est valide W3C


Merci beaucoup pour ta patience,