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

9 visiteurs
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 :

56144 membres
8361 comptes CountUs
1541 comptes myCircle

LES FORUMS :

14 forums
39398 topics
189318 messages
>> Les forums

SONDAGE

La mini-astuce "Divers" du jour par alex55
Vous connaissez les Easter Eggs ? Ce sont de petits codes insérés dans les logiciels qui s'ouvrent en faisant une action particulière : dans Winamp, pendant la lecture d'une musique, tapez N U L [echap] L [echap] S O F T. Le lecteur deviendra transparent en rythme avec la musique !!!
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi