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

**Bovino** · 16/09/2009, 13h31

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/.

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 !

**SpaceFrog** · 16/09/2009, 13h34

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 ...

**Bovino** · 16/09/2009, 14h15

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

**SpaceFrog** · 16/09/2009, 14h35

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

et pour le bg ?

**Bovino** · 17/09/2009, 16h42

Envoyé par SpaceFrog

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

oui, c'est ça !

et pour le bg ?

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

**'Dol'** · 18/09/2009, 11h06

Super merci,

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

**danielhagnoul** · 20/09/2009, 17h05

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**mermich** · 23/09/2009, 10h25

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.

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

jQuery

Discussions similaires

Partager

Partager