DHTML:Premiers effets

Un article de WikiTuto.

Jump to: navigation, search

Catégorie:Cours DHTML

DHTML Concepts de base

Introduction
Les premiers effets

Premiers pas dans le DOM

DOM: modification du contenu dans un document

Accès aux feuilles de style par le DOM

Le DOM: fenêtre, navigateur et interface-utilisateur

Gestion des événements et DOM

modifier Tdm DHTML

Source : Gilles Chagnon

Sommaire

1 Attributs de gestion d'événements
- 1.1 Introduction
- 1.2 Les attributs
2 Modification des propriétés de style
3 Modification d'un attribut quelconque
- 3.1 Exercice 1. Modification de contenu
4 Utilisation des feuilles de style
- 4.1 Exercice 1. Menu à onglets
5 Voir aussi
6 Sources

[modifier]

Attributs de gestion d'événements

[modifier]

Introduction

La gestion d'événements est un processus complexe si on veut pouvoir tirer partir de toutes les possiblités offertes par le DOM. Fort heureusement, lorsqu'il s'agit de coder un effet simple, destiné à n'être utilisé que ponctuellement dans un fichier, il est possible de faire appel aux attributs définis dans la recommandation HTML.

[modifier]

Les attributs

Ces attributs définis dans la recommandation du W3C sont suffisants pour la gestion des événements de base. On trouve :

Les attributs de gestion des boutons de la souris : onclick et ondblclick permettent la prise en compte d'un clic simple ou d'un double clic, tandis que onmousedown et onmouseup détectent si un bouton de la souris a été enfoncé ou relaché.

Les attributs de gestion des déplacements de la souris : onmouseover et onmouseout détectent si la souris passe sur la boîte de l'élément courant, ou bien la quitte.

Les attributs de gestion du clavier : onkeypress, onkeydown et onkeyup détectent respectivement si l'utilisateur a appuyé puis relaché, simplement appuyé, ou relaché une touche du clavier.

[modifier]

Modification des propriétés de style

[modifier]

Introduction

Il est possible de modifier localement les propriétés de style d'un élément. On fait alors appel à l'objet courant this en Javascript. En voici quelques exemples :

 <p onmouseover="this.style.color='blue'" onmouseout="this.style.color='black'"> 
 Ceci est un texte dont la couleur va changer au passage de la souris. 
 </p>

 <p style="position: absolute; left: 10px; top: 230px; width:400px" onmouseover="this.style.left='100px'; this.style.top='300px';
 this.style.width='600px'; this.style.textAlign='center'" oumouseout="this.style.left='10px'; this.style.top='230px'; 
 this.style.width='400px'; this.style.textAlign='left'">
 Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. 
 Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.
 Exemple de texte à géométrie variable. Exemple de texte à géométrie variable.Exemple de texte à géométrie variable. 
 Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. Exemple de texte à géométrie variable. 
 Exemple de texte à géométrie variable. 
 </p>

Noter dans l'exemple précédent l'utilisation de majuscules pour éviter d'utiliser le tiret présent dans la propriété CSS, mais qui a un sens différent en Javascript.

[modifier]

Exercice 1. Modification de la couleur

[modifier]

Exercice 2. Déplacement d'élément

[modifier]

Exercice 3. Modification de la police

[modifier]

Modification d'un attribut quelconque

Il est aussi possible de modifier d'une manière similaire n'importe quel attribut d'un élément.

[modifier]

Exercice 1. Modification de contenu

[modifier]

Utilisation des feuilles de style

On peut aussi utiliser directement les propriétés de feuille de style, sans faire appel aux attributs de gestion des événements, avec notamment la pseudo-classe :hover. Malheureusement Internet Explorer 6 ne prend en charge cette pseudo-classe que pour la balise de lien a, contrairement aux recommandations du W3C.

[modifier]