[Article] Effet de transition de couleur sur les liens avec jQuery

Salut,

Voici une traduction de l'article de Alen Grakalic "Fading color effect for inline text links using jQuery" :
http://cssglobe.developpez.com/tutor...ition-couleur/.

Citation:

Voici une astuce simple qui peut être facilement mise en application dans vos sites Web. Avec quelques lignes de code, jQuery fera la transition de la couleur de vos liens vers une autre au passage de la souris.

Merci de faire part de vos remarques concernant cette traduction ou de notifier d'éventuelles erreurs.

Bonne lecture !
:merci:

Intéressant.

je regrette toutefois les paramètrage limité de la vitesse et l'obligation d'utiliser un fond de la meme couleur que le fond de page

j'ai tenté transparent mais il le resultat est curieux ...

Citation:

Envoyé par SpaceFrog

je regrette toutefois les paramètrage limité de la vitesse

Non, en fait, il est indiqué comme valeurs "slow", "normal" et "fast" mais il s'agit en fait de l'argument des fonctions fadeIn et fadeOut, tu peux donc aussi mettre une valeur numérique ;)

=> si je mets une valeur numérique en ms c'est automatique ??

et pour le bg ?

Citation:

Envoyé par SpaceFrog

=> si je mets une valeur numérique en ms c'est automatique ??

oui, c'est ça !

Citation:

et pour le bg ?

Là malheureusement, il n'y a pas de solution à ma connaissance :(

Super merci,

Dommage qu'il "enregistre" chaque passage sur le lien mais sa change comme effet

Bonjour Bovino, félicitations pour la qualité de la traduction.

Concernant le fond de l'article, je suis dubitatif sur son utilité.

Il est tout à fait possible de colorer des liens et de modifier leur style en fonction des actions de l'utilisateur avec une simple feuille CSS. Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
        a {
            color: #0000FF;
        }
        a:link {
            text-decoration: none;
        }
        a:visited {
            text-decoration: none;
            color: #511A8B;
        }
        a:hover {
            text-decoration: underline;
            color: #007000;
        }
        a:active {
            background-color:#CCCCCC;
            border:1px solid #CCCCCC;
            text-decoration: none;
            color: #FF0000;
        }
    </style>
</head>
<body>
    <div id="conteneur">
        <a href="#" style="font-size:2em;">Un lien qui change de couleur</a>
    </div>
</body>
</html>

De même, animate() et jquery-colorAnimations.js permettent de jouer avec les couleurs. Exemple :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <style type="text/css">
        body {
            background-color:#696969;
            color:#000000;
            font-family:Arial, Helvetica, sans-serif;
            font-size:medium;
            font-style:normal;
            font-weight:normal;
            line-height:normal;
            letter-spacing:normal;
        }
        h1,h2,h3,h4,h5 {
            font-family:"Times New Roman", Times, serif;
        }
        div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {
            margin:0px;
            padding:0px;
        }
        p {
            padding:6px;
        }
        ul,ol,dl {
            list-style:none;
            padding-left:6px;
            padding-top:6px;
        }
        li {
            padding-bottom:6px;
        }
        div#conteneur {
            width:95%;
            margin:12px auto;
            padding:6px;
            background-color:#FFFFFF;
            color:#000000;
            border:1px solid #666666;
            font-size:0.8em;
        }
    </style>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="../lib/jquery-colorAnimations.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
            $("a").mouseenter(function(){
                $(this).animate({color: "red", backgroundColor: "#CCCCCC"}, 2000);
            });
 
            $("a").mouseleave(function(){
                $(this).animate({color: "blue", backgroundColor: "#FFFFFF"}, 2000);
            });
        });
    </script>
</head>
<body>
    <div id="conteneur">
        <a href="#" style="font-size:2em;">Un lien qui change de couleur</a>
    </div>
</body>
</html>

Ne marche pas sous ie8

Salut,

Très bon article sauf que ce ne marche pas sous ie8 à part en mode compatitbilité. Le lien apparaint en bleu sous le lien orange.