Balise marquee dans l'échange de lien avec WebRankInfo

[pleglise]

Bonjour.

Je viens de m'inscrire sur WRI, j'ai inscrit mon site dans l'annuaire et j'ai activé le partage de lien avec WRI. Je rappelle les faits, il s'agit de copier/coller le code suivant sur une de ses pages :

Code: Tout sélectionner

<div style="width: 80px; height: 45px;">
<a href="http://www.webrankinfo.com/">
<img src="http://www.webrankinfo.com/images/wri/webrankinfo-80-15.png"
style="width:80px; height:15px; border:0;" title="WebRankInfo"
alt="Referencement"></a><marquee style="border: 0; font-family: Arial;
font-size: 9px; font-weight: normal; background-color: white; width: 80px;
height: 15px;" scrollamount="1" scrolldelay="20" onmouseover="this.stop()"
onmouseout="this.start()">Ce site est listé dans la catégorie
<a href="http://www.DicoDuNet.com/annuaire/cat-340-departements.htm">
Départements</a> :
<a href="http://www.DicoDuNet.com/annuaire/cat-468-haute-vienne-87.htm">
Haute Vienne (87)</a></marquee><a href="http://www.DicoDuNet.com/">
<img src="http://www.DicoDuNet.com/images/DicoDuNet-80-15.png" title="DicoDuNet"
style="width:80px; height:15px; border:0;" alt="dictionnaire"></a></div>


Très bien. Sauf que ce code contient la balise marquee... Donc mon site n'est plus valide XHTML1.0 W3C!...
"Pas grave" me direz vous, il suffit de faire un petit javascript et tout rentre dans l'ordre. C'est vrai et c'est ce que j'ai fait. Mais je me suis dis aussi que WRI est un bon site et qu'il serait peut-être souhaitable que les codes qu'il fournit soient valides W3C...

Voilà, c'était juste une suggestion.
Je ne vais pas polluer le forum avec encore du code. Si un webmaster est intéressé par ma suggestion, il peut me contacter par MP, je transmettrai volontier la modif que j'ai faite...

A+
Peewai

[WebRankInfo]

tu peux même poster ici ta suggestion de code

[pleglise]

OK. Alors voilà le code corrigé tel qu'il est sur mon site :

Code: Tout sélectionner

<div style="text-align:center;width: 135px; height: 45px;">
<a href="http://www.webrankinfo.com/">
<img src="http://www.webrankinfo.com/images/wri/webrankinfo-80-15.png" style="width:80px; height:15px; border:0;" title="WebRankInfo" alt="Referencement" />
</a>
<script type="text/javascript" src="PATH_DE_VOS_INCLUDES/defil.js"></script>
<div style="position: relative;background-color: white;overflow: hidden;width: 80px;height: 15px;" onmouseover="defileH_1.delta=0;" onmouseout="defileH_1.delta=deltaH1;">
        <span id='defileH1' style='position: absolute;width: 300px;height: 15px;border: 0; padding-top:2px;font-family: Arial;
font-size: 9px; font-weight: normal; ' >
      Ce site est listé dans la catégorie
<a href="http://www.DicoDuNet.com/annuaire/cat-340-departements.htm">Départements</a> : <a href="http://www.DicoDuNet.com/annuaire/cat-468-haute-vienne-87.htm">Haute Vienne (87)</a>
       </span>
</div>
<script type="text/javascript">
   var deltaH1 = -1;
   var defileH_1 = new Defilant('defileH1', 80, 0, 80, deltaH1,'horizontal');
   setInterval("defileH_1.defile()",70);
</script>
<a href="http://www.DicoDuNet.com/">
<img src="http://www.DicoDuNet.com/images/DicoDuNet-80-15.png" title="DicoDuNet" style="width:80px; height:15px; border:0;" alt="dictionnaire" />
</a>
</div>


OK me direz vous mais il en manque un bout...
J'y viens vous avez tous noté l'appel au fichier javascript : "PATH_DE_VOS_INCLUDES/defil.js"
Alors voilà le contenu du fichier en question...

Code: Tout sélectionner

// Défilement 4 directions multiple
function Defilant(id, pos_init, pos_min, pos_max, delta, direction) {
   this.id          = id;
   this.element     = document.getElementById(id);
   this.pos_init    = pos_init;
   this.pos_min     = pos_min;
   this.pos_max     = pos_max;
   this.pos_current = pos_init;
   this.delta       = delta;
   this.direction   = direction;
}

Defilant.prototype.defile = function() {
   if (!this.element) {
      this.element = document.getElementById(this.id);
   }
   if (this.element) {
      if(this.direction == 'vertical'){
if(this.pos_current < (this.pos_min - this.element.offsetHeight) ){
            this.pos_current = this.pos_init;
         } else if (this.pos_current > this.pos_max ) {
            this.pos_current = this.pos_init - this.element.offsetHeight;
         } else {
            this.pos_current += this.delta;
         }
         this.element.style.top = this.pos_current+"px";
      } else if(this.direction == 'horizontal') {
         if(this.pos_current < (this.pos_min - this.element.offsetWidth) ){
            this.pos_current = this.pos_init;
         } else if (this.pos_current > this.pos_max ) {
            this.pos_current = this.pos_init - this.element.offsetWidth;
         } else {
            this.pos_current += this.delta;
         }
         this.element.style.left = this.pos_current+"px";
      }
   }
}


Vous noterez aussi au passage que ces fonctions sont un peu plus évoluées que ce dont on a réellement besoin ici puisqu'elles rendent le système entièrement paramétrable à l'appel de fonction.
Evidemment, on aurait pu faire plus simple... Mais comme ça, le jour ou vous voudrez le faire défilez plus vite ou moins vite ou verticalement ou dans l'autre sens, vous pourrez...

Voilà, je n'ai aucun mérite puisque j'ai repompé ça sur un forum... Je ne sais plus lequel. Je l'ai réadapté pour le faire coller à ce qui était fait par la balise marquee...

Et là, c'est valide XHTML1.0
Vous pouvez aller jeter un oeil sur mon site, c'est en page d'accueil. Comparez avec la version marquee pour voir...

A bientôt...
Peewai

[WebRankInfo]

Merci Peewai

[bogey]

merci aussi pour moi, j'ai perdu un peu de temps cette apres midi avant d'avoir l'idée de faire une recherche dans le forum...

[brunosav]

plus simple mais juste comme avant et pas dans firefox !!!!!! :

Code: Tout sélectionner

<script type="text/javascript">
document.write("<marquee style=\"border: 0; font-family: Arial; font-size: 9px; font-weight: normal; background-color: white; width: 80px; height: 15px; color: #000;\" scrollamount=\"1\" scrolldelay=\"20\" onmouseover=\"this.stop()\" onmouseout=\"this.start()\"><font style=\"color: black;\">Ce site est listé dans la catégorie</font><a href=\"http://www.DicoDuNet.com/annuaire/cat-3-informatique.htm\" style=\" color: black;\">Informatique</a> :<a href=\"http://www.DicoDuNet.com/annuaire/cat-99-materiel-informatique.htm\" style=\" color: black;\">Matériel informatique</a></marquee> ");
</script>