[Résolu] Image réactive

profilm

4 Aug 2005 à 14:30

Salut à tous

Je veux faire une image réactive (mais pas sur un lien, simplement sur une image en background, tu passe la souris, c'est une autre image).

J'ai trouvé des tuto sur les images réctives/liens mis rien sur image / image sans lien. Comme j'ai pas trop le temps, y a quelqu'un qui sait ou trouver un tuto ?

Merci d'avance Smiley cligne

Thierry
Modifié par profilm (04 Aug 2005 - 19:04)

Rea

4 Aug 2005 à 15:46

C'est assez simple avec l'utilisation de la pseudo-class "hover" mais seuls les Gecko (Mozilla, Firefox, Camino), Presto (Opera) et KHTML (Safari, Konqueror) l'afficheront pour un élément autre que 'a'. Un hack (au niveau CSS il n'est pas inclu dans la structure HTML) est possible pour les versions Trident utilisées par MS Internet Explorer mais cela vaut-il vraiment le coup ?


CSS : 

#image-reactive { background: url(image1.png); width: 100px; height: 100px; }
#image-reactive:hover {  background: url(image2.png); width: 100px; height: 100px; }


HTML :

<body>

<div id="image-reactive"></div>

</body>

l'image a ici une dimension de 100px*100px Smiley smile

PS : Gecko, Presto, KHTML et Trident sont des moteurs de rendu HTML qui intérpretent les langages HTML et CSS entre autres qui servent aux navigateurs à afficher une page Web. Smiley smile

Modifié par Rea (04 Aug 2005 - 15:46)

profilm

4 Aug 2005 à 16:20

Merci à toi rea, tu me permet de gagner pas mal de temps ..

Et, sans méchanceté, tant pis pour ceux qui utilisent encore MSIE, il ne verront qu'une image (certes, ils sont encore 80 % .. Smiley langue

).

Thierry