[Javascript] Fade ...

Statut
N'est pas ouverte pour d'autres réponses.
SkYlEsS

SkYlEsS

Elite
Au cas où, quelqu'un n'aurait pas un script pour un fondu sur image au passage de la souris ? :)

Sinon, j'n'comprends pas pourquoi ce script ne fonctionne pas :

Code: 
<html>
<head>
<script language="JavaScript">
var userAgent = navigator.userAgent.toLowerCase();
var is_opera  = (userAgent.indexOf('opera') != -1);
var is_saf    = ((userAgent.indexOf('applewebkit') != -1) || (navigator.vendor == "Apple Computer, Inc."));
var is_webtv  = (userAgent.indexOf('webtv') != -1);
var is_ie     = ((userAgent.indexOf('msie') != -1) && (!is_opera) && (!is_saf) && (!is_webtv));
var is_moz    = ((navigator.product == 'Gecko') && (!is_saf));
var is_kon    = (userAgent.indexOf('konqueror') != -1);

function fadeOn(element)
{
	fade(element, 100, 'true');
} 

function fadeOff(element){ 
	fade(element, 40, 'false');
} 

function fade(image, max, sens)
{
	if(sens)
	{
		if(is_ie)
		{
			if (image.filters.alpha.opacity < max)
			{
				image.filters.alpha.opacity++;
				setTimeout("fade(image, max, sens)",80);
			}
			else
			{
				clearTimeout("fade(image, max, sens)");
			}
		}
		else if (is_moz)
		{
			i = parseFloat(objet.style.getPropertyValue("-moz-opacity"));
			i += parseFloat(0.1);
			objet.style.setProperty("-moz-opacity", i, "");
			
			if (i >= 1)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
		else if(is_kon)
		{
			i = parseFloat(objet.style.getPropertyValue("-khtml-opacity"));
			i += parseFloat(0.1);
			objet.style.setProperty("-khtml-opacity", i, "");
			
			if (i >= 1)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
		else
		{
			i = parseFloat(objet.style.getPropertyValue("opacity"));
			i += parseFloat(0.1);
			objet.style.setProperty("opacity", i, "");
				
			if (i >= 1)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
	}
	else
	{
		if(is_ie)
		{
			if (image.filters.alpha.opacity > max)
			{
				image.filters.alpha.opacity--;
				setTimeout("fade(image, max, sens)",0.1);
			}
			else
			{
				clearTimeout("fade(image, max, sens)");
			}
		}
		else if (is_moz)
		{
			i = parseFloat(objet.style.getPropertyValue("-moz-opacity"));
			i -= parseFloat(0.1);
			objet.style.setProperty("-moz-opacity", i, "");
			
			if (i <= 0.5)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
		else if(is_kon)
		{
			i = parseFloat(objet.style.getPropertyValue("-khtml-opacity"));
			i -= parseFloat(0.1);
			objet.style.setProperty("-khtml-opacity", i, "");
			
			if (i <= 0.5)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
		else
		{
			i = parseFloat(objet.style.getPropertyValue("opacity"));
			i -= parseFloat(0.1);
			objet.style.setProperty("opacity", i, "");
				
			if (i <= 0.5)
			{
				clearTimeout("fade(image, max, sens)");
			}
			else
			{
				setTimeout("fade(image, max, sens)",80);
			}
		}
	}
}

</script>
</head>
<body>
<img src="http://www.script-masters.com/home/graphisme/logo_175x100.jpg" id="img" border="0" style="filter:alpha(opacity=40); -moz-opacity: 0.5; -khtml-opacity: 0.5; opacity: 0.5;" onmouseover="fadeOn(this);" onmouseout="fadeOff(this);" /> 
</body>
</html>
 
Tifox

Tifox

ou pas
Par expérience, je n'utilise plus le this pour passer un objet de la page HTML comme attribut, car le comportement diffère en fonction de l'objet HTML et en fonction du browser.
J'assigne plutot un id a l'objet html, je passe cet id comme paramètre à la fonction et je récupère l'objet dans la fonction avec un "getElementById.
 
1er
OP
SkYlEsS

SkYlEsS

Elite
Sauf que j'ai besoin d'assigner cette fonction à n'importe quelle image sur une même page donc on peut oublier l'id. On onblie le getElementByTag puisque toutes les images ne doivent pas renvoyer à cette fonction ...

'reste getElementByClassName qui m'échappe aussi :roll:
 
Tifox

Tifox

ou pas
Je vais peut-être me tromper, mais le getElementByClassName n'existe pas par default en javascript, c'est une méthode donnée par certaines librairie javascript. De ce que j'en sais, tu donnes comme paramètre à la méthode une chaine de caractères qui est une classe CSS, et ça va te retourner un tableau contenant tout les élément HTML qui utilise directement cette classe CSS.

Maintenant, pour le problème du passage de l'id, tu ne sais pas te débrouiller a un moment pour un donner un ? J'imagine que lors de la crétionde ta page (en php ?), tu dois bien avoir a un moment le nom du fichier image afin de le mettre dans l'attribut src d'une balise img (ou dans un autre attribut d'une autre balise). Dans ce cas, pourquoi ne pas mettre aussi ce nom d'image dans un attribut id de la même balise ?
 
Ezekiel !

Ezekiel !

Elite
Go ici : http://script.aculo.us/
Tu dl la librairie. Et apres tu fais un bête
new Effect.Fade ('iddetonimage', {option});
dans option tu peux mettre des trucs du style delay: 1 (pour le delai à 1 sec), duration: 1 (pour une durée de 1 sec), et t'as toute la doc sur le site web...
En plus avec script aculo t'as plein d'autres effets :)
 
1er
OP
SkYlEsS

SkYlEsS

Elite
Je sais, je connais et j'n'ai même pas pensé à aller vérifier s'il y avait cet effet ... :0)

Autant pour moi, si j'y trouve mon bonheur.

Mais mon code reste un mystère sur son non fonctionnement :eek: et ça ça m'iinervé :pfrt: :-(
 
Statut
N'est pas ouverte pour d'autres réponses.
Haut