A:hover et le remplacement des images

salut
j'ai une petite question:

je veux au passage de la souris sur une image changer une autre image .est ce que c'est possible ?

exemple:
------------------------------------------------------

<div id="haut ">
<img src="image de haut" />
</div>
<div id="bas ">
<a href="#"><img src="image1" /></a>
<a href="#"><img src="image2" /></a>
<a href="#"><img src="image3" /></a>
</div>

je souhaite qu'au passage de la souris sur :
-image 1 : l'image de haut se replace par l'image1
-image 2 : l'image de haut se replace par l'image2
-image 3 : l'image de haut se replace par l'image3

merci
Modifié par adimou (18 Aug 2008 - 00:58)

Tu ne peux pas modifier l'attribut src avec CSS, mais par contre tu peux modifier l'image de fond avec

div:hover
{
background-image:url('image.png');
}

Sinon, il faut utiliser Javascript

Salut,

Comme la dit superjun tu peux utiliser Javascript pour faire cela.

<div id="haut ">
<img id="img_haut" src="image de haut" />
</div>

<div id="bas ">
<a href="#"><img src="image1" OnMouseOver="document.getElementById('img_haut').src='image1'" /></a>
<a href="#"><img src="image2" OnMouseOver="document.getElementById('img_haut').src='image2'" /></a>
<a href="#"><img src="image3" OnMouseOver="document.getElementById('img_haut').src='image1'" /></a>
</div>

Voila se bout de code devrait normalement fonctionner. Bien entendu il faut ne pas pas que l'utilisateur desactive Javascript.

Sinon en ce qui concerne le fonctionne, j'ai rajouté à l'image du haut un id (img_haut). De cette maniere on pourra le designer avec getElementById de javascript. Tous cela associé avec l'évenement OnMouseOver qui se produit lorsque la souris passe sur l'image.

voila ++

PS : attention si tu est en XHTML Strict veille bien a mettre tout en minusculte (onmouseover).

Merci pour les réponses.

Mais j'ai réussi à faire ce que je veux (sans js) par css seulement avec a:hover.

Voilà ce que j'ai fait:
Je vous donne la solution pour une seule image,et comme j'utilise php dans mon site j'ai fait un petit boucle et ça roule.

<a href='#'>
   <div id='bas'>
       <img src='image1' />
   </div>
      <span class="haut">
        <img src='image1'>
     </span>
</a>

explication :
l'image1 dans le div est positonner en bas (ou tu veux )
l'image1 dans le span est elle qui va être :
*initialement cacher par display:none
*au survole de la souris (a:hover) je positionne l'image en haut avec(position:absolute).

et le tour est joué.
j'ai testé cela sur mon local avec ie et firefox est ça marche.

Cette solution fonctionne effectivement, mais attention toutefois à ne pas placer de div dans un lien a. En effet on ne peut pas placer d'éléments de type block dans un élément de type inline. Ce code n'est donc pas valide. A la place du div, tu peux utiliser un span.

Merci bien ZaX.c'est fait j'ai remplacé div par span.

Hello,

Tu peux aussi n'utiliser qu'une seule balise (le <a>) et une seule image de fond (qui contient tes deux images, l'une en dessous de l'autre) et changer le background-position: au survol pour passer de l'un à l'autre.

Ca te fera un code plus clair et un appel de moins sur le serveur.

Euh juste une question comme ça les images ne sont pas juste décoratives ?

Donc 2 solutions :
- balise "img" avec l'attribut alt correctement renseigné et modification de la source de l'image par Javascript ;
- texte avec background-image et changement de position au survol (technique des sprites donnée par Tymlis).

Et non le Javascript ça pue pas des pieds et non les CSS c'est pas forcément mieux hein ...

La vérité est que l'essai au maximum d'éviter js. je ne connais rien,et je sais que un petit arrêt js dans mon navigateur et les sorties seront

bon ,merci comme même pour les conseils