[Javascript] Fade ...

Discussion dans 'Web, design' créé par SkYlEsS, 30 Avril 2007.

Statut de la discussion:
Fermée.
  1. Offline
    SkYlEsS Kawai
    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>
    SkYlEsS, 30 Avril 2007
    #1
  2. Offline
    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.
    Tifox, 30 Avril 2007
    #2
  3. Offline
    SkYlEsS Kawai
    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:
    SkYlEsS, 30 Avril 2007
    #3
  4. Offline
    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 ?
    Tifox, 30 Avril 2007
    #4
  5. Offline
    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 :)
    Ezekiel !, 1 Mai 2007
    #5
  6. Offline
    SkYlEsS Kawai
    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: :-(
    SkYlEsS, 1 Mai 2007
    #6
Statut de la discussion:
Fermée.