Agrandissement d'une photo lors d'un passage souris

19 mai 2007, 13:11

Bonjour,

Je souhaiterai savoir comme faire la fonction suivante en XHTML (CSS) :
Lorsque je passe la souris sur une photo, celle-ci apparait dans un cadre à coté en plus grand et disparait lorsque j'enlève la souris.

Merci

19 mai 2007, 13:33

il va falloir jouer avec javascript (tu pourrais éventuellement essayer uniquement en css, mais si jamais tu y parvient pour firefox ou opera, se sera la croix et la bannière pour faire fonctionner le tout sous ie).
Tu peux ajouter sur chaque photo un évennement onmouseover, et indiquer ainsi qu'il faut changer l'url de la photo en grand, un eptit exemple:

<div><!-- petites photos -->
<img onmouseover="affiche('photo1_maxi.jpg',this.alt)" onmouseout="stripphoto()" src="photo1_mini.jpg" alt="photo1" />
<img onmouseover="affiche('photo2_maxi.jpg',this.alt)" onmouseout="stripphoto()" src="photo2_mini.jpg" alt="photo2" />
<img onmouseover="affiche('photo3_maxi.jpg',this.alt)" onmouseout="stripphoto()" src="photo3_mini.jpg" alt="photo3" />
</div>

<div><!-- photo en grand -->
<img id="photo_maxi" src="transparent.gif" alt="nothing here" />
<p id="titre_photo_maxi"></p>
</div>

et les fonctions javascript correspondantes:

Code : Tout sélectionner

function affiche(url,titre){
    document.getElementByID('photo_maxi').src=url;
    document.getElementByID('titre_photo_maxi').innerHTML=titre;
}
function stripphoto(){
    document.getElementByID('photo_maxi').src='transparent.gif';
    document.getElementByID('titre_photo_maxi').innerHTML='';
}

voilà y a surement des bugs, j'ai écrit ça sans tester, mais l'idée est là...

fait en bon usage
Comprend, adapte...

Agrandissement d'une photo lors d'un passage souris

Qui est en ligne