• A la une
  • Catégories
  • Dossiers
  • Rédacteurs
  • +

Tuto: Changer l'apparence d'un élément HTML avec CSS3 et JS

par Benjamin SANCHEZle 19/08/2011

Aujourd'hui, nous allons voir dans un petit tutoriel comment utiliser quelques évènements simples en javascript pour modifier votre page grâce aux classes CSS.

Introduction

    Le CSS fournit déjà un système d'état rudimentaire. Par exemple, #menu:hover dans le CSS permet de n'appliquer certaines propriétés à la div menu que quand elle est survolée par la souris. Mais comment faire pour que le survol d'un objet modifie un objet tout autre? Grâce à du Javascript. Pour que la tâche ne soit pas trop fastidieuse, nous allons utiliser le framework Dojo.

Vous pourrez trouver un exemple d'utilisation de ce petit truc sur le site de Dezup et plus particulièrement dans la partie "Nos services"

I -  Les différents outils à notre disposition

 

Avant tout, faisons une liste des quelques outils que nous allons utiliser ici.

1: Du vocabulaire

    Un noeud: un noeud est une balise ou une paire de balises html. <div>contenu</div> est par exemple un noeud.

    Un string: Un string est une chaine de texte. Sa marque distinctive est qu'elle est entourée de quotes simples ('string'), ou doubles ("string"). C'est ni plus ni moins que du texte.

    Un Event: Des events javascripts sont des évènements (d'où le nom) qui peuvent être surveillés. Par exemple, cliquer sur quelque chose est un évènement. On peux l'écouter en ajoutant comme attribut onClick="some_js_here" à une balise. Quand quelqu'un cliquera sur l'élément, le code (ici some_js_here) sera executé. Vous pouvez essayer avec onClick="alert('hello world')".

2: Les outils de modifications de classes de dojo

    dojo.addClass(target, class) permet d'ajouter une classe à un noeud. target peut être un string (dans ce cas là, c'est l'id du noeud), ou directement un noeud.

    dojo.removeClass(target, class) permet de supprimer une classe à un noeud.

    dojo.toggleClass(target, class) permet d'ajouter une classe à un noeud si elle n'y est pas et la retirer si elle est déjà présente.

3: Quelques events

    onClick est l'écouteur des clics de souris.

    onMouseOver est l'écouteur de survol d'un élément par la souris.

    onMouseOut est l'écouteur de sortie d'un élément par la souris.


II - Préparation du terrain

    Pour pouvoir utiliser dojo, il faut avant tout l'importer. Pas besoin de s'embêter à le télécharger, nous allons pouvoir utiliser celui qui est disponible en ligne. Ajoutez juste ceci dans votre head.

<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.1/dojo/dojo.xd.js" type="text/javascript"></script>


III - Le vif du sujet

    Alors, qu'allons nous essayer de faire ici? nous allons faire une div quelque part et à son survol, nous allons faire apparaître une petite bulle d'explication à son sujet.

    a - Premièrement, créeons le HTML.

(je suppose là que vous avez déjà l'attirail complet doctype html head(avec dojo dedans) et body, bien sur).

Créez l'élément qui doit être survolé. Ça peut être un champ, un p avec du texte, une image de point d'interrogation, ce que vous voulez. Créez ensuite la 'bulle' ça peut là aussi être un simple p ou un span, une image, là aussi, vous êtes libres. Pour simplifier les choses en CSS et JS ensuite, donnons lui une id, par exemple:"tooltip".

    b - Maintenant, le CSS.


Pour  #tooltip, positionnez la bulle ou vous voulez, puis mettez lui une opacity de 0. Je vous conseille aussi de mettre quelques lignes de transitions CSS3, pour que ça soit plus sympa.
Pour #tooltip.visible, mettez une opacity à 1.
Notre div tooltip est maintenant invisible, mais quand on lui aura ajouté la classe "visible", elle apparaitra, puis redisparaira quand on lui la retirera.

    c Un tout petit peu de JS.

Sur l'évènement qui doit être survolé, ajoutons deux évènements :

onMouseOver="dojo.addClass('tooltip', 'visible')"
onMouseOut="dojo.removeClass('tooltip', 'visible')"

je met un exemple pour ceux chez qui ça reste flou:

<div onmouseover="dojo.addClass('tooltip', 'visible')" onmouseout="dojo.removeClass('tooltip', 'visible')>Je suis le texte à survoller</div>

Testez votre page: Normalement, au survol de l'élément, la toolip gagne la classe visible, et apparait. Puis, si la souris sort de l'élément, la tooltip perd cette classe et redisparaît.

 

IV - Le mot de la fin

Voilà, vous avez touché au modifications du DOM (en gros, l'ensembles des noeuds) et des classes en javascript. Cet exemple n'était peut être pas très impressionnant, mais je vous promet que cette technique, surtout depuis l'arrivée du CSS3, est réellement très pratique.

Bonne journée et à bientôt pour un nouvel article. 

  • Partager l'article en 1 clic !

    N'hésitez pas à aider le BlogDuWebdesign
Avatar_thumbAuteur : Benjamin voir son blog

Développeur autodidacte depuis quelques années, déjà, je suis le développeur du blog du webdesign, où mon rôle est de concretiser les différentes idées et maquettes.

Devenez membre !

Rejoignez la communauté des créatifs du web !
- Partagez vos créations
- Gagnez en visibilité
- Créez votre blog facilement
> En savoir plus

Créer mon compte

4Commentaires

  • Avatar_thumb
    Guillaume Anthore

    le 19/08/2011 | #1

    Intéressant... et je vais de suite voir l'article sur Dojo que je n'utilise pas encore (voyons ses différences avec Jquery...)

  • Avatar_thumb
    billboc

    le 19/08/2011 | #2

    bonjour
    merci pour ton article
    connais tu la syntaxe pour jquery ?
    merci
    ++

  • Avatar_thumb
    Benjamin SANCHEZ

    le 25/08/2011 | #3

    Pour jquery, ça serait $("#tooltip").addClass("visible") (avec un petit removeClass pour retirer la classe, of cours).

    Et pour les différences entre dojo et jquery, c'ets une bonne chose de se renseigner, et regarder un peu partout, ce qui se fait. Les frameworks sont tous à peu pres identiques en termes de fonctionnalités, l'important étant surtout d'en prendre un qui nous plais

  • Avatar_thumb
    Null Null

    le 13/04/2013 | #4

    Bonjour,

    Tout d'abord merci pour ce tuto, il est toujours intéressant de voir des alternatives a jQuery.

    J'aurai juste une petite remarque concernant :
    "

    Je suis le texte à survoller
    "

    J'ai lu plusieurs fois qu'il n'était pas recommandé de mêler le js et le html. Un peu comme le style en ligne.
    Cependant, je ne connais pas suffisamment Dojo, est-ce que vous confirmez cette "bonne pratique" ? Si c'est le cas, ce genre de tuto serai une bonne occasion pour initier directement sur ces bonnes pratiques

    Ecrire un commentaire

    captcha

    Ouvrir