Fondu d'image

Soyez le premier à donner votre avis sur cette source.

Snippet vu 26 739 fois - Téléchargée 24 fois

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

Ajouter un commentaire

Commentaires

atiladiffusion
Messages postés
17
Date d'inscription
mardi 5 septembre 2006
Statut
Membre
Dernière intervention
10 février 2008
-
c'est trouvé
---------------

function visible(){
vitesseIE=1;
vitesseFF=60;
if(document.getElementById)	{
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity+=parseFloat(3);
if (cur.filters.alpha.opacity==100)
return;
else 
setTimeout("visible()",vitesseIE);

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

if(document.getElementById)	{
cur=document.getElementById("imageID");

if(document.all){
if (index=="1"){
cur.filters.alpha.opacity=100;
}
cur.filters.alpha.opacity-=parseFloat(3);
if (cur.filters.alpha.opacity==0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseIE);
}

}
else{ 
if (index=="1"){
cur.style.setProperty("-moz-opacity", 1, "");
cur.style.setProperty("opacity", 1, "");
}
i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));
i=parseFloat(cur.style.getPropertyValue("opacity"));
i-=parseFloat(0.1);
cur.style.setProperty("-moz-opacity", i, "");
cur.style.setProperty("opacity", i, "");
if (i<=0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseFF);

}
}
}
}
atiladiffusion
Messages postés
17
Date d'inscription
mardi 5 septembre 2006
Statut
Membre
Dernière intervention
10 février 2008
-
j'en suis là, mais ca marche toujours pas... sous mac=safari
-------------------------------------------

function visible(){
vitesseIE=1;
vitesseFF=60;
if(document.getElementById) {
cur=document.getElementById("imageID");
if(document.all){
cur.filters.alpha.opacity+=parseFloat(3);
if (cur.filters.alpha.opacity==100)
return;
else
setTimeout("visible()",vitesseIE);

}
else{
/*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
i+=parseFloat(0.1);
/*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", i, "");
if (i>=1)
return;
else
setTimeout("visible()",vitesseFF);
}
}
}
function invisible(index){
vitesseIE=1;
vitesseFF=60;

if(document.getElementById) {
cur=document.getElementById("imageID");

if(document.all){
if (index=="1"){
cur.filters.alpha.opacity=100;
}
cur.filters.alpha.opacity-=parseFloat(3);
if (cur.filters.alpha.opacity==0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseIE);
}

}
else{
if (index=="1"){
/*cur.style.setProperty("-moz-opacity", 1, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", 1, "");
}
/*i=parseFloat(cur.style.getPropertyValue("-moz-opacity"));test pour safari*/
i=parseFloat(cur.style.getPropertyValue("-khtml-opacity"));
i-=parseFloat(0.1);
/*cur.style.setProperty("-moz-opacity", i, "");test pour safari*/
cur.style.setProperty("-khtml-opacity", i, "");
if (i<=0){
document.getElementById("imageID").src=document.getElementById("imageID").src2;
visible();
return;
}
else {
setTimeout("invisible('0')",vitesseFF);

}
}
}
}

function afficher_image(index,image){
for (i=1;i<5;i++)
document.getElementById(i).src=img_non_select.src;
document.getElementById(index).src=img_select.src;

document.getElementById("imageID").src2=image;
if (navigator.appName=="Opera"){
document.getElementById("imageID").src=image;
}else{
invisible('1');
}

}

function plus(){
for (i=1;i<5;i++){
if (document.getElementById(i).src==img_select.src){
i++;
if (i<=4)
afficher_image(i,eval ("i"+i+".src"));
return;
}
}
}

function moins(){
for (i=1;i<5;i++){
if (document.getElementById(i).src==img_select.src){
i--;
if (i>=1)
afficher_image(i,eval ("i"+i+".src"));
return;
}
}
}
atiladiffusion
Messages postés
17
Date d'inscription
mardi 5 septembre 2006
Statut
Membre
Dernière intervention
10 février 2008
-
et sinon ya ca qui semble etre cohérent mais je ne sais pas le faire.
http://www.brainerror.net/scripts_js_blendtrans.php
De l'aide s'il vous plait
atiladiffusion
Messages postés
17
Date d'inscription
mardi 5 septembre 2006
Statut
Membre
Dernière intervention
10 février 2008
-
il faut peut etre se diriger vers ca...

function SetOpacity(elmt, opacity){

if(elmt.filters){

elmt.filters.alpha.opacity=opacity

}else{

elmt.style.setProperty("-moz-opacity", opacity/100, "");

elmt.style.setProperty("-khtml-opacity", opacity/100, "");

elmt.style.setProperty("opacity", opacity/100, "");

}
atiladiffusion
Messages postés
17
Date d'inscription
mardi 5 septembre 2006
Statut
Membre
Dernière intervention
10 février 2008
-
oui c 'est bien ca; le seul hic c'est que je fais un ptit site, et je dois présenter à mon client... qui est sous mac et pc! et moi je sais pas faire

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.