Petit script dans html - non validé W3C

**mariaorea** · 15/08/2014, 12h35

Bonjour,
Je suis webdesigner et j'utilise dans un de mes site un petit script qui m'a été donné par un développeur. Cela fonctionne super bien mais malheureusement il ne passe pas la validation W3C : message : "Attribute value not allowed on element a at this point", c'est un peu gênant.
Je ne connais pas assez le javascript pour pouvoir le changer. Quelqu'un pourrait-il m'aider ?
Merci infiniment par avance.

Lien du site où je l'utilise :
http://www.sodecinternational.fr/page.php

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>essais</title>
</head>
 
<body>
            <a value="0" onmouseover="showC(this.getAttribute('value'));">Lien 1</a>
            <a value="1" onmouseover="showC(this.getAttribute('value'));">Lien 2</a>
            <a value="2" onmouseover="showC(this.getAttribute('value'));">Lien 3</a>
            <a value="3" onmouseover="showC(this.getAttribute('value'));">Lien 4</a>
            <a value="4" onmouseover="showC(this.getAttribute('value'));">Lien 5</a>
 
<div style="display:block;" id="c0">Mon contenu 1</div>
<div style="display:none;" id="c1">Mon contenu 2</div>
<div style="display:none;" id="c2">Mon contenu 3</div>
<div style="display:none;" id="c3">Mon contenu 4</div>
<div style="display:none;" id="c4">Mon contenu 5</div>
 
<script type="text/javascript">
            function showC(value){
 
                    for(var x = 0;x<5;x++){
                    var idc = document.getElementById("c" + x);
                    idc.style.display = 'none';
                    }
 
                    var idl = document.getElementById("c" + value);
                    idl.style.display = 'block';
             }
</script>
</body>
</html>

**sekaijin** · 15/08/2014, 15h41

j'avoue ne pas comprendre pourquoi tu mets une value à un lien pour en dur dans le code la récupérer

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
<a onmouseover="showC('0');">Lien 1</a>
<a onmouseover="showC('1');">Lien 2</a>
<a onmouseover="showC('2');">Lien 3</a>
<a onmouseover="showC('3');">Lien 4</a>
<a onmouseover="showC('4');">Lien 5</a>

sinon pour ajouter ses propres attributs et faire une validation W3C il faut utiliser un namespace.

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<a perso:value="0" onmouseover="showC(this.getAttribute('urn:com.mycompagny.perso', 'value'));" 
 xmlns:perso="urn:com.mycompagny.perso">Lien 1</a>

ainsi l'attribut value n'est pas défini dans l'espace de nom HTML mais dans l'espace urn:com.mycompagny.perso le validateur W3C vérifie que les attribut d'un tag html sont possible pour le TAG pour cela il se base sur la définition du schéma html xhtml1-strict.xsd lorsqu'il va rencontrer le tag value avec le préfixe perso il va se référer au schéma associé à urn:com.mycompagny.perso
pour que ça fonction il faut que tu fournisse au validateur le schéma. pour se faire il faut non seulement écrire le schéma (pas toujours simple) et aussi indique où le trouver (les validateur en ligne demande à ce qu'il soit sur internet)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
<a perso:value="0" onmouseover="showC(this.getAttribute('urn:com.mycompagny.perso', 'value'));" 
 xmlns:perso="urn:com.mycompagny.perso" 
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="urn:com.mycompagny.perso http://www.mycompagny.com/perso_namespace.xsd">Lien 1</a>

Comme tu le vois un simple attribut devient compliqué à ajouter pour rester dans les règles.
Je te conseille donc de ne pas utiliser l'attributs supplémentaires.
de plus j'utiliserais les id (et non pas un numéro pour reconstruire l'id ensuite)

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8" />
<title>essais</title>
</head>
 
<body>
<a onmouseover="showC('c0');">Lien 1</a>
<a onmouseover="showC('c1');">Lien 2</a>
<a onmouseover="showC('c2');">Lien 3</a>
<a onmouseover="showC('c3');">Lien 4</a>
<a onmouseover="showC('c4');">Lien 5</a> 
<div style="display:block;" id="c0">Mon contenu 1</div>
<div style="display:none;" id="c1">Mon contenu 2</div>
<div style="display:none;" id="c2">Mon contenu 3</div>
<div style="display:none;" id="c3">Mon contenu 4</div>
<div style="display:none;" id="c4">Mon contenu 5</div>
 
<script type="text/javascript">
 function showC(id){
  for(var x = 4;x>=0;x--){
   var idc = document.getElementById("c" + x);
   idc.style.display = 'none';
  }
 
  var idl = document.getElementById(id);
  idl.style.display = 'block';
 }
</script>
</body>
</html>

A+JYT

**mariaorea** · 15/08/2014, 16h21

merci beaucoup pour ta prompte réponse.
C'est un peu trop compliqué pour moi, cela dépasse mes compétences.
Comme je disais dans mon post, ce code m'a été donné par un développeur pour m'aider. Il fonctionne tellement bien que je ne voulais pas trop le changer. J'ai essayé avec des ancres et ça ne marchait pas.
As-tu une idée de comment je pourrais faire de façon très simple avec un petit script, tout en gardant la configuration actuelle de mon code ?

je te redonne le lien du site

http://www.sodecinternational.fr/page.php