Soyez le premier à donner votre avis sur cette source.
Vue 52 249 fois - Téléchargée 5 126 fois
<HTML> <HEAD> <TITLE>Fondu de plusieurs images</TITLE> <!-- On déclare le code source --> <SCRIPT LANGUAGE="JavaScript"> <!-- // mettre un minimum de 4 images !!! var coef = 0.05 ; // avancement de l'opacité var temps = 50 ; // temps entre chaque changement d'opacité var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images var nombre_image = 5 ; // nombre d'images a faire bouger var prefix_image = 'gfx/'; // chemin + prefix du nom des images var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images // pas touche var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ; var img1 = null; var img2 = null ; var sens = 1; var tabImg; // tab contenant les images function prechargerImg(){ tabImg = new Array(nombre_image); for (i=0; i<=nombre_image -1; i++){ tabImg[i]=new Image(); tabImg[i].src = prefix_image+(i+1)+suffix_image; } } function init() { img1 = document.getElementById("defilement1") ; img2 = document.getElementById("defilement2") ; prechargerImg(); change_opacity(); } function change_opacity() { var opacity1 = 0 ; var opacity2 = 0 ; if (isIE) // for IE { opacity1 = parseFloat(img1.filters.alpha.opacity); opacity2 = parseFloat(img2.filters.alpha.opacity); } else // for mozilla { opacity1 = parseFloat(img1.style.MozOpacity); opacity2 = parseFloat(img2.style.MozOpacity); } if (sens) { if (isIE) // for IE { img1.filters.alpha.opacity = opacity1 + coef * 100; img2.filters.alpha.opacity = opacity2 - coef * 100; } else // for Mozilla { img1.style.MozOpacity = opacity1 + coef; img2.style.MozOpacity = opacity2 - coef; } } else { if (isIE) // for IE { img1.filters.alpha.opacity = opacity1 - coef * 100; img2.filters.alpha.opacity = opacity2 + coef * 100; } else // for Mozilla { img1.style.MozOpacity = opacity1 - coef; img2.style.MozOpacity = opacity2 + coef; } } if (isIE) // for IE { opacity1 = parseFloat(img1.filters.alpha.opacity); opacity2 = parseFloat(img2.filters.alpha.opacity); } else // for mozilla { opacity1 = parseFloat(img1.style.MozOpacity); opacity2 = parseFloat(img2.style.MozOpacity); } // on fait varié le sens d'opacité du bazar if (opacity2 <= 0) { img2.src=tabImg[indice++].src; sens = 0; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity()",temps_pause) ; // attente return 0; } else if (opacity1 <= 0) { img1.src=tabImg[indice++].src; sens = 1; if (indice == (tabImg.length)) indice=0; window.setTimeout("change_opacity()",temps_pause) ; // attente return 0; } window.setTimeout("change_opacity()",temps) ; // recursion toutes les x millisec } --> </SCRIPT> </HEAD> <!-- On charge le script et les images --> <BODY onload="init();"> <!-- Premiere image id=defilement1 --> <img id="defilement1" src="gfx/1.jpg" style="-moz-opacity:0;filter:alpha(opacity=0);margin-bottom:10px;"> <!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère pour qu'elles se superposent /!\ --> <img id="defilement2" src="gfx/2.jpg" style="-moz-opacity:1;filter:alpha(opacity=100);position:relative;top:-10px;left:-174px;"> </BODY> </HTML>
1 août 2006 à 10:15
1 août 2006 à 10:51
1 août 2006 à 22:34
Kenavo
2 déc. 2009 à 12:08
En utilisant l'astuce de Tina13, j'arrivais à un bon résultat sur FF mais pas sur IE6, du coup j'ai combiné avec un float:right; affecté aux deux images et chez moi ça a l'air de marcher mais j'ai pas testé avec tous les navigateurs.
8 déc. 2009 à 11:05
Malheureusement je n'arrive pas à le faire le faire fonctionner. il n'ya pas de défilement:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Desmotscrasseux</title>
<link rel="stylesheet" type="text/css" href="design/design.css" />
<script LANGUAGE="JavaScript">// mettre un minimum de 4 images !!!
var coef = 0.05 ; // avancement de l'opacité
var temps = 50 ; // temps entre chaque changement d'opacité
var temps_pause = 2000 ; // temps d'attente entre 2 changements d'images
var nombre_image = 5 ; // nombre d'images a faire bouger
var prefix_image = 'gfx/'; // chemin + prefix du nom des images
var suffix_image = '.jpg' ; // suffix + '.extension' du nom des images
// pas touche
var indice = 2; // les 2 premiere image sont deja charger dans le HTML, on commence a la 3eme
var isIE = navigator.userAgent.toLowerCase().indexOf('msie')!=-1 ;
var img1 = null;
var img2 = null ;
var sens = 1;
var tabImg; // tab contenant les images
function prechargerImg(){
tabImg = new Array(nombre_image);
for (i=0; i<=nombre_image -1; i++){
tabImg[i]=new Image();
tabImg[i].src = prefix_image+(i+1)+suffix_image;
}
}
function init()
{
img1 = document.getElementById("defilement1") ;
img2 = document.getElementById("defilement2") ;
prechargerImg();
change_opacity();
}
function change_opacity()
{
var opacity1 = 0 ;
var opacity2 = 0 ;
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
if (sens)
{ if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 + coef * 100;
img2.filters.alpha.opacity = opacity2 - coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 + coef;
img2.style.MozOpacity = opacity2 - coef;
}
}
else
{
if (isIE) // for IE
{ img1.filters.alpha.opacity = opacity1 - coef * 100;
img2.filters.alpha.opacity = opacity2 + coef * 100;
}
else // for Mozilla
{ img1.style.MozOpacity = opacity1 - coef;
img2.style.MozOpacity = opacity2 + coef;
}
}
if (isIE) // for IE
{ opacity1 = parseFloat(img1.filters.alpha.opacity);
opacity2 = parseFloat(img2.filters.alpha.opacity);
}
else // for mozilla
{ opacity1 = parseFloat(img1.style.MozOpacity);
opacity2 = parseFloat(img2.style.MozOpacity);
}
// on fait varié le sens d'opacité du bazar
if (opacity2 <= 0)
{ img2.src=tabImg[indice++].src;
sens = 0;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
else if (opacity1 <= 0)
{ img1.src=tabImg[indice++].src;
sens = 1;
if (indice == (tabImg.length)) indice=0;
window.setTimeout("change_opacity()",temps_pause) ; // attente
return 0;
}
//window.status = "opa1 : " + img1.style.MozOpacity + " opa2 : " + img2.style.MozOpacity + " indice : "+indice;
window.setTimeout("change_opacity()",temps) ; // recursion toutes les 30 millisec
}
</script>
</head>
<!-- Premiere image id=defilement1 -->
<!-- Deuxieme image id=defilement2 /!\ positionnée RELATIVEMENT par rapport à la 1ère /!\ -->
et le CSS
.news_image
{
float: right;
margin-top: 40px;
width: 320px;
height: 230px;
background-color: none;
border-bottom: 2px dashed grey;
}
voila ce que çà donne :
http://www.desmotscrasseux.lautre.net/
merci de m'aider a+
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.