11548 sujets

JavaScript, DOM et API Web HTML5

Externalisation onclick DOM

Bonjour,

Après avoir lu différents tuto sur le javascript je n'arrive toujours pas à externaliser les évènements onclick.
Je suis débutant en xhtml et javascript, alors toute remarque est bonne à prendre, pour optimiser le css etc...

Voici ma page d'accueil (index.php):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr-FR">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="Content-Language" content="fr" />
    <meta name="robots" content="all" />
    <title>Accueil :: le bonheur d'être simplement là :: Cyril Delacour photographe</title>
    <link rel="schema.dc" href="http://purl.org/dc/elements/1.1/" />
    <meta name="DC.Identifier.URL" content="http://test.cyrildphotos.com" />
    <meta name="DC.Language" content="fr" />
    <meta name="DC.Description" content="Accueil du site de Cyril Delacour, artiste photographe." />
    <meta name="DC.Keywords" content="photo, photographe, artiste, reportage, portrait, exposition, expo, mariage, Saint-Etienne, Loire, Rhone-Alpes, auteur, noir et blanc, n&#038;b, photos, photographie, photographies, album, galerie, art, naturel, image, images, jpg, jpeg" />
    <meta name="DC.Date.Modified" content="2007-05-14T10:27:37+02:00" />
    <meta name="DC.Type" content="image" />
    <meta name="DC.Format" content="image/jpg" />
    <meta name="DC.Creator" content="Cyril Delacour" />
    <meta name="DC.Creator.Location" content="France Loire Saint-&#201;tienne" />
    <meta name="DC.Rights.URL" content="http://test.cyrildphotos.com/copyright/index.php" />
    <link rel="stylesheet" type="text/css" href="http://test.cyrildphotos.com/style.css" media="screen" />
    <script src="http://test.cyrildphotos.com/affichage.js" type="text/javascript"></script>
    <link rel="shortcut icon" href="http://test.cyrildphotos.com/favicon.ico" />
  </head>
  <body>
    <div class="centre">
<!-- début de l'en-tête -->
      <div id="tete">
        <div id="hg">
          <a href="http://test.cyrildphotos.com/" title="vers l'accueil du site">www.cyrildphotos.com</a>
          <br />
          <span>Cyril Delacour photographe</span>
        </div>
        <div id="hd">
          <h1>
             le bonheur d'être simplement là 
          </h1>
        </div>
<!-- début du formulaire de recherche -->
        <div id="bg">
          <h4 class="no">
             rechercher sur le site  www.cyrildphotos.com  avec google 
          </h4>
<!-- Google CSE Search Box Begins  -->
          <form id="searchbox_013979821689057176575:d4m0xff-qpg" action="http://www.google.com/search">
            <pre>
              <input type="hidden" name="cx" value="013979821689057176575:d4m0xff-qpg" />
              <input type="hidden" name="cof" value="FORID:0" />
              <input class="google" name="q" type="text" size="40" value="rechercher sur le site" onfocus="this.oldvalue=this.value;this.value='';" onblur="if (this.value=='') this.value=this.oldvalue;" />
            </pre>
          </form>
<!-- Google CSE Search Box Ends -->
        </div>
<!-- fin du formulaire de recherche -->
<!-- début du menu principal -->
        <div id="bd">
          <h4 class="no">
             liens vers les différentes sections du site 
          </h4>
          <a href="http://test.cyrildphotos.com/navigation/index.php" title="carte du site">navigation</a>
          <a href="http://test.cyrildphotos.com/parcours/index.php" title="c.v. parcours, et textes">chemin de vie</a>
          <a class="on" href="http://test.cyrildphotos.com/galerie/index.php" title="galeries de photographies organisées par thèmes">galerie</a>
          <a href="http://test.cyrildphotos.com/commande/index.php" title="commander une prise de vue, acheter un tirage">commande</a>
          <a href="http://test.cyrildphotos.com/projet/index.php" title="projets passés, en cours, et futurs">projet</a>
          <a href="http://test.cyrildphotos.com/contact/index.php" title="envoyer un message, adresse et téléphone de Cyril Delacour">contact</a>
          <a href="http://test.cyrildphotos.com/lien/index.php" title="page de liens vers d'autres sites">lien</a>
        </div>
<!-- fin du menu principal -->
      </div>
<!-- fin de l'en-tête -->
<!-- début du corps de la page -->
      <div id="page">
<!-- début du contenu -->
        <div id="media">
          <div class="ch">
             &nbsp; 
          </div>
          <div class="cc">
            <div class="photo">
              <img src="img/bonheur.jpg" width="400" height="306" alt="(iView:Keywords)" id="bonheur" />
            </div>
          </div>
          <div class="cb">
             &nbsp; 
          </div>
          <div id="pied">
            <a href="http://test.cyrildphotos.com/copyright/index.php">&copy; 2007 Cyril Delacour, tous droits réservés</a>
          </div>
        </div>
<!-- fin du contenu -->
<!-- icônes -->
        <div id="icones">
          <div class="spacer">&nbsp;</div>
          <h4 class="no">icônes de navigation dans la page et pour les pages liées</h4>
          <a href="#commentaires" id="icommentaires" title="lire et écrire des commentaires" onclick="javascript:affiche_commentaires()" >
            <img src="http://test.cyrildphotos.com/img/c.gif" width="20" height="20" alt="vers les commentaires de la photographie" />
          </a>
          <a href="#achat" id="iachat" title="acheter un tirage" onclick="javascript:affiche_achat()">
            <img src="img/euro.gif" width="20" height="20" alt="vers le formulaire d'achat" />
          </a>
          <a href="#informations" id="iinformations" title="informations EXIF et IPTC" onclick="javascript:affiche_informations()">
            <img src="img/info.gif" width="20" height="20" alt="vers les informations" />
          </a>
          <div class="spacer">&nbsp;</div>
        </div>
<!-- début du bloc gauche -->
        <div id="gauche">
<!-- defaut -->
          <div id="defaut">
            <div class="nh">
               &nbsp; 
            </div>
            <div class="nc">
              <h4 class="no">
                 bienvenue 
              </h4>
              <p>
                 Bienvenue sur ce site réalisé par Cyril Delacour. 
              </p>
            </div>
            <div class="nb">
               &nbsp; 
            </div>
          </div>
<!-- description -->
          <div id="description">
            <div class="nh">
               &nbsp; 
            </div>
            <div class="nc">
              <h2 class="no">
                 description de la photographie 
              </h2>
              <p>
                 Portrait d'enfant en noir et blanc réalisé lors de ma dernière saison de filmage en Vendée. J'aime beaucoup cette photographie qui évoque pour moi le bonheur d'être simplement là. 
              </p>
            </div>
            <div class="nb">
               &nbsp; 
            </div>
          </div>
<!-- informations -->
          <div id="informations">
            <div class="nh">
               &nbsp; 
            </div>
            <div class="nc">
              <div id="fermer_informations">
                <a href="#defaut" id="ifermer_informations" onclick="affiche_defaut()">
                  <img src="img/x.gif" alt="icone fermer" />
                </a>
              </div>
              <h2>
                 Informations IPTC 
              </h2>
              <h3>
                 Titre 
              </h3>
              <p>
                 le bonheur d'être simplement là 
              </p>
              <h3>
                 Description 
              </h3>
              <p>
                 Portrait d'enfant en noir et blanc réalisé lors de ma dernière saison de filmage en Vendée. J'aime beaucoup cette photographie qui évoque pour moi le bonheur d'être simplement là. 
              </p>
              <h3>
                 Date de l'évènement 
              </h3>
              <p>
                 été 1998 
              </p>
              <h3>
                 Ville 
              </h3>
              <p>
                 Notre Dame de Monts 
              </p>
              <h3>
                 Département 
              </h3>
              <p>
                 Vendée 
              </p>
              <h3>
                 Pays 
              </h3>
              <p>
                 France 
              </p>
              <h3>
                 Crédit 
              </h3>
              <p>
                 Cyril Delacour 
              </p>
              <h3>
                 Copyright 
              </h3>
              <p>
                 &copy; 2001 Cyril Delacour, tous droits réservés 
              </p>
              <h3>
                 Nom du fichier 
              </h3>
              <p>
                 bonheur.jpg 
              </p>
            </div>
            <div class="nb">
               &nbsp; 
            </div>
          </div>
<!-- achat -->
          <div id="achat">
            <div class="nh">
               &nbsp; 
            </div>
            <div class="nc">
              <h2 class="no">
                 acheter un tirage de la photographie 
              </h2>
              <div id="fermer_achat">
                <a href="#defaut" id="ifermer_achat" onclick="affiche_defaut()">
                  <img src="img/x.gif" alt="icone fermer" />
                </a>
              </div>
              <p>
                 Le tirage de cette photographie n'est pas à vendre, ni une cession de droit afin de la diffuser. 
                <br />
                 Si vous voulez des portraits de votre famille ou de vous-même, rendez-vous dans la section "<a href="commande/">commande</a>". 
              </p>
            </div>
            <div class="nb">
               &nbsp; 
            </div>
          </div>
<!-- commentaires -->
          <div id="commentaires">
            <div class="nh">
               &nbsp; 
            </div>
            <div class="nc">
              <h2 class="no">
                 commentaires sur la photographie 
              </h2>
              <div id="fermer_commentaires">
                <a href="#defaut" id="ifermer_commentaires" onclick="javascript:affiche_defaut()">
                  <img src="img/x.gif" alt="icone fermer" />
                </a>
              </div>
              <p>
                 ici le code php pour les 10 derniers commentaires et une icone pour en ecrire et tous les voir (pop-up) 
              </p>
            </div>
            <div class="nb">
               &nbsp; 
            </div>
          </div>
        </div>
<!-- fin du bloc gauche -->
      </div>
    </div>
<!-- fin du corps de page -->
  </body>
</html>


Voici le code javascript lié (affichage.js):

window.onload = init;

function init() {
if (document.getElementById) {
document.getElementById("informations").style.display="none";
document.getElementById("commentaires").style.display="none";
document.getElementById("achat").style.display="none";
document.getElementById("defaut").style.display="block";
document.getElementById("description").style.display="block";
} else if (document.all) {
document.all["informations"].style.display="none";
document.all["commentaires"].style.display="none";
document.all["achat"].style.display="none";
document.all["defaut"].style.display="block";
document.all["description"].style.display="block";
} else if (document.layers) {
document.layers["informations"].display="none";
document.layers["commentaires"].display="none";
document.layers["achat"].display="none";
document.layers["defaut"].display="block";
document.layers["description"].display="block";
} }

function affiche_description() {
if (document.getElementById) {
document.getElementById("defaut").style.display="none";
document.getElementById("informations").style.display="none";
document.getElementById("commentaires").style.display="none";
document.getElementById("achat").style.display="none";
document.getElementById("description").style.display="block";
document.getElementById("fermer_description").style.display="block";
} else if (document.all) {
document.all["defaut"].style.display="none";
document.all["informations"].style.display="none";
document.all["commentaires"].style.display="none";
document.all["achat"].style.display="none";
document.all["description"].style.display="block";
document.all["fermer_description"].style.display="block";
} else if (document.layers) {
document.layers["defaut"].display="none";
document.layers["informations"].display="none";
document.layers["commentaires"].display="none";
document.layers["achat"].display="none";
document.layers["description"].display="block";
document.layers["fermer_description"].display="block";
} }

function affiche_informations() {
if (document.getElementById) {
document.getElementById("defaut").style.display="none";
document.getElementById("commentaires").style.display="none";
document.getElementById("achat").style.display="none";
document.getElementById("description").style.display="none";
document.getElementById("informations").style.display="block";
document.getElementById("fermer_informations").style.display="block";
} else if (document.all) {
document.all["defaut"].style.display="none";
document.all["commentaires"].style.display="none";
document.all["achat"].style.display="none";
document.all["description"].style.display="none";
document.all["informations"].style.display="block";
document.all["fermer_informations"].style.display="block";
} else if (document.layers) {
document.layers["defaut"].display="none";
document.layers["commentaires"].display="none";
document.layers["achat"].display="none";
document.layers["description"].display="none";
document.layers["informations"].display="block";
document.layers["fermer_informations"].display="block";
} }

function affiche_commentaires() {
if (document.getElementById) {
document.getElementById("defaut").style.display="none";
document.getElementById("description").style.display="none";
document.getElementById("informations").style.display="none";
document.getElementById("achat").style.display="none";
document.getElementById("commentaires").style.display="block";
document.getElementById("fermer_commentaires").style.display="block";
} else if (document.all) {
document.all["defaut"].style.display="none";
document.all["description"].style.display="none";
document.all["informations"].style.display="none";
document.all["achat"].style.display="none";
document.all["commentaires"].style.display="block";
document.all["fermer_commentaires"].style.display="block";
} else if (document.layers) {
document.layers["defaut"].display="none";
document.layers["description"].display="none";
document.layers["informations"].display="none";
document.layers["achat"].display="none";
document.layers["commentaires"].display="block";
document.layers["fermer_commentaires"].display="block";
} }

function affiche_achat() {
if (document.getElementById) {
document.getElementById("defaut").style.display="none";
document.getElementById("description").style.display="none";
document.getElementById("informations").style.display="none";
document.getElementById("commentaires").style.display="none";
document.getElementById("achat").style.display="block";
document.getElementById("fermer_achat").style.display="block";
} else if (document.all) {
document.all["defaut"].style.display="none";
document.all["description"].style.display="none";
document.all["informations"].style.display="none";
document.all["commentaires"].style.display="none";
document.all["achat"].style.display="block";
document.all["fermer_achat"].style.display="block";
} else if (document.layers) {
document.layers["defaut"].display="none";
document.layers["description"].display="none";
document.layers["informations"].display="none";
document.layers["commentaires"].display="none";
document.layers["achat"].display="block";
document.layers["fermer_achat"].display="block";
} }

function affiche_defaut() {
if (document.getElementById) {
document.getElementById("informations").style.display="none";
document.getElementById("achat").style.display="none";
document.getElementById("commentaires").style.display="none";
document.getElementById("defaut").style.display="block";
document.getElementById("description").style.display="block";
} else if (document.all) {
document.all["informations"].style.display="none";
document.all["achat"].style.display="none";
document.all["commentaires"].style.display="none";
document.all["defaut"].style.display="block";
document.all["description"].style.display="block";
} else if (document.layers) {
document.layers["informations"].display="none";
document.layers["achat"].display="none";
document.layers["commentaires"].display="none";
document.layers["defaut"].display="block";
document.layers["description"].display="block";
} }


Et le CSS lié (style.css):

/* ====================== Page ====================== */
* {margin:0;padding:0;border:0;background:none;}
body {font-family:Verdana, Arial, Helvetica;width:100%;height:100%;background-color:#eaeaea;}
div.centre {position:absolute;top:4px;left:50%;width:760px;margin-left:-380px;}
.no {display:none;}
p {font-size:10px;color:#999;}
a:link {text-decoration:none;color:#aa9999;}
a:visited {text-decoration:none;color:#9999aa;}
a:hover {text-decoration:underline;color:#aa6666;}
a:active {text-decoration:underline;color:#660033;}
a:focus {text-decoration:underline;color:#aa6666;}
/* ====================== En-tête ====================== */
div#tete {display:block;position:absolute;top:5px;width:760px}
div#hg {position:absolute;top:0;left:0;background:url(http://test.cyrildphotos.com/img/hg.gif) no-repeat;width:200px;height:40px;text-align:center;}
div#hg a {font-size:14px;line-height:16px;color:#d0d0d0;}
div#hg span {font-size:9px;line-height:10px;font-style:italic;color:#d0d0d0;}
div#hd {display:block;position:absolute;top:0;left:200px;height:40px;width:560px;background:url(http://test.cyrildphotos.com/img/hd.gif) no-repeat;}
div#hd h1 {text-align:center;font-family:Geneva;font-size:28px;color:#d0d0d0;}
div#bg {position:absolute;top:40px;left:0;background:url(http://test.cyrildphotos.com/img/bg.gif) no-repeat;width:200px;height:20px;}
.google {display:block;position:absolute;top:0px;left:7px;height:13px;width:180px;font-family:Verdana;font-size:10px;color:#999999;border:1px solid #eaeaea;background-color:#f4f4f4;}
div#bd {position:absolute;top:40px;left:200px;width:560px;height:20px;background:url(http://test.cyrildphotos.com/img/bd.gif) no-repeat;}
div#bd a:link {width:80px;height:20px;line-height:18px;font-size:10px;text-decoration:none;text-align:center;color:#666666;float:left;}
div#bd a:visited {width:80px;height:20px;line-height:18px;font-size:10px;text-decoration:none;text-align:center;color:#666666;float:left;}
div#bd a:hover {text-decoration:underline;color:#333333;}
div#bd a.on:link {background:url(http://test.cyrildphotos.com/img/on.gif) no-repeat;}
div#bd a.on:visited {background:url(http://test.cyrildphotos.com/img/on.gif) no-repeat;}
div#bd a.on:hover {text-decoration:underline;}
/* Corps de page */
div#page {position:absolute;top:70px;width:760px;}
/* ====================== Bloc gauche ====================== */     
div#gauche {position:absolute;top:25px;left:0;width:195px;}
div#icones {position:absolute;top:0;left:0;width:195px;height:20px;}
div#icones img {border:none;float:left;display:block;margin:0 6px;padding:0;width:20px;height:20px;text-decoration:none;}
.nh {overflow:hidden;width:195px;height:6px;background:url(http://test.cyrildphotos.com/img/nh.gif) no-repeat;}
.nc {width:195px;background:url(http://test.cyrildphotos.com/img/nc.gif) repeat-y;}
.nb {overflow:hidden;width:195px;height:6px;background:url(http://test.cyrildphotos.com/img/nb.gif) no-repeat;}
div#description, div#commentaires, div#achat, div#informations, div#defaut {margin:5px 0;}
div#description {display:block;}
div#commentaires {display:block;}
div#achat {display:block;}
div#defaut {display:block;}
div#informations {display:block;}
div#informations h2 {font-family:Verdane, Arial, Helvetica;font-size:12px;color:#666666;text-align:center;}
div#informations h3 {font-family:Verdane, Arial, Helvetica;font-size:11px;color:#666666;text-indent:8px;margin-top:5px;}
div#gauche p {font-size:9px;text-align:left;padding:0 6px;color:#666666;font-weight:lighter;}
div#fermer_commentaires, div#fermer_achat, div#fermer_informations, div#fermer_description {width:10px;height:10px;display:none;position:absolute;top:2px;left:182px;}
div#fermer_commentaires, div#fermer_achat, div#fermer_informations, div#fermer_description > a {display:block;text-decoration:none;border:0;}
table.blockg {border-spacing:0;empty-cells:show;font-family:Helvetica, Verdana, Arial;margin:0 auto;}
table.blockg td {font-size:9px;color:#999999;text-align:left;border-bottom:1px solid #eaeaea;}
table.blockg th {text-align:center;font-size:10px;color:#666666;}
table#iptc {display:block;}
table#exif {display:block;}
div#ong {width:191px;height:17px;text-align:center;border-bottom:1px solid #d0d0d0;}
a#ong1 {width:60px;border-top:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-bottom:1px solid #f4f4f4;border-left:1px solid #d0d0d0;background-color:#f4f4f4;font-family:Verdana, Arial, Helvetica;font-size:10px;text-decoration:none;color:#666666;}
a#ong2 {width:60px;border-top:1px solid #d0d0d0;border-right:1px solid #d0d0d0;border-bottom:1px solid #d0d0d0;border-left:1px solid #d0d0d0;background-color:#eaeaea;font-family:Verdana, Arial, Helvetica;font-size:10px;text-decoration:none;color:#666666;}
/* ====================== Contenu principal ====================== */
div#media {display:block;width:550px;position:absolute;top:10px;left:210px;}
div#media .ch {width:550px;height:25px;background:url(http://test.cyrildphotos.com/img/ch.gif) no-repeat;}
div#media .cc {width:550px;background:url(http://test.cyrildphotos.com/img/cc.gif) repeat-y;}
div#media .cb {width:550px;height:25px;background:url(http://test.cyrildphotos.com/img/cb.gif) no-repeat;}
div#media p {display:block;font-size:10px;text-align:left;padding:0 6px;color:#666666;font-weight:lighter;}
div#media .photo {display:block;background-color:#fff;padding:48px;border:1px solid #d0d0d0;margin:0 25px;}
div#media img {display:block;border:1px solid #000;}
div#index .ih {width:550px;height:5px;background:url(http://test.cyrildphotos.com/img/1h.gif) no-repeat;}
div#index .ic {width:550px;background:url(http://test.cyrildphotos.com/img/1c.gif) repeat-y;}
div#index .ib {width:550px;height:5px;background:url(http://test.cyrildphotos.com/img/1b.gif) no-repeat;}
div.spacer {clear:both;line-height:0;}
/* ====================== Pied de page ====================== */
div#pied {display:block;position:relative;top:15px;width:550px;text-align:center;}
div#pied > a {font-family:Verdana, Arial, Helvetica;font-size:9px;color:#d0d0d0;font-weight:lighter;text-decoration:none;}
div#pied > a:hover {color:#999999;text-decoration:underline;}


Je voudrais que les liens ayant une id précise soient attachés à un gestionnaire d'évènement onclick:

iinformations -> affiche_informations()
iachat -> affiche_achat()
icommentaires -> affiche_commentaire()
ifermer_informations -> affiche_defaut()
ifermer_achat -> affiche_defaut()
ifermer_commentaires -> affiche_defaut()

Au fait, merci car je me suis beaucoup servi de ce site pour creer cette page.
Modifié par cyrildphotos (14 May 2007 - 14:15)
Modérateur
Salut, Bienvenue sur Alsacréations Smiley smile

As-tu lu ceci ? Ca devrait t'aider. N'hésite pas à tout lire d'ailleurs et à suivre les liens qui sont indiqués en fin de tuto.

Un conseil aussi : indente ton code parce que là c'est illisible et ça ne donne vraiment pas envie de se plonger dedans. Même pour la maintenance et la correction d'erreurs, tu vas y gagner Smiley cligne
oui j'ai lu l'article, mais je ne sais pas comment adapter ceci:

a écrit :

// Alerte au clic sur des éléments particuliers
function Alert(sA)
{
if(!document.getElementsByTagName) return;

var oA = document.getElementsByTagName(sA);
if(!oA) return;

var iI = oA.length - 1;

for(iI; iI >= 0; iI--)
{
if(oA[iI].className == 'alert')
{
oA[iI].onclick = function()
{
window.alert('coucou');
return false;
};
}
}
}
// Initialisation une fois la page chargée
window.onload = function()
{
Alert('a');
};


Comment modifier Alert(sA) pour l'adapter à mes besoins?

J'essaye:

function Click(sA)
{
if(!document.getElementById) return;

var oA = document.getElementById(sA);
if(!oA) return;

var iI = oA.length - 1;

for(iI; iI >= 0; iI--)
{
if(oA[iI].id == 'ifermer_informations')
{
oA[iI].onclick = function()
{
affiche_defaut();
return false;
};
}
}
}
window.onload = function()
{
Click('a');
init();
};

Cela ne fonctionne pas.

J'ai suivi les liens en bas du tuto, mais cela reste un casse tête...
Modifié par cyrildphotos (14 May 2007 - 14:28)
Modérateur
bon déjà, tout ce que tu as mis dans tes else if (document.all) { et else if (document.layers), ça ne sert à rien... (à moins que tu ne veuilles gérer des navigateurs de version 4 mais là, je te souhaite bon courage...)

Ensuite, si tu as un traitement identique à appliquer sur plusieurs éléments, préfère une classe à un id. Ca t'évitera de multiplier les lignes inutiles.

A supposer que tu partes avec un :
window.onload = init;

function init() {
   ...
}
Tu dois commencer par rechercher tes éléments avec getElementsByTagName, par exemple. De là, tu fais une boucle sur ton tableau d'éléments obtenu par cette méthode et tu ne sélectionnes que ceux qui ont la classe voulue. C'est exactement ce qui est fait dans l'exemple du tuto mis à part que c'est fait sur un lien alors que pour toi, c'est sur une div. Dans ton xhtml, ça donnerait quelquechose comme ceci :
<div class="ctrl">...</div>
sur chacune des divs sur lesquelles tu comptes agir.

Une fois dans ta boucle, tu leur appliques une classe supplémentaire qui dit par exemple, que chaque élément ayant cette classe doit être cachée. Le display:none; se rajoute au sein de cette classe que tu ajoutes via JS, ce qui donne :
<div class="ctrl hide">...</div>
avec
hide { display: none; }


Pour la manipulation des classes, tu peux par exemple te servir de cette fonction :
	/**
	 * manipClass(a, o, c1, c2) -> Manipulation et test de classes CSS
	 * par Christian Heilmann
	 *  http://onlinetools.org/articles/unobtrusivejavascript/cssjsseparation.html
 
	 *
	 * This example function takes four parameters:
	 * a -> defines the action you want the function to perform.
	 * o -> the object in question.
	 * c1 -> the name of the first class
	 * c2 -> the name of the second class
	 *
	 * Possible actions are:
	 * swap -> replaces class c1 with class c2 in object o.
	 * add -> adds class c1 to the object o.
	 * remove -> removes class c1 from the object o.
	 * check -> test if class c1 is already applied to object o and returns true
	 *          or false.
	 */
	function manipClass(a, o, c1, c2)
	{
		switch(a)
		{
			case 'swap':
				o.className = !manipClass('check', o, c1)?
					o.className.replace(c2, c1) :
					o.className.replace(c1, c2);
			break;
			case 'add':
				if(!manipClass('check', o, c1))
					o.className += o.className?
						' ' + c1 :
						c1;
			break;
			case 'remove':
				var rep = o.className.match(' ' + c1)?
					' ' + c1 :
					c1;
				o.className = o.className.replace(rep, '');
			break;
			case 'check':
				return new RegExp('\\b' + c1 + '\\b').test(o.className);
			break;
  	  	}
	}
qui te permet d'obtenir le résultat souhaité.

Pour chaque div sélectionnée, il faut aussi créer un lien via JS pour contrôler l'affichage. Je parle d'un lien car l'élément qui contrôle l'affichage doit être focusable. Cà, c'est expliqué dans le tuto que j'ai cité précédemment. Il faut regarder du côté de document.createElement, document.createTextNode, appendChild, insertBefore, etc... pour le placer comme ceci :
<a href="#ctrl">Afficher</a>
<div class="ctrl hide">...</div>
Ce lien, tu peux le générer au sein d'une nouvelle fonction.

Enfin, toujours dans cette boucle, tu affectes une fonction au onclick sur chacun des liens créés. Quelquechose du genre :
oA.onclick = ctrlAffich;
oA étant le lien généré... celui que tu auras placé juste avant la div et que tu crées via JS.

Dans cette fonction, tu dis que si la div est cachée, on l'affiche lorsqu'on clique sur le lien en supprimant la classe CSS ajoutée précédemment (sans oublier de mettre un return false en fin de fonction pour éviter que le lien ne soit suivi). Avec la fonction ManipClass citée ci-dessus, tu peux réobtenir :
<div class="ctrl">...</div>
Si tu es motivé, tu peux aussi modifier l'intitulé du lien de manière à obtenir :
<a href="#ctrl">Cacher</a>
<div class="ctrl">...</div>
En somme, ton js doit ressembler à ceci :
window.onload = init;

function init()
{
   // On sélectionne les div via getElementsByTagName

   // On boucle sur le tableau obtenu
      // A chaque div ayant la classe ctrl, on ajoute la classe hide via manipClass
      // A chaque div ayant la classe ctrl, on crée un lien et on le positionne juste avant la div (createLink)
      // A chaque lien généré, on affecte la fonction CtrlAffich
}

function createLink(oDiv)
{
   // On crée un lien
   // On le positionne juste avant la div (oDiv)
}

function ctrlAffich()
{
   // On sélectionne la div qui se trouve juste après le lien cliqué
   // Si cette div possède la classe hide, on la supprime, sinon, on la rajoute (manipClass)
   // On change l'intitulé du lien cliqué suivant son intitulé actuel
   // on met return false;
}

function manipClass(a, o, c1, c2)
{
   ...
}


Bref, faut que tu potasses DOM essentiellement. Ce lien est très bien pour ça. Smiley cligne
Modifié par koala64 (14 May 2007 - 15:42)
Merci beaucoup pour les réponses...

J'ai trouvé un début de solution:

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	} else {
		window.onload = function() {
			if (oldonload) {
				oldonload();
			}
		func();
		}
	}
}

function Affichage() {
	if (document.getElementById) {
		var afi = document.getElementById('ifermer_informations');
		var afa = document.getElementById('ifermer_achat');
		var afc = document.getElementById('ifermer_commentaires');
		var ai = document.getElementById('iinformations');
		var ac = document.getElementById('icommentaires');
		var aa = document.getElementById('iachat');
		if (ac) {ac.onclick = function() {Acommentaires(this);}}
		if (ai) {ai.onclick = function() {Ainformations(this);}}
		if (aa) {aa.onclick = function() {Aachat(this);}}
		if (afi) {afi.onclick = function() {Adefaut(this);}}
		if (afa) {afa.onclick = function() {Adefaut(this);}}
		if (afc) {afc.onclick = function() {Adefaut(this);}}
	} else if (document.all) {
		var bfi=document.all['ifermer_informations'];
		var bfa=document.all['ifermer_achat'];
		var bfc=document.all['ifermer_commentaires'];
		var bi=document.all['iinformations'];
		var bc=document.all['icommentaires'];
		var ba=document.all['iachat'];
		if (bc) {bc.onclick = function() {Bcommentaires(this);}}
		if (bi) {bi.onclick = function() {Binformations(this);}}
		if (ba) {ba.onclick = function() {Bachat(this);}}
		if (bfi) {bfi.onclick = function() {Bdefaut(this);}}
		if (bfa) {bfa.onclick = function() {Bdefaut(this);}}
		if (bfc) {bfc.onclick = function() {Bdefaut(this);}}
	} else if (document.layers) {
		var cfi=document.layers["ifermer_informations"];
		var cfa=document.layers["ifermer_achat"];
		var cfc=document.layers["ifermer_commentaires"];
		var ci=document.layers["iinformations"];
		var cc=document.layers["icommentaires"];
		var ca=document.layers["iachat"];
		if (cc) {cc.onclick = function() {Ccommentaires(this);}}
		if (ci) {ci.onclick = function() {Cinformations(this);}}
		if (ca) {ca.onclick = function() {Cachat(this);}}
		if (cfi) {cfi.onclick = function() {Cdefaut(this);}}
		if (cfa) {cfa.onclick = function() {Cdefaut(this);}}
		if (cfc) {cfc.onclick = function() {Cdefaut(this);}}
	}
}

function Init() {
	if (document.getElementById) {
		document.getElementById("informations").style.display="none";
		document.getElementById("commentaires").style.display="none";
		document.getElementById("achat").style.display="none";
		document.getElementById("defaut").style.display="block";
		document.getElementById("description").style.display="block";
	} else if (document.all) {
		document.all["informations"].style.display="none";
		document.all["commentaires"].style.display="none";
		document.all["achat"].style.display="none";
		document.all["defaut"].style.display="block";
		document.all["description"].style.display="block";
	} else if (document.layers) {
		document.layers["informations"].display="none";
		document.layers["commentaires"].display="none";
		document.layers["achat"].display="none";
		document.layers["defaut"].display="block";
		document.layers["description"].display="block";
} }

function Adefaut()
	{
	document.getElementById("informations").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("defaut").style.display="block";
	document.getElementById("description").style.display="block";
	}

function Bdefaut()
	{
	document.all["informations"].style.display="none";
	document.all["achat"].style.display="none";
	document.all["commentaires"].style.display="none";
	document.all["defaut"].style.display="block";
	document.all["description"].style.display="block";
	}

function Cdefaut()
	{
	document.layers["informations"].display="none";
	document.layers["achat"].display="none";
	document.layers["commentaires"].display="none";
	document.layers["defaut"].display="block";
	document.layers["description"].display="block";
	}

function Aachat()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="block";
	document.getElementById("fermer_achat").style.display="block";
	}

function Bachat()
	{
	document.all["defaut"].style.display="none";
	document.all["description"].style.display="none";
	document.all["informations"].style.display="none";
	document.all["commentaires"].style.display="none";
	document.all["achat"].style.display="block";
	document.all["fermer_achat"].style.display="block";
	}

function Cachat()
	{
	document.layers["defaut"].display="none";
	document.layers["description"].display="none";
	document.layers["informations"].display="none";
	document.layers["commentaires"].display="none";
	document.layers["achat"].display="block";
	document.layers["fermer_achat"].display="block";
	}

function Acommentaires()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("commentaires").style.display="block";
	document.getElementById("fermer_commentaires").style.display="block";
	}

function Bcommentaires()
	{
	document.all["defaut"].style.display="none";
	document.all["description"].style.display="none";
	document.all["informations"].style.display="none";
	document.all["achat"].style.display="none";
	document.all["commentaires"].style.display="block";
	document.all["fermer_commentaires"].style.display="block";
	}

function Ccommentaires()
	{
	document.layers["defaut"].display="none";
	document.layers["description"].display="none";
	document.layers["informations"].display="none";
	document.layers["achat"].display="none";
	document.layers["commentaires"].display="block";
	document.layers["fermer_commentaires"].display="block";
	}
	
function Adescription()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("description").style.display="block";
	document.getElementById("fermer_description").style.display="block";
	}

function Bdescription()
	{
	document.all["defaut"].style.display="none";
	document.all["informations"].style.display="none";
	document.all["commentaires"].style.display="none";
	document.all["achat"].style.display="none";
	document.all["description"].style.display="block";
	document.all["fermer_description"].style.display="block";
	}

function Cdescription()
	{
	document.layers["defaut"].display="none";
	document.layers["informations"].display="none";
	document.layers["commentaires"].display="none";
	document.layers["achat"].display="none";
	document.layers["description"].display="block";
	document.layers["fermer_description"].display="block";
	}

function Ainformations()
	 {
	document.getElementById("defaut").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="block";
	document.getElementById("fermer_informations").style.display="block";
	}

function Binformations()
	{
	document.all["defaut"].style.display="none";
	document.all["commentaires"].style.display="none";
	document.all["achat"].style.display="none";
	document.all["description"].style.display="none";
	document.all["informations"].style.display="block";
	document.all["fermer_informations"].style.display="block";
	}

function Cinformations()
	{
	document.layers["defaut"].display="none";
	document.layers["commentaires"].display="none";
	document.layers["achat"].display="none";
	document.layers["description"].display="none";
	document.layers["informations"].display="block";
	document.layers["fermer_informations"].display="block";
	}
addLoadEvent(Init);
addLoadEvent(Affichage);

reste à voir si cela fonctionne sur d'autre navigateurs (essayé sur Iceweassel 2.0.0.3 Debian Etch)

la page test ici

Il reste à externaliser:

<form id="searchbox_013979821689057176575:d4m0xff-qpg" action="http://www.google.com/search">
            <pre>
              <input type="hidden" name="cx" value="013979821689057176575:d4m0xff-qpg" />
              <input type="hidden" name="cof" value="FORID:0" />
              <input class="google" name="q" type="text" size="40" value="rechercher sur le site" onfocus="this.oldvalue=this.value;this.value='';" onblur="if (this.value=='') this.value=this.oldvalue;" />
            </pre>
          </form>

Modifié par cyrildphotos (14 May 2007 - 18:31)
Modérateur
euh oué mais non Smiley lol

J'ai parlé chinois on dirait... document.getElementById, ça marche sur tous les navigateurs version 5.

... donc tout ce qui dépend de document.all ou document.layers est à virer... soit les 2/3 de ton code. Ces codes sont des antiquités qui n'ont plus lieu d'être.

Quant à la fonction de chargement, tu peux mettre :
function addEvent(oElem, sEvType, fn, bCapture)
{
   return oElem.addEventListener?
      oElem.addEventListener(sEvType, fn, bCapture):
      oElem.attachEvent?
         oElem.attachEvent('on' + sEvType, fn):
         false;
}

addEvent(window, 'load', Init, false);
addEvent(window, 'load', Affichage, false);

Modifié par koala64 (14 May 2007 - 18:31)
Voila qui est fait:

function addEvent(oElem, sEvType, fn, bCapture)
	{
	return oElem.addEventListener?
	oElem.addEventListener(sEvType, fn, bCapture):
	oElem.attachEvent?
	oElem.attachEvent('on' + sEvType, fn):
	false;
	}

addEvent(window, 'load', Init, false);
addEvent(window, 'load', Affichage, false);

function Affichage() {
	if (document.getElementById) {
		var afi = document.getElementById('ifermer_informations');
		var afa = document.getElementById('ifermer_achat');
		var afc = document.getElementById('ifermer_commentaires');
		var ai = document.getElementById('iinformations');
		var ac = document.getElementById('icommentaires');
		var aa = document.getElementById('iachat');
		if (ac) {ac.onclick = function() {Acommentaires(this);}}
		if (ai) {ai.onclick = function() {Ainformations(this);}}
		if (aa) {aa.onclick = function() {Aachat(this);}}
		if (afi) {afi.onclick = function() {Adefaut(this);}}
		if (afa) {afa.onclick = function() {Adefaut(this);}}
		if (afc) {afc.onclick = function() {Adefaut(this);}}
	}
}

function Init() {
	if (document.getElementById) {
		document.getElementById("informations").style.display="none";
		document.getElementById("commentaires").style.display="none";
		document.getElementById("achat").style.display="none";
		document.getElementById("defaut").style.display="block";
		document.getElementById("description").style.display="block";
	} 
}

function Adefaut()
	{
	document.getElementById("informations").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("defaut").style.display="block";
	document.getElementById("description").style.display="block";
	}

function Aachat()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="block";
	document.getElementById("fermer_achat").style.display="block";
	}

function Acommentaires()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("commentaires").style.display="block";
	document.getElementById("fermer_commentaires").style.display="block";
	}
	
function Adescription()
	{
	document.getElementById("defaut").style.display="none";
	document.getElementById("informations").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("description").style.display="block";
	document.getElementById("fermer_description").style.display="block";
	}

function Ainformations()
	 {
	document.getElementById("defaut").style.display="none";
	document.getElementById("commentaires").style.display="none";
	document.getElementById("achat").style.display="none";
	document.getElementById("description").style.display="none";
	document.getElementById("informations").style.display="block";
	document.getElementById("fermer_informations").style.display="block";
	}


J'ai mal à la tête ! Smiley langue Smiley biggrin
Modérateur
L'étape suivante, c'est de savoir créer un lien via JS et savoir l'insérer à l'endroit que tu souhaites. Smiley cligne

Actuellement, tu te retrouves avec des liens inutiles (tous les ibidules) si on désactive JS, ce qu'il faut éviter.

Avec les liens cités plus haut, ça ne devrait pas te poser problème.
Modifié par koala64 (14 May 2007 - 22:53)
Bonsoir,
Voilà pour créer les icones quand javascript est activé (j'ai modifié aussi le css qui ne change plus pour ces éléments ainsi créés (display:none).

var domEl = function(e,c,a,p,x) {
	if (!c) c='';
	if(e||c) {
		if (typeof c=='string') {
			c = c.length ? [c] : [];
		} else if (typeof c=='object' && !c.length) {
			c = [c];
			}
		e=(!e&&c.length==1)?document.createTextNode(c[0]):e;
		var n = (typeof e=='string')?document.createElement(e) :
		!(e&&e===c[0])?e.cloneNode(false):e.cloneNode(true);
		if(typeof e=='string' || e.nodeType!=3) {
			c[0]===e?c[0]='':'';
			for(var i=0,j=c.length;i<j;i++) typeof c[i]=='string'?
			n.appendChild(document.createTextNode(c[i])):
			n.appendChild(c[i].cloneNode(true));
			if(a){for (i in a) i=='class'?n.className=a[i]:n.setAttribute(a[i][0], a[i][1]);}
		}
	}
	if(!p) { return n; }
	p=(typeof p=='object'&&!p.length)?[p]:p;
	for(var k=(p.length-1);k>=0;k--) {
		if(x){while(p[k].firstChild)p[k].removeChild(p[k].firstChild);
		if(!e&&!c&&p[k].parentNode)p[k].parentNode.removeChild(p[k]);}
	if(n) p[k].appendChild(n.cloneNode(true));
	}
	return true;
}

function CreerIcones(){
	domEl('div','',[['id','icones']],document.getElementById('page'),'');
	if (document.getElementById('achat')) {
		domEl('a','',[['id','iachat'],['href','#achat',],['title','acheter un tirage, commander une prise de vue']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/euro.gif'],['alt','icone achat'],['weight','20px'],['height','20px']],document.getElementById('iachat'),'');
		domEl('div','',[['id','fermer_achat']],document.getElementById('achat'),'');
		domEl('a','',[['id','ifermer_achat'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_achat'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_achat'),'');
	}
    if (document.getElementById('commentaires')) {
		domEl('a','',[['id','icommentaires'],['href','#commentaires',],['title','lire et écrire des commentaires']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/c.gif'],['alt','icone commentaires'],['weight','20px'],['height','20px']],document.getElementById('icommentaires'),'');
		domEl('div','',[['id','fermer_commentaires']],document.getElementById('commentaires'),'');
		domEl('a','',[['id','ifermer_commentaires'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_commentaires'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_commentaires'),'');
	}
    if (document.getElementById('informations')) {
		domEl('a','',[['id','iinformations'],['href','#informations',],['title','les informations de la photographie']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/info.gif'],['alt','icone information'],['weight','20px'],['height','20px']],document.getElementById('iinformations'),'');
		domEl('div','',[['id','fermer_informations']],document.getElementById('informations'),'');
		domEl('a','',[['id','ifermer_informations'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_informations'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_informations'),'');
	}
}

addEvent(window, 'load', CreerIcones, false); /* ajoute la fonction CreerIcones au gestionnaire d'évènement */

Smiley murf
J'ai utilisé domEl, un script de Pawel Knapik.

Par contre cela fonctionne de manière assez aléatoire sur Internet Explorer 6

(désolé, le script modifi l'affichage)[/i][/i][/i][/i][/i][/i] Smiley fache
Modifié par cyrildphotos (16 May 2007 - 14:55)
j'ai réuni les 2 fonctions CreerIcones() et Affichage(), ce qui ne pose plus de problèmes à FF et IE...

function Affichage(){
	var ar = document.getElementById('recherche');
	ar.onfocus = function() {fvalue(this);}
	ar.onblur = function () {bvalue(this);}
	domEl('div','',[['id','icones']],document.getElementById('page'),'');
	if (document.getElementById('achat')) {
		domEl('a','',[['id','iachat'],['href','#achat',],['title','acheter un tirage, commander une prise de vue']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/euro.gif'],['alt','icone achat'],['weight','20px'],['height','20px']],document.getElementById('iachat'),'');
		domEl('div','',[['id','fermer_achat']],document.getElementById('achat'),'');
		domEl('a','',[['id','ifermer_achat'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_achat'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_achat'),'');
		var afa = document.getElementById('ifermer_achat');
		var aa = document.getElementById('iachat');
		aa.onclick = function() {Aachat(this);}
		afa.onclick = function() {Adefaut(this);}
	}
    if (document.getElementById('commentaires')) {
		domEl('a','',[['id','icommentaires'],['href','#commentaires',],['title','lire et écrire des commentaires']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/c.gif'],['alt','icone commentaires'],['weight','20px'],['height','20px']],document.getElementById('icommentaires'),'');
		domEl('div','',[['id','fermer_commentaires']],document.getElementById('commentaires'),'');
		domEl('a','',[['id','ifermer_commentaires'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_commentaires'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_commentaires'),'');
		var afc = document.getElementById('ifermer_commentaires');
		var ac = document.getElementById('icommentaires');
		ac.onclick = function() {Acommentaires(this);}
		afc.onclick = function() {Adefaut(this);}
	}
    if (document.getElementById('informations')) {
		domEl('a','',[['id','iinformations'],['href','#informations',],['title','les informations de la photographie']],document.getElementById('icones'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/info.gif'],['alt','icone information'],['weight','20px'],['height','20px']],document.getElementById('iinformations'),'');
		domEl('div','',[['id','fermer_informations']],document.getElementById('informations'),'');
		domEl('a','',[['id','ifermer_informations'],['href','#defaut'],['title','fermer']],document.getElementById('fermer_informations'),'');
		domEl('img','',[['src','http://test.cyrildphotos.com/img/x.gif'],['alt','icone fermer'],['width','10px'],['height','10px']],document.getElementById('ifermer_informations'),'');
		var afi = document.getElementById('ifermer_informations');
		var ai = document.getElementById('iinformations');
		ai.onclick = function() {Ainformations(this);}
		afi.onclick = function() {Adefaut(this);}
	}
}

J'aimerai maintenant pour optimiser le code faire 2 fonctions show(Ids) et hide(Idh) auxquelles passer des valeurs, par ex:

hide('informations','achat') {
var Idh = document.getElementById('Idh');
Idh.style.display="none";
}

J'imagine qu'il faut une petite boucle for dans tout ça (avec lenght)... Smiley murf
Sujet clos
Aller à