• Tableaux à angles arrondis
• Créer une barre de scroll colorée
• Les Roll-Over
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un tableau
• Créer un calque
• Créer un poulet
• Créer un calque
• Créer un tableau
• Créer un formu



• Monter une page
• Déplacer une image
• Manipuler un calque






Pages précédentesRetour au sommairePages suivantes
  Le tutorial
  Voir le résultat

 1. Manipuler un calque avec du Javascript : le tutorial 

- Les objets du DHTML :

En HTML, tous les éléments de la page sont considérés comme des objets de type différent. Les images, les liens, les formulaires, les champs de formulaires, etc sont des objets que le javascript peut déjà manipuler.

Le DHTML introduit la notion de calque ou couche ou layer.

Ces calques sont à la base du DHTML car ils vont pouvoir être manipulés : déplacés, cachés, modifiés, redessinés...
Un calque est défini par le couple de balises <DIV> et </DIV>

- Les calques :

Un calque doit posséder :

- un identifiant, pour le répérer
- un style d'affichage, pour indiquer sa position, sa taille, sa couleur, etc...
- un contenu, qui sera affiché

L'identifiant est enregistré grâce à l'attribut id.
Sur une page, l'identifiant de tous les calques (et de tous les autres objets) doit être unique, pour éviter les disfonctionnements.

Le style est enregistré grâce à l'attribut style. C'est une chaîne de caractères au format css.
Le contenu est du code HTML (texte, tableaux, images...) placé entre les balises <DIV> et </DIV>
Top
Le calque peut être accédé par javascript grâce à la
fonction document.getElementById qui retourne l'objet calque.

L'objet de type calque ainsi retourné a comme propriété un nouvel objet style qui contient toutes les propriétés d'affichage du calque : visibilité, position, dimensions, couleurs, ...

Ainsi pour afficher un calque :(nom du calque = "toto")

document.getElementById("toto").style.visibility="visible";

Pour masquer le même calque :

document.getElementById("toto").style.visibility="hidden";

Pour diminuer la taille du calque :

document.getElementById("toto").style.width=
parseInt(document.getElementById("moncalque").style.width)-50;


Pour modifier la couleur de fond :

document.getElementById("toto").style.backgroundColor="red";

Pour modifier la couleur du texte :

document.getElementById("toto").style.color="blue";
Top
Code html et Javascript détaillé :

- Pour assigner une couleur d'arrière plan au calque, il faut placer une fonction javascript entre la balise <HEAD> et </HEAD>.

<script language="Javascript">
<!--
function ChangeColor(NameColor)
{
document.getElementById("toto").style.backgroundColor=NameColor;
}
//-->
</script>


Vous devez également créer un lien qui appelle la fonction et qui donne une valeur à la variable NameColor.

Exemple :

<a href="javascript:ChangeColor(#FFFF00)">Modifier la couleur</a>
 

 2. Voir le résultat 
Top

 
Pages précédentesRetour au sommairePages suivantes
 
Recherche par
mots-clés :

• Créer un tableau







• Testez vos connaissances HTML







• Scripts dhtml