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.

Sivit
Un des leaders du serveur dédié en France.
http://www.sivit.fr

Cat : Serveurs dédiés
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

61228 membres
7320 comptes CountUs
1718 comptes myCircle

LES FORUMS :

14 forums
39934 topics
190876 messages
>> Les forums

SONDAGE

La mini-astuce "Navigateur" du jour par guySk
Sur FireFox, il existe un tas d'extensions, une est bien adaptée pour la programmation: Firebug. Une fois l'extension installée, une petite icône apparaitra en bas à droite de la page dans la barre de tache du nav, un clic sur celui-ci, vous permettra d'accéder au code et au erreur. Pratique.
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi