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 ?

new!

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 >|

18 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

MisterForum
Créez votre forum gratuitement en quelques minutes.
http://misterforum.com

Cat : Forum - sondages - compteurs
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

55287 membres
8356 comptes CountUs
1485 comptes myCircle

LES FORUMS :

14 forums
39239 topics
188879 messages
>> Les forums

SONDAGE

La mini-astuce "Navigateur" du jour par leBoss
Sous Firefox, vous pouvez définir plusieurs pages de démarrages dans les options en utilisant le séparateur |. Elles s'ouvriront toutes dans un onglet différent.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi