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

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
twitter birdtwitter birdtwitter birdtwitter birdtwitter bird
twitter bird
Ouvrir