Validité W3C du retour à la ligne dans une balise <a title=>

Bonjour à tous,

J'essaie de faire des retours à la ligne pour légender des images "lightbox" :
exemple alsacréation

Le W3C ne valide pas les retours à la ligne et les espaces forcés dans une balise <a></a>
exemple du code html :

<a class="thumbnail" title="
&nbsp; &nbsp; &nbsp;Titre de l'image<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 1<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 2<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;- Remarque 3<br/>
&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;Conclusion" 
href="images/FancyZoom/Neufs/img1.JPG"><img src="images/FancyZoom/Neufs/thumbnail/img1thum.jpg" alt="exemple 1"/></a>

Le code js relatif aux légendes des images est dans le document FancyZoomHTML.js à partir de la ligne 297 :

var inCapCol2 = document.createElement("td");
		inCapCol2.setAttribute('background', zoomImagesURI+'zoom-caption-fill.png');
		inCapCol2.setAttribute('id', 'ZoomCaption');
		inCapCol2.setAttribute('valign', 'middle');
		inCapCol2.setAttribute('height', '110'); //BL
		inCapCol2.setAttribute('width', '370'); //BL
		inCapCol2.style.fontSize = '13px';
		inCapCol2.style.fontFamily = 'Helvetica';
		inCapCol2.style.fontWeight = 'bold';
		inCapCol2.style.color = '#ffffff';
		inCapCol2.style.textShadow = '0px 2px 4px #000000';
		inCapCol2.style.whiteSpace = 'nowrap';
		inCapRow1.appendChild(inCapCol2);

Est ce que quelqu'un a une solution à me proposer ?
Merci de votre attention
Modifié par Benkusz (17 Jan 2012 - 14:59)

Salut,

La valeur d'un attribut HTML, quel qu'il soit, ne peut pas comporter d'éléments HTML. Par conséquent, si des chevrons (< et >) doivent être utilisés, ils doivent être codés selon leur entité HTML (&lt; et &gt;, respectivement).

Par ailleurs, l'attribut title (ou tout autre attribut en HTML) n'est pas destiné à accueillir un contenu aussi important. Il faut utiliser une stratégie différente, par exemple avoir le contenu HTML directement dans le DOM mais masqué, ou éventuellement sous la forme d'une chaine de caractères dans une variable JavaScript, ou encore dans un fichier externe récupéré à la volée en XHR (Ajax).

Bonjour et merci beaucoup pour vos réponses !
Je suis novice, c'est loin d'être gagné même si je fais des efforts.

a écrit :
éventuellement sous la forme d'une chaine de caractères dans une variable JavaScript

Mon script lightbox (FancyZoom) fait appel à 2 fichiers : FancyZoom.js et FancyZoomHTML.js
J'ai précédement cité le fragment de code issu de FancyZoomHTML.js qui intéresse mon problème voici en amont le fragment de code de FancyZoom.js qui fait le lien entre l'attribut title dans le html et son exploitation par FancyZoomHTML.js (ligne 239) :

if (includeCaption) {
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
if (from.getAttribute('title') && includeCaption) {
document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
} else {
document.getElementById(zoomCaption).innerHTML = "";
}
}

Que me conseillez vous ? Ajouter au code html un attribut id= et modifier cette partie de code js pour signaler qu'en fonction de l'id on va inclure dans includeCaption tel ou tel texte ?
J'ai déjà été flatté que vous m'ayez aiguillé, je serais plus que honoré si vous saviez à nouveau me guider ! Merci encore !
Modifié par Benkusz (16 Jan 2012 - 14:18)

Benkusz a écrit :
modifier cette partie de code js

Non. À moins que ton objectif soit d'apprendre JavaScript (dans ce cas: lire un bon bouquin sur JavaScript et le DOM, pour commencer), je te conseille plutôt:
- de vérifier si le script JS que tu as choisi a une option qui fait ce que tu souhaites (cf. sa documentation);
- autrement, de choisir un script JS différent qui fait ce que tu souhaites.

Je déconseille l'approche «je comprends pas trop ce que je fais mais j'essaie de modifier un script».

Certes, il y a du vrai dans

a écrit :
je comprends pas trop ce que je fais mais j'essaie de modifier un script

Je me sens tout de même plus proche de : j'utilise une usine à gaz, j'ai repéré les modules liés à mon soucis mais comme je n'ai pas lu de bon bouquin sur Javascript et le DOM je ne sais pas comment procéder pour adapter le script.

Pourtant je suis persuadé que l'opération n'est pas extrêmement compliquée.
Je reviens sur les lignes (à partir de 239) extraites de FancyZoom.js :

if (includeCaption) {
document.getElementById(zoomCaptionDiv).style.visibility = "hidden";
if (from.getAttribute('title') && includeCaption) {
document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');
} else {
document.getElementById(zoomCaption).innerHTML = "";
}
}

Après la lecture de cet article sur la manipulation du DOM il me semble qu'on doit pouvoir ajouter du code à la ligne

document.getElementById(zoomCaption).innerHTML = from.getAttribute('title');

du genre

document.getElementById(zoomCaption).innerHTML = from.getAttribute('title' + .append('ma très longue chaine de caractère') + '<br>');

Je suis le seul à y croire ?

Benkusz a écrit :
mais comme je n'ai pas lu de bon bouquin sur Javascript et le DOM je ne sais pas comment procéder pour adapter le script

Va pour cette formulation si tu la préfères. La conclusion à en tirer reste la même: il faut soit apprendre JavaScript (le site Eloquent JavaScript est pas mal pour ça, prévoir deux ou trois douzaines d'heures), soit utiliser un script qui fait déjà ce que tu veux. Allez, je rajoute une troisième possibilité: engager un pro pour faire l'intégration.

À toi de voir ce qui te semble pertinent. Si c'est pour un site perso et que tu n'as pas spécialement envie d'apprendre JavaScript (c'est un investissement qu'on ne rentabilise que si on réalise pas mal de sites...), cherche un outil qui correspond déjà à tes envies, ou bien adapte tes envies aux outils tout prêts que tu trouves.

Benkusz a écrit :
cet article sur la manipulation du DOM

C'est un article sur la manipulation du DOM avec jQuery. C'est déjà un cas spécifique et ça ne me semble pas pertinent de charger la librairie jQuery juste pour faire quelques modifs dans un script (FancyZoom) qui n'utilise pas jQuery.

Benkusz a écrit :
Je suis le seul à y croire ?

Oui, car la ligne code que tu proposes contient une série d'erreurs grossières (au moins deux, peut-être trois). Ces erreurs dénotent une incompréhension de la syntaxe de base de JavaScript et une méconnaissance d'une méthode DOM de base.
Modifié par fvsch (18 Jan 2012 - 12:48)

Ok... C'est toi le boss !
Dans l'immédiat je vais chercher un nouveau script et pour dans le futur, je vais m'intéresser au site que tu conseilles (Eloquent JavaScript).
Après je n’écrirai plus qu'en anglais et je tenterai une reconversion pour être champion de formule 1 ! Ou autre chose...
En tout cas merci pour tes conseils. (Faut-il signaler que le problème est résolu ?)

Je vais peut-être continuer à vivre en français : pour ceux que ça intéresse le livre EloquentJavascript traduit en francais.