un script valide W3C

manly · le 8 juillet 2008

Bonjour,

Je met à jour un site crée sur Frontpage, il y a qqs temps de ça.

J'aimerais garder mes boutons de navigation.

Le soucis est que le script crée n'est pas conforme aux normes W3C

// --></script><script language="JavaScript"></script><a href="index.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1h.src" onmouseout="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1n.src"><img src="_derived/home_cmp_fiesta010_hbtn_p.gif" width="140" height="60" border="0" alt="Accueil" align="middle" name="MSFPnav1"></a> <script language="JavaScript"></script><a href="videos.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2h.src" onmouseout="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2n.src"><img src="_derived/videos.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="videos" align="middle" name="MSFPnav2"></a> <script language="JavaScript"></script><a href="spectacles.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav3'].src=MSFPnav3h.src" onmouseout="if(MSFPhover) document['MSFPnav3'].src=MSFPnav3n.src"><img src="_derived/spectacles.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="spectacles" align="middle" name="MSFPnav3"></a> <script language="JavaScript"></script><a href="magie_mentale.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav4'].src=MSFPnav4h.src" onmouseout="if(MSFPhover) document['MSFPnav4'].src=MSFPnav4n.src"><img src="_derived/magie_mentale.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="magie mentale" align="middle" name="MSFPnav4"></a> <script language="JavaScript"></script><a href="liens.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav5'].src=MSFPnav5h.src" onmouseout="if(MSFPhover) document['MSFPnav5'].src=MSFPnav5n.src"><img src="_derived/liens.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="liens" align="middle" name="MSFPnav5"></a> <script language="JavaScript"></script><a href="english.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav6'].src=MSFPnav6h.src" onmouseout="if(MSFPhover) document['MSFPnav6'].src=MSFPnav6n.src"><img src="_derived/english.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="english" align="middle" name="MSFPnav6"></a> <script language="JavaScript"></script><a href="contact.htm" language="JavaScript" onmouseover="if(MSFPhover) document['MSFPnav7'].src=MSFPnav7h.src" onmouseout="if(MSFPhover) document['MSFPnav7'].src=MSFPnav7n.src"><img src="_derived/contact.htm_cmp_fiesta010_hbtn.gif" width="140" height="60" border="0" alt="contact" align="middle" name="MSFPnav7"></a>

<br/><br/><br/>

Voici ce que me dit validrome

Ligne 35 Colonne: 12
Erreurs: L'attribut `language` n'est pas autorisé dans la balise script.

Position de l'erreur:

<script language="JavaScript"type="text/javascript"></script><script language="JavaScript"></script><a href="index.htm" language="JavaScript" onmouseover="if(MSF

Colonne: 265

Erreurs: L'attribut `border` n'est pas autorisé dans la balise img.

Position de l'erreur:

0_hbtn_p.gif" width="140" height="60" border="0" alt="Accueil" align="middle

Colonne: 290

Erreurs: L'attribut `align` n'est pas autorisé dans la balise img.

Position de l'erreur:

height="60" border="0" alt="Accueil" align="middle" name="MSFPnav1"/></a> <

Colonne: 305

Erreurs: L'attribut `name` n'est pas autorisé dans la balise img.

Position de l'erreur:

rder="0" alt="Accueil" align="middle" name="MSFPnav1"/></a> <script language

Colonne: 327

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav1"/></a> <script language="JavaScript"><!--

Ligne 49 Colonne: 331

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav2"/></a> <script language="JavaScript"><!--

Ligne 51 Colonne: 343

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav3"/></a> <script language="JavaScript"><!--

Ligne 53 Colonne: 352

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav4"/></a> <script language="JavaScript"><!--

Ligne 55 Colonne: 328

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav5"/></a> <script language="JavaScript"><!--

Ligne 57 Colonne: 334

Erreurs: Il manque l'attribut `type` qui est pourtant obligatoire dans la balise script Tag.

Position de l'erreur:

..." align="middle" name="MSFPnav6"/></a> <script language="JavaScript"><!--

Ligne 61 Colonne: 1

Erreurs: Il manque l'attribut `alt` qui est pourtant obligatoire dans la balise img Tag.

Position de l'erreur:

<img src="images/fierulea.gif"/>

Ligne 68 Colonne: 1

Erreurs: table is not allowed here.

There is probably a block element within an inline element.

Nested block elements could cause this error too, as block elements

may not be nested arbitrarily. This depends on the [X]HTML elements.

Position de l'erreur:

<table>

Malheureusement, pour une meilleure vue, j'aurais voulu vous copier les numéros de ligne, mais note-pad++ ne le permet pas.

Ce me semble assez ardu, si j'arrive à me débrouiller en xhtml et css, le javascript est encore assez chinois pour moi.Alors quand il faut qu'il soit conforme, , là je me noie complètement.

Ce serait gentil de m'aider, je ne dirai pas merci avant, mais s'il vous plaît.

Dylav · le 8 juillet 2008

Salut Manly !

Tes problèmes ne relèvent pas de JavaScript, mais bien de HTML. La preuve, c'est que c'est un validateur HTML que tu sollicites.

Ligne 35 : l'attribut language est déprécié (n'est plus supporté), et remplacé par l'attribut type :

Lignes 45, 47, 49, 51, 53, 55, 57 : même chose.

Balise <img> : place les attributs width, height et border dans ta feuille de style, c'est plus élégant pour les deux premiers, et nécessaire pour le troisième. Remplace l'attribut name, qui semble déprécié, par l'attribut id. Enlève l'attribut align (déprécié ou interdit), et indique l'alignement centré dans l'élément contenant l'image, et non dans l'image. Même chose pour toutes les images.

#contenant {text-align:center}

#MSFPnav4 {width:140px,height:60px;border:0}

</div>

Balise <a>

Remplace <a href="index.htm" language="JavaScript" onmouseover="if(MSF ...">

par <a href="index.htm" onmouseover="javascript:if(MSF ...">

mais il me semble que javascript: n'est même pas nécessaire.

Après tous ces ajustements, je pense qu'on aura déblayé presque tous tes problèmes, et ceux qui restent n'en apparaîtront que mieux

KewlCat · le 8 juillet 2008

Si tu veux que "javascript:" ne soit pas obligatoire dans tes déclarations d'attributs "onevenement", tout en gardant explicitement l'usage du Javascript pour tous tes scripts il faut suivre la recommandation du validateur et insérer la ligne ci-dessous dans le partie <head> ... </head> de ta page :

<meta http-equiv="Content-Script-Type" content="text/javascript" />

Autre chose, l'attribut "alt" est obligatoire sur les balises <img>. Il sert à préciser le "texte alternatif" qui sera utilisé sur les navigateurs incapables d'afficher l'image (par obligation si le serveur tombe ou si l'URL de l'image n'est plus valide, ou bien par choix parce que l'utilisateur du navigateur est malvoyant...)

Dernière chose, pour ne parler que du Javascript, normalement le navigateur s'attend à ce que le contenu des balises <script> .. </script> soit uniquement composé de Javascript. Si tu ne veux pas qu'un interpréteur Javascript n'interrompe la lecture des scripts je te conseille de rajouter "//" devant les "<!--" qui ne sont pas du code Javascript valide.

Par ailleurs, l'utilisation de balises "commentaires html" à l'intérieur d'un bloc de script est inutile. Si l'on cherche à "masquer" le code pour éviter au navigateur de l'interpréter comme du code HTML, au lieu d'utiliser le code servant à "masquer" (mais pas "empêcher d'interpréter") il faut utiliser un bloc CDATA :

  <script type="text/javascript"> // <![CDATA[

 (...) du code Javascript (...)

 // ]]>
 </script>

manly · le 9 juillet 2008

Merci Dydi et Kewlcat.

Bon j'ai:

inséré la ligne dans mes meta
remplacé langage par type
ajouté dans mon CSS
```
.nav /*mes boutons de navigation*/
{
width: 140px;
height: 60px;
border: 0px;
text-align: center;
}
```
parce que je n'ai pas très compris ce que me conseille Dylav

Enlève l'attribut align (déprécié ou interdit), et indique l'alignement centré dans l'élément contenant l'image, et non dans l'image. Même chose pour toutes les images.

#contenant {text-align:center}
#MSFPnav4 {width:140px,height:60px;border:0}

<div id="contenant">
<img src="URL-mon-image.jpg" id="MSFPnav4" />
</div>
remplacé les name par id
vérifié que mes img soient avec texte alt (ce que je fais en général pour les mal-voyants notamment)
Remplacé <a href="index.htm" language="JavaScript" onmouseover="if(MSF ...">
par <a href="index.htm" onmouseover="if(MSF ...">
vu que java script: ne serait même pas nécessaire.

Le soucis est que je n'ai plus l'affichage différent avec le survol de ma souris.

Ce serait le "onmouseover" qui ne fonctionne pas ?

Je vous met en détail ce que j'ai actuellement (toujours pas en code box, car cela affiche mon texte alternatif )

<script type="text/javascript"></script><script type="JavaScript"></script><a href="index.htm" onmouseover="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1h.src" onmouseout="if(MSFPhover) document['MSFPnav1'].src=MSFPnav1n.src"><img class="nav" src="_derived/home_cmp_fiesta010_hbtn_p.gif" alt="Accueil" id="MSFPnav1"/></a> <script type="JavaScript"></script><a href="videos.htm" onmouseover="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2h.src" onmouseout="if(MSFPhover) document['MSFPnav2'].src=MSFPnav2n.src"><img class="nav" src="_derived/videos.htm_cmp_fiesta010_hbtn.gif" alt="videos" id="MSFPnav2"/></a> <script type="JavaScript"></script><a href="spectacles.htm" onmouseover="if(MSFPhover) document['MSFPnav3'].src=MSFPnav3h.src" onmouseout="if(MSFPhover) document['MSFPnav3'].src=MSFPnav3n.src"><img class="nav" src="_derived/spectacles.htm_cmp_fiesta010_hbtn.gif" alt="spectacles" id="MSFPnav3"/></a> <script type="JavaScript"></script><a href="magie_mentale.htm" onmouseover="if(MSFPhover) document['MSFPnav4'].src=MSFPnav4h.src" onmouseout="if(MSFPhover) document['MSFPnav4'].src=MSFPnav4n.src"><img class="nav" src="_derived/magie_mentale.htm_cmp_fiesta010_hbtn.gif" alt="magie mentale" id="MSFPnav4"/></a> <script type="JavaScript"></script><a href="liens.htm" onmouseover="if(MSFPhover) document['MSFPnav5'].src=MSFPnav5h.src" onmouseout="if(MSFPhover) document['MSFPnav5'].src=MSFPnav5n.src"><img class="nav" src="_derived/liens.htm_cmp_fiesta010_hbtn.gif" alt="liens" id="MSFPnav5"/></a> <script type="JavaScript"></script><a href="english.htm" onmouseover="if(MSFPhover) document['MSFPnav6'].src=MSFPnav6h.src" onmouseout="if(MSFPhover) document['MSFPnav6'].src=MSFPnav6n.src"><img class="nav" src="_derived/english.htm_cmp_fiesta010_hbtn.gif" alt="english" id="MSFPnav6"/></a> <script type="JavaScript"></script><a href="contact.htm" onmouseover="if(MSFPhover) document['MSFPnav7'].src=MSFPnav7h.src" onmouseout="if(MSFPhover) document['MSFPnav7'].src=MSFPnav7n.src"><img class="nav" src="_derived/contact.htm_cmp_fiesta010_hbtn.gif" alt="contact" id="MSFPnav7"/></a>

<br/>

Kewlcat, je ne comprends pas bien ton explication concernant la suite de l'insertion de la ligne dans mon head, et celle de toon bloc data.

Dylav, pour mon css, j'ai pas tout à fait comme tu le conseilles, est-ce grave ?

Ma solution est-elle bonne aussi ou direction corbeille ?

Merci à vous deux de toute l'aide que vous m'apportez.

Dylav · le 9 juillet 2008

Salut Manly !

3. Très bien, la classe "nav", si tous tes boutons ont des dimensions identiques. Juste un détail, pour border, pas besoin de mettre d'unité : quand la valeur est 0, c'est 0 dans toutes les unités ! Quant à l'alignement centré, si ça marche comme ça, tu peux oublier ce que j'ai dit.

5. Comme me le faisait remarquer récemment KC, l'attribut alt est destiné au texte de remplacement, et l'attribut title au texte explicatif (bulle au survol de la souris, dispositifs vocaux pour handicapés). Le problème, c'est que Internet Explorer (au moins jusqu'à IE6) ignore title et utilise alt pour les deux usages. Ce qui t'oblige, pour compatibilité, à indiquer le même commentaire dans les deux attributs.

Le bloc CDATA : <![CDATA[ ... script ... ]]>

C'est LA méthode pour cacher ton script au navigateur, l'empêchant ainsi de tenter de l'interpréter comme étant du code HTML.

Ton script semble ne plus fonctionner ?

Déjà, je ne comprends pas d'où sort MSFPhover : cette variable manifestement booléenne (vrai/faux ou 1/0) vient bien de quelque part ? Ne nous manque-t-il pas un bout de script, qui serait dans le <head> de ta page ?

Ensuite, la raison pour laquelle ça ne fonctionne plus serait peut-être le remplacement, dans tes images, de l'attribut name par id. C'est en effet l'étiquette qui fait le lien entre la balise <img> et le script... pour agir sur l'objet concerné (par exemple MSFPnav1 pour ton premier objet image). Et là, j'avoue que je suis aux limites de mes compétences, et je te suggère d'attendre l'avis de quelqu'un d'autre, KewlCat par exemple ?

KewlCat · le 9 juillet 2008

Je crois que pour les problème de mouseover, c'est causé par le fait que tu as changé les name="" en id="" et que par conséquent pour accéder à un élément il ne faut plus utiliser document['MSFPnav7'] mais document.getElementById('MSFPnav7') ...

manly · le 10 juillet 2008

Bonjour à vous deux et merci.

Voilà, j'ai :

1. enlevé le "border: opx;" c juste, j'avais oublié qu'il ne servait à rien.

2. mis les blocs data. Je pense que je n'étais pas bien éveillée hier, je ne comprenais pas où placer.Aujourd'hui, ça va mieux

3.

je ne comprends pas d'où sort MSFPhover : cette variable manifestement booléenne (vrai/faux ou 1/0) vient bien de quelque part ? Ne nous manque-t-il pas un bout de script, qui serait dans le<head> de ta page

Moi non plus, je dois dire. A l'origine, c'est frontpage qui a crée le script. Voici le head de ma page:

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

<head>

<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>

<meta http-equiv="Content-type" content="fr-be"/>

<title>Black Jack, magie, mentalisme, scène, close-up. Travesti burlesque et reportages vidéos</title>

<meta title="Description" content="découvrez le monde magique du mentaliste Black Jack, prestidigitateur disponible pour la scène et le close-up; en Belgique, en France, aux Etats-unis.Travesti burlesque et reportages vidéos."/>

<meta title="Keywords" content="magie,magic,cabaret,travesti,travestis,mentalisme,magiementale,illusionnist

e,mentalmagic,videos,reportages,blackjack,cabaret,spectacles,shows,blackjackmagic

,merlin,prestidigitateur,animations,scène, close-up, belgique, france, etats-unis, usa, crazy gag show, jacques sarion, mysteria, patty peccato, la nymphe aux pieds mutins,polyglotte, artiste,"/>

<meta title="Author" content="manlyweb"/>

<meta http-equiv="reply-to" content="http//:www.blackjackmagic.net/index"/>

<meta title="Identifier-URL" content="http://www.blackjackmagic.net"/>

<meta title="Copyright" content="manly2007-2017"/>

<meta title="Revisit-after" content="14 days"/>

<meta title="Robots" content="all"/>

<meta http-equiv="Content-Script-Type" content="text/javascript" />

<link rel="stylesheet" media="screen" type="text/css" title="Design" href="style1.css"/>

<script type="text/JavaScript">

isIe = (document.all) ? true : false;

dom = (document.getElementsByTagtitle) ? true : false;

texte= new Array();

<a href='http://www.referencement-2000.com'>referencement professionnel</a>");

<a href='http://www.referencement-2000.com/'>positionnement</a>");

<a href='http://www.referencement-2000.com/liste-outils-referencement.html'>moteur de recherche</a>");

<a href='http://www.referencement-2000.com/liste-outils-referencement.html'>annuaire</a>");

<a href='http://www.referencement-gratuit.com'>referencement gratuit</a>");

function publicite_brioude() {

a = Math.round(Math.random()*(texte.length-1));

document.write(texte[a]+'<br/>');

}

</script>

</head>

4. J'ai remplacé mes document['MSFPnavX'] par document.getElementById('MSFPnavX')

Cela ne change pas, ma barre de navigation ne change toujours pas au passage de la souris

Si vous avez d'autres idées, je suis preneuse.

Bonne journée.

Dylav · le 10 juillet 2008

Bonjour Manly,

1. Non, il faut que tu gardes le border:0; sinon ton image, qui sert de lien actif, se trouvera encadrée en bleu.

3. Effectivement, le document.getElementById('MSFPnavn') devrait être la bonne solution à adopter après le remplacement de l'attribut name par id... il doit donc y avoir un autre problème ?

manly · le 10 juillet 2008

Bonjour Dylav,

Oui, il doit sans doute y avoir un autre problème.

L'étrange c'est que la version refusée par le valideur fonctionne

manly · le 16 juillet 2008

Bonjour, je uppe.

La réaction des boutons ne se fait toujurs pas.

Je vous mets le code complet.

Si vous pouviez voir ce qui empêche le code de fonctionner.....

<script type="text/javascript"></script><script type="JavaScript"></script><a href="index.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav1'].src=MSFPnav1h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav1'].src=MSFPnav1n.src"><img class="nav" src="_derived/home_cmp_fiesta010_hbtn_p.gif" alt="Accueil" id="MSFPnav1"/></a> <script type="JavaScript"></script><a href="videos.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav2'].src=MSFPnav2h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav2'].src=MSFPnav2n.src"><img class="nav" src="_derived/videos.htm_cmp_fiesta010_hbtn.gif" alt="videos" id="MSFPnav2"/></a> <script type="JavaScript"></script><a href="spectacles.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav3'].src=MSFPnav3h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav3'].src=MSFPnav3n.src"><img class="nav" src="_derived/spectacles.htm_cmp_fiesta010_hbtn.gif" alt="spectacles" id="MSFPnav3"/></a> <script type="JavaScript"></script><a href="magie_mentale.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav4'].src=MSFPnav4h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav4'].src=MSFPnav4n.src"><img class="nav" src="_derived/magie_mentale.htm_cmp_fiesta010_hbtn.gif" alt="magie mentale" id="MSFPnav4"/></a> <script type="JavaScript"></script><a href="liens.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav5'].src=MSFPnav5h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav5'].src=MSFPnav5n.src"><img class="nav" src="_derived/liens.htm_cmp_fiesta010_hbtn.gif" alt="liens" id="MSFPnav5"/></a> <script type="JavaScript"></script><a href="english.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav6'].src=MSFPnav6h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav6'].src=MSFPnav6n.src"><img class="nav" src="_derived/english.htm_cmp_fiesta010_hbtn.gif" alt="english" id="MSFPnav6"/></a> <script type="JavaScript"></script><a href="contact.htm" onmouseover="java script:if(MSFPhover) document.getElementById['MSFPnav7'].src=MSFPnav7h.src" onmouseout="java script:if(MSFPhover) document.getElementById['MSFPnav7'].src=MSFPnav7n.src"><img class="nav" src="_derived/contact.htm_cmp_fiesta010_hbtn.gif" alt="contact" id="MSFPnav7"/></a>
<br/>

Ce serait vraiment gentil.

edit:

dans le quote, java script:if(MSFPhover)... est en deux mots. Dans mon code non.

Le fait que J a v a S c r i p t (je dois mettre des espaces, sinon changement à la publication) avec ces deux majuscules: pourrait être une piste ?

Je change ça et je reviens après vérifications

edit 2: non ça change rien

pffffffffffffffff

Modifié le 26 octobre 2008 par manly

Connexion

Pas encore inscrit ?

un script valide W3C

Messages recommandés

manly

Dylav

KewlCat

manly

Dylav

KewlCat

manly

Dylav

manly

manly

Rejoindre la conversation

En ligne récemment 0 membre est en ligne

Zebulon

Outils en ligne

Naviguer