Tutoriels de DHTML > Faire disparaitre un objet de la page [ L'éditeur JavaScript ]

Fermer

Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?

Faire disparaitre un objet de la page

Vous allez voir, ce n'est pas bien compliqué :
Nous allons déjà créer l'élément que nous voulons faire disparaitre : un tableau HTML :

Mon tableau
Colonne 1	Colonne 2

Voici le code HTML du tableau :

<TABLE ID=tableau BORDER=2 BGCOLOR=#FFCC00>

  <TR>

    <TD COLSPAN=2 ALIGN=center><B>Mon tableau</B></TD>

  </TR>

  <TR>

    <TD>Colonne 1</TD>

    <TD>Colonne 2</TD>

  </TR>

</TABLE>

Notez que nous passons un paramètre id à ce tableau, auquel nous attribuons la valeur tableau (hum, je sais je me casse pas pour trouver des noms :)

Nous allons maintenant créer une fonction pour faire disparaitre le tableau :

<SCRIPT>

function disparition()

    {

    if(document.getElementById)

        document.getElementById("tableau").style.visibility = 'hidden'

    }

</SCRIPT>

Nous avons déjà vu que la condition if(document.getElementById) permet de vérifier si le navigateur est compatible. Si c'est la cas, il execute document.getElementById("tableau").style.visibility = 'visible' que l'on peut résumer aisni :
L'attribut de style visibility de l'élément dont l'ID est "tableau" prend la valeur "hidden", ce qui provoque la disparition du tableau.

Il ne reste plus qu'à appeler la fonction, par exemple via un lien :

<A HREF=# onClick='disparition();return(false)'>Hop, on efface le tableau</A>

Résultat :

Mon tableau
Colonne 1	Colonne 2

Hop, on efface le tableau

Pour afficher de nouveau la tableau, il suffit de créer par exemple, une seconde fonction :

<SCRIPT>

function afficher()

    {

    if(document.getElementById)

        document.getElementById("tableau").style.visibility = 'visible'

    }

</SCRIPT>

L'attribut de style visibility de l'élément dont l'ID est "tableau" prend la valeur "visible", ce qui provoque l'affichage du tableau.

Un simple lien qui appelle la nouvelle fonction comme dans le précédent exemple, et le tour est joué :
Hop, tu reviens le tableau

Annotations des visiteurs :

De tauniah - le 30-09-2005

Je viens de découvrir javascript et je trouve cela

De Diti2330 - le 11-02-2006

Le <script language="JavaScript"> seul n'est pas valide XHTML 1.1
Il faut ajouter un "type" :

<script language="javascript" type="text/javascript">

>> Poster une annotation sur ce cours

Les autres cours :

|< Déplacer un objet sur une page

Changer le contenu d'un bloc >|

compteur gratuit
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

Noos
Opérateur cablé vraiment bon pour la TV, peut-etre un peu moins pour le net. Des bonnes offres cependant.
http://www.noos.fr/

Cat : Haut débit
Voir l'annuaire webmaster

LES SCRIPTS :

78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

LES MEMBRES :

58344 membres
9470 comptes CountUs
1623 comptes myCircle

LES FORUMS :

14 forums
39659 topics
190132 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par Xenon_54
Avez-vous plusieurs comptes sur divers réseaux de messenger ? Trillian propose un logiciel pouvant gérer 5 réseaux différents: ICQ, MSN, Yahoo, AIM et IRC. Gratuit, il vous permettra de regrouper vos comptes sur une même interface. Adoptez-le! http://www.trillian.cc/products/overview_basic.php
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi