Balise HTML pour liens "fondus"

[Salimax]

En me baladant sur le site LeSottisier.com, j'ai beaucoup aprécié les liens avec un effet fondu quand la souris passe dessus.

Je voudrais donc savoir si s'il s'agit d'une balse HTML ou de JavaScript ?

Et laquelle ?

Merci

[Fab23]

Ouai c'est pas mal !

Il y a un peu des deux !

Regarde:

Et il y a pas que ça, y a même des CSS...

[Salimax]

Merci !

[JohnSmith]

Le problème de ce genre d'effets, c'est de réussir à les rendre compatibles avec les navigateurs les plus utilisés. Déjà que pour des mises en formes assez basiques ca n'est pas toujours évident !

En l'occurence, l'effet dont tu parles sur LeSottisier.com fonctionne bien sur Internet Explorer 5, mais pas sur FireFox 1.0.7, ni sur Opera 7.

[jpriton]

Oui malheureusement, Microsoft a pondu de magnifiques filtres dynamiques de l'objet style qui ne sont supportés que par son navigateur

Voir tous ces filtres sur MSDN:

Les filtres IE

[Fab23]

Le problème de ce genre d'effets, c'est de réussir à les rendre compatibles avec les navigateurs les plus utilisés. Déjà que pour des mises en formes assez basiques ca n'est pas toujours évident !

En l'occurence, l'effet dont tu parles sur LeSottisier.com fonctionne bien sur Internet Explorer 5, mais pas sur FireFox 1.0.7, ni sur Opera 7.

Ah oui! Moi j'utilise FireFox, j'avais pas remarqué que c'était comme ça sous IE... Pour un fois qu'il y a qqch qui fonctionne mieux...

[Salimax]

Bine moi je les vois parfaitement avec Firefox ...

[ggbce]

Regarde un peu le code source de la page, tu auras ta réponse...

class="menufade"

C'est dans son stylesheet CSS... ou dans le JS, qui se nomme <link rel="stylesheet" href="style.css" type="text/css">, mais il y a plus de chance que ce soit celui-ci <script src="fade.js" language="Javascript"></script>

Maintenant, il ne te reste qu'à taper l'adresse de son site web + le nom du fichier en question et tu auras ta résponse.

Donc: http://lesottisier.com/style.css qui contient:

@charset "iso-8859-1";
body {
font-family: Arial, sans-serif;
font-size: 12px;
COLOR:#00C2FF;
background-color: #C8F7FF;
}

table.cadre {border:1px solid #00C2FF; border-collapse:collapse;}

td {font-family: Arial, sans-serif; font-size:12px;}

a {color:#FD8E01; text-decoration: none;}
a:hover {color:#FD8E01; text-decoration: none;}

a.menufade {color:#FFD197; text-decoration: none; font-size: 11px; font-weight: bold; }
a.menufade:hover {color:white; text-decoration: none; font-size: 11px; font-weight: bold;}

.t {font-variant: small-caps; font-weight: bold;}
.t2 {color:#FD8E01; font-size: 14px; font-weight: bold;}
.s {font-size: 10px;}


INPUT.none {
background-color: #C8F7FF;
font-size: 11px;
font-family: Arial,sans-serif;
font-weight: 100;
border: 0;
}

INPUT {
background-color: #A9F2FF;
font-size: 12px;
font-family: Arial,sans-serif;
font-weight: 100;
color: #FD8E01;
border: 1 solid #00C2FF;
}

SELECT {
background-color: #C8F7FF;
font-size: 12px;
font-family: Arial,sans-serif;
font-weight: 100;
color: #FD8E01;
border: 1 solid #00C2FF;
}

TEXTAREA {
background-color: #A9F2FF;
font-size: 12px;
font-family: Arial,sans-serif;
font-weight: 100;
color: #FD8E01;
border: 1 solid #2ACCFF;
}

et http://lesottisier.com/fade.js :

if(!window.JSFX)JSFX=new Object();

var LinkFadeInStep=20;
var LinkFadeOutStep=15;
var LinkEndColor="FFFFFF"

var LinkStartColor="FFD197";
var LinkFadeRunning=false;

document.onmouseover = theOnOver;
document.onmouseout  = theOnOut;
if(document.captureEvents)
   document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);


function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);} 
function getColor(start, end, percent)
{

var r1=hex2dec(start.slice(0,2));
var g1=hex2dec(start.slice(2,4));
var b1=hex2dec(start.slice(4,6));
var r2=hex2dec(end.slice(0,2));
var g2=hex2dec(end.slice(2,4));
var b2=hex2dec(end.slice(4,6));

var pc=percent/100;

var r=Math.floor(r1+(pc*(r2-r1)) + .5);
var g=Math.floor(g1+(pc*(g2-g1)) + .5);
var b=Math.floor(b1+(pc*(b2-b1)) + .5);

return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/************************************************/
JSFX.getCurrentElementColor = function(el) 
{ 
var result = LinkStartColor;

if (el.currentStyle) 
 result = (el.currentStyle.color); 
else if (document.defaultView) 
 result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
else if(el.style.color) //Opera
 result = el.style.color;

if(result.charAt(0) == "#")      //color is of type #rrggbb
 result = result.slice(1, 8);
else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)
{
 var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );
 var v2 = v1.split(",");
 result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
}

return result;
} 
JSFX.findTagIE = function(el)
{
     while (el && el.tagName != 'A')
           el = el.parentElement;
return(el);
}
JSFX.findTagNS= function(el)
{
     while (el && el.nodeName != 'A')
           el = el.parentNode;
return(el);
}
function theOnOver(e)
{
var lnk;
if(window.event)
 lnk=JSFX.findTagIE(event.srcElement);
else
 lnk=JSFX.findTagNS(e.target);

if(lnk)
 JSFX.linkFadeUp(lnk);
}
JSFX.linkFadeUp = function(lnk)
{
if(lnk.state == null)
{
 lnk.state = "OFF";
 lnk.index = 0;
 lnk.startColor = JSFX.getCurrentElementColor(lnk);
 lnk.endColor = LinkEndColor;
}

if(lnk.state == "OFF")
{
 lnk.state = "FADE_UP";
 JSFX.startLinkFader();
}
else if( lnk.state == "FADE_UP_DOWN"
 || lnk.state == "FADE_DOWN")
{
 lnk.state = "FADE_UP";
}
}
function theOnOut(e)
{
var lnk;
if(window.event)
 lnk=JSFX.findTagIE(event.srcElement);
else
 lnk=JSFX.findTagNS(e.target);

if(lnk)
 JSFX.linkFadeDown(lnk);
}
JSFX.linkFadeDown = function(lnk)
{
if(lnk.state=="ON")
{
 lnk.state="FADE_DOWN";
 JSFX.startLinkFader();
}
else if(lnk.state == "FADE_UP")
{
 lnk.state="FADE_UP_DOWN";
}
}
JSFX.startLinkFader = function()
{
if(!LinkFadeRunning)
 JSFX.LinkFadeAnimation();
}

JSFX.LinkFadeAnimation = function()
{
LinkFadeRunning = false;
for(i=0; i<document.links.length; i++)
{
 var lnk = document.links[i];
 if(lnk.state)
 {
 	if(lnk.state == "FADE_UP")
 	{
   lnk.index+=LinkFadeInStep;
   if(lnk.index > 100)
   	lnk.index = 100;
   lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

   if(lnk.index == 100)
   	lnk.state="ON";
   else
   	LinkFadeRunning = true;
 	}
 	else if(lnk.state == "FADE_UP_DOWN")
 	{
   lnk.index+=LinkFadeOutStep;
   if(lnk.index>100)
   	lnk.index = 100;
   lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

   if(lnk.index == 100)
   	lnk.state="FADE_DOWN";
   LinkFadeRunning = true;
 	}
 	else if(lnk.state == "FADE_DOWN")
 	{
   lnk.index-=LinkFadeOutStep;
   if(lnk.index<0)
   	lnk.index = 0;
   lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

   if(lnk.index == 0)
   	lnk.state="OFF";
   else
   	LinkFadeRunning = true;
 	}
 }
}

if(LinkFadeRunning)
 setTimeout("JSFX.LinkFadeAnimation()", 40);
}