Fondu d'image

Commenter

Contenu du snippet

petit code tout simple permettant un fondu d'image...

mettre juste un id sur l'image ("imageID")

passer la souris sur l'image pour faire apparaitre et cliquez pour faire disparaitre l'image en fondu

pour plus d'information voici un exemple utilisé pour le site que je m'occupe :

http://www.cordonweb.com/societe/carte_dinan.php

Source / Exemple : 


<html>
<head>
<script language="javascript">
function visible(){
	vitesseIE=20;
	vitesseFF=60;
	if(document.getElementById)	{
		cur=document.getElementById("imageID");

		if(document.all){
			cur.filters.alpha.opacity++;
			if (cur.filters.alpha.opacity==100)
				return;
			else 
				setTimeout("visible()",vitesseIE);

		}
		else{
			i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
			i+=parseFloat(0.1);
			cur.style.setProperty("-moz-opacity", i, "");
			if (i>=1)
				return;
			else 
				setTimeout("visible()",vitesseFF);
		}
	}
}
function invisible(){
	vitesseIE=20;
	vitesseFF=60;
	if(document.getElementById)	{
		cur=document.getElementById("imageID");

		if(document.all){
			cur.filters.alpha.opacity--;
			if (cur.filters.alpha.opacity==0)
				return;
			else 
				setTimeout("invisible()",vitesseIE);

		}
		else{
			i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
			i-=parseFloat(0.1);
			cur.style.setProperty("-moz-opacity", i, "");
			if (i<=0)
				return;
			else 
				setTimeout("invisible()",vitesseFF);
		}
	}
}
</script>
</head>
<body>
<IMG id="imageID" SRC="http://www.javascriptfr.com/gfx/logos/logojs.gif" BORDER=0 WIDTH=109 HEIGHT=63 style="filter:alpha(opacity=100); -moz-opacity: 1;" onMouseover="visible()" onClick="invisible()">
</body>

Conclusion :


exemple : http://www.cordonweb.com/societe/carte_dinan.php

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.