L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX new!
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle

     Referencement
     Créat. de bannière

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
105289 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kits graphiques
     Création logo

Plus :
     Comparateur de prix
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Hebergement gratuit
     Le PHP facile
     Horoscope
     Comscripts
     WebmasterClub
     Activeartanima...
     Le village de ...
     L'écriteau
     Faro-dessing
     Gifs animés, f...
     Netsources
     Easy-script.com
     K i s s design
     Trucs et astuc...
     Je javascript
     Les autres
     Votre site ici ?


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





34 visiteurs
actuellement en ligne

    PUBLICITE

Wilogo.com - Création Logo Entreprise

     ANNUAIRE WEBMAST.
Perso.cc
Redirection gratuite avec statistiques, compteurs...
Réservez votre nom de domaine sous la forme :
votresite.fr.vc
votresite.fr.cc
votresite.eu.ma
votresite.us.ma
http://www.perso.cc/
Cat : Redirection
Voir l'annuaire webmaster


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

     LES MEMBRES :
55808 membres
8799 comptes CountUs
1517 comptes myCircle

     LES FORUMS :
14 forums
39344 topics
189183 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "PHP / mySQL" du jour par orbital73
La super global $_SERVER['PHP_SELF'] utilisée tel quel est une variable faillible, permettant ainsi des injection de depuis l'URL
ce qui peut aller jusqu'au défacement de votre site. Pour éviter cela, utilisez htmlentities($_SERVER['PHP_SELF']).
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2008 K-NETWORK - Tous droits réservés | CNIL N° 844440 | 01/12/2008 23:44:25 | Design by Studcrea | Gen. en 0.457 sec.