|
|
 |
 |
 |
|
 |
|
 |
|
|
|
|
|
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> |
 |
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";
|
|
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
|
 |
|
|
| |
   |
| |
|
|
|
 |
|
 |
|
|
 |
|
 |
|
Recherche
par
mots-clés : |
|
|
|
 |
|
 |
|
|
|
|
|
|
|
|
|
