Diapo en fondu enchaine

Télécharger le projet
Commenter

Description

diapo en fondu enchaine c'est exactement sa des image qui s'enchaine avec un effet de fondu il y a quatre script un par selectione de l'image avec la sourie un autre avec bouton marche arret un avec marche arret au passage de la sourie et le dernier automatique les script peuvent paraitre cour mais il sont efficaces et simple a mettre en oeuvre compatible ie ff safa opera chrome et aussi IE 7 et 8 beta 2. afin d'optimise l'afichage il peut etre interressant d'ajouter un prechargement d'image

Source / Exemple : 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html <html xmlns="http://www.w3.org/1999/xhtml">
<head> 
<script>
var oxo=1;
var opaa=0;
var opab=100;
function defilmage(selimage){
if(oxo==1){
opaa=30;
document.getElementById('divimageb').src=selimage+".jpg";
oxo=0;
}
imacibleb=document.getElementById('divimagea');
imaciblea=document.getElementById('divimageb');
if(imacibleb.src==imaciblea.src){
return false;
}
opaa+=5;
opab-=10;
if(document.all && !window.opera){ 
imaciblea.style.filter = 'alpha(opacity=' + opaa + ');' ;
imacibleb.style.filter = 'alpha(opacity=' + opab + ');';
} 
else{ 
imaciblea.style.opacity = opaa/100;
imacibleb.style.opacity = opab/100;
}
if(opaa>=100){
opaa=30;
opab=100;
document.getElementById('divimagea').src=document.getElementById('divimageb').src
return false;
}
setTimeout("defilmage()",25);
}
</script>
</head>
<body>
<div id="divconteneur"STYLE="position:absolute;top:150px;left:50px;">
<img id='divimagea' src="1.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:100;FILTER:alpha(opacity=100)">
<img id='divimageb' src="3.jpg" STYLE="position:absolute;width:15em;height:15em;opacity:0;FILTER:alpha(opacity=0)">
</div>
<img src="1.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('1')">
<img src="3.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('3')">
<img src="4.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('4')">
<img src="5.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('5')">
<img src="6.jpg" STYLE="width:7em;height:7em;" onmouseover="oxo=1;defilmage('6')">
</body>
</html>

Conclusion :


ca marche CA MAAAAAAACHE
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (@karamel)