* * * * *

Abonnez-vous !

Innovablog, Le Web oĂą l’Innovation ordinaire : design, ergonomie, interfaces riches, web 2.0, eCommerce,…

  • A propos de l’auteur
  • Archives
  • Contacts
  • 11
    dĂ©c 07
    Catégorie : Design

    Design, CSS : les rollover CSS, un must !



    Les feuilles de style CSS (pour Cascading Style Sheets) sont un outil merveilleux pour tout crĂ©ateur web. Leur puissance est (presque) sans limite, dans le respect des standards du moins. J’initie une petite sĂ©rie (vous me direz encore une sĂ©rie !) sur les feuilles de style et leurs fondamentaux.

    Plus qu’une dĂ©finition qui n’aurait pas de sens, je tenterais de vous proposer quelques bonnes astuces Ă  connaĂ®tre qui pourront :

    • Vous faire gagner du temps dans le process de dĂ©veloppement. La phase de mise en forme reste toujours la plus longue Ă  finaliser dans un projet web.
    • Vous rendre donc plus productif.
    • Faire gagner du temps Ă  vos visiteurs / vos utilisateurs.

    Je vais dĂ©buter par une astuce de mise en forme : le rollover CSS. Il s’agit de faire rĂ©agir une zone en changeant son apparence au survol de la souris, le tout sans Javascript. Les CSS sont lĂ  pour nous aider. C’est une technique proposĂ©e depuis maintenant des annĂ©es mais très largement sous-utilisĂ©e.

    Exemple #1 : cahier des charges

    Dans ce premier exemple nous allons rĂ©aliser un jeu de deux bouton, alignĂ©s verticalement, qui possèderont le mĂŞme Ă©tat au repos mais afficheront une image personnalisĂ©e au survol. PrĂ©cisions : aucun Javascript ne devra ĂŞtre employĂ©. Adieu le onMouseover et autres onBlur…

    La base Html

    Nous appliquerons le style sur une base html très simple : une liste.

    <ul id="menu">
    
    <li id=”item1″><a href=”#”></a></li>
    
    <li id=”item2″><a href=”#”></a></li>
    
    </ul>
    • Par facilitĂ©, chaque Ă©lĂ©ment de liste se voit affectĂ© un identifiant Css (Id).
    • Cet ID pourrait se gĂ©nĂ©rer de façon automatique si l’on gĂ©nère par exemple le menu de façon dynamique, avec quelque chose du genre :
    <li id="item<?php echo $i; ?>">

    Le fichier image utilisé

    L’originalitĂ© de cette mĂ©thode est que l’on va utiliser un unique fichier image pour gĂ©rer les deux Ă©tats : normal et hover.

    Voici le fichier utilisé :

    • Dans cette image, le premier logo servira Ă  l’affichage au repos,
    • Les deux seconds permettront d’afficher les Ă©tats hover.
    • Chaque logo a une hauteur de 72 pixels, pour une image d’une hauteur totale de 216px.

    La mise en forme CSS

    ul#menu li a {
    
    display:block;
    
    width:266px;
    
    height:72px;
    
    background:url(’logo-innovablog-css-rollover.png’) no-repeat 0 0;
    
    border:1px solid #003F64;
    
    }
    • Un display:block permet d’affecter une largeur Ă  l’Ă©lĂ©ment.
    • Le background est appliquĂ© Ă  l’Ă©lĂ©ment anchor.
    • De plus il est appliquĂ© dans cet exemple Ă  un Ă©lĂ©ment commun aux boutons, puique leur affichage au repos sre identique.
    #item1 a:hover, #item2 a:hover {
    
    border:1px solid #F97;
    
    }
    • On matĂ©rialise une bordure de couleur diffĂ©rente sur le hover.
    #item1 a:hover {
    
    background:url('logo-innovablog-css-rollover.png') no-repeat 0 -72px;
    
    }
    
    #item2 a:hover {
    
    background:url(’logo-innovablog-css-rollover.png’) no-repeat 0 -144px;
    
    }
    • On applique Ă  chaque Ă©lĂ©ment de liste son comportement sur le survol.
    • Pour aller “chercher” le bon logo, on se dĂ©cale dans le fichier vers le bas par une marge nĂ©gative de -72 pixels (la largeur d’un logo).
    • De la mĂŞme façon pour l’affichage du second Ă©lĂ©ment, oĂą dans ce cas c’est de 72 x 2 = 144 pixels dont on se dĂ©cale du sommet.

    Le résultat est à voir ici.

    Exemple #2 : cahier des charges

    Nous chercherons toujours à créer un jeu de boutons sans Javascript. La seule différence résidera dans le positionnement des boutons qui sera horizontal.

    Fichier image utilisé

    • Avec cette seconde image, nous allons rĂ©aliser deux boutons diffĂ©rents aussi bien au repos que sur le hover,
    • Le premier bouton sera par exemple bleu et rose sur le hover, le second orange et vert sur le hover.
    • Chaque bouton a la mĂŞme dimension : 149 x 188 px.
    • L’image a une largeur totale de 752 px.

    La différence : la feuille de style

    ul#menu2 {margin:0;padding:0;list-style-type:none;
    
    position: relative;
    
    }
    • Notez ici la position relative du conteneur principal. C’est grâce Ă  celĂ  que l’on va pouvoir positionner horizontalement nos boutons.
    ul#menu2 li {
    
    margin:0 0 5px 0;
    
    padding:0;
    
    position: absolute;
    
    top:0;
    
    }
    • Toujours pour notre positionnement horizontal, les Ă©lĂ©ments de liste auront un positionnement absolut.
    #itemA {
    
    left:0;
    
    width:188px;
    
    }
    
    #itemB {
    
    left:208px;
    
    width:188px;
    
    }
    • Chaque item est positionnĂ© via l’attribut left, le top Ă©tant implicitement Ă  0.
    ul#menu2 li a {
    
    display:block;
    
    width:188px;
    
    height:149px;
    
    }
    • Le display:block permet comme dans l’exemple n°1 de dimensionner l’Ă©lĂ©ment.
    #itemA a {
    
    background:url('logo-innovablog-crea-css-rollover.png') no-repeat 0 0;
    
    }
    
    #itemA a:hover {
    
    background:url(’logo-innovablog-crea-css-rollover.png’) no-repeat -376px 0;
    
    }
    • Pour l’item A, qui sera bleu, la position top:0px left:0px est indiquĂ©e, le picto bleu Ă©tant le premier de l’image.
    • Pour rĂ©cupĂ©rer le hover qui sera rose et donc en troisième position, il faudra se dĂ©caler de 188 x 2 = 376 px.
    #itemB a {
    
    background:url('logo-innovablog-crea-css-rollover.png') no-repeat -188px 0;
    
    }
    
    #itemB a:hover {
    
    background:url('logo-innovablog-crea-css-rollover.png') no-repeat -564px 0;
    
    }

    Le résultat est à voir ici.

    Les avantages

    • AccessibilitĂ© : on rĂ©ussi donc via cette technique Ă  se passer de Javascript. C’est le principal avantage. On y gagne donc directement en accessibilitĂ©.
    • SimplicitĂ© : pourquoi faire en deux images ce que l’on peut faire en une ?
    • PrĂ©chargement inutile : on Ă©vite ainsi tout mĂ©canisme de mise en cache de l’image et de prĂ©chargement. C’est un appel Http d’Ă©conomisĂ©. Quand on sait comment ils sont gĂ©rĂ©s sous Internet Explorer, c’est un avantage indĂ©niable.
    • Economie en taille : une grande image sera gĂ©nĂ©rallement plus petite (en Ko) que deux petites (voire n petites).
    • Moins de code : une seule image sans Javascript c’est aussi moins de code. Et donc moins de ressources utilisĂ©es.
    • Mise Ă  jour / maintenance simplifiĂ©es : un menu complexe ne nĂ©cessitera la modification que d’une image (idĂ©alement le fichier PSD de base). Imaginez un menu complexe rĂ©alisĂ© dans une technique standard qui pourrait embarquer une vingtaine d’images…

    Pourquoi donc s’en passer ? Votre avis m’intĂ©resse !

    Ressources :

    Cet article vous a plu ? Ne perdez plus aucune info : abonnez-vous gratuitement !

    A vous de jouer ! Laissez un commentaire :

    XHTML: Vous pouvez utiliser ces tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>

    Innovablog motorisé par WordPress
    Theme Wordpress par Olivier Favre
    Site Map
    RSS Feed
    Contenu intégralement sous licence Creative Commons