par
jojolapine » 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...
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:[php]<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>[/php]et les fonctions javascript correspondantes:[code]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='';
}
[/code]
voilà y a surement des bugs, j'ai écrit ça sans tester, mais l'idée est là... ;-)
fait en bon usage
Comprend, adapte...
