Exercice
Exercice 1: album photo
On souhaite créer un album photo qui s’exécute automatiquement et dont les images s'affichent progressivement en passant de la transparence à l'opacité. Le résultat final ressemblera à ceci:
Solution
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<style>
.clImage{
opacity:0;
filter:alpha(opacity=0);
}
</style>
<script language="javascript">
image=new Array("courshtml.png","courshtml5.png","courscss.png","coursjavascript.png");
im=0;
op=0;
sop="cr";
function album(){
setTimeout("album()",20);
document.getElementById("idImage").src="cours/"+image[im%4];
try{
document.getElementById("idImage").filters.alpha.opacity=op*100;
}
catch(e){
document.getElementById("idImage").style.opacity=op;
}
if(sop=="cr"){
op+=0.02;
if(op>2)
sop="dcr";
}
if(sop=="dcr"){
op-=0.02;
if(op<=0){
sop="cr";
im+=1;
}
}
}
</script>
</head>
<body onLoad="album()">
<center>
<img src="cours/courshtml.png" id="idImage" class="clImage" />
</center>
</body>
</html>
Vous pouvez voir un exemple plus avancé d'album photo ici:
Création d'un album photo en Javascript dont les transitions reproduisent l'effet de vagues (ou domino).