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

49 visiteurs
actuellement en ligne

PUBLICITE

ANNUAIRE WEBMAST.

CroaCroa
Créez et gérez votre propre site en ligne sans connaissance en programmation !
http://www.croacroa.com/

Cat : Création de blog - site
Voir l'annuaire webmaster

LES SCRIPTS :

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

LES MEMBRES :

53608 membres
9759 comptes CountUs
1355 comptes myCircle

LES FORUMS :

14 forums
38921 topics
187793 messages
>> Les forums

SONDAGE

La mini-astuce "PHP / mySQL" du jour par @Rano
Lorsque vous voulez faire une recherche sur les fonctions PHP, allez simplement à l'url :
http://fr.php.net/fonction_que_vous_cherchez (par exemple http://fr.php.net/mail)
Proposer votre mini-astuce | Archives des mini-astuces

Pseudo :
Code :
	Se souvenir de moi