[Débutant] Est-ce une hérésie de vouloir interpreter du HTML dans une var JS?

Version imprimable

Bonjour,
je suis en train de réaliser une sorte de portfolio en html/js.
Vous pourrez constater mon amateurisme d'un simple coup d'oeil sur le code, néanmoins, cela fonctionne et c'est ce qui m'importe. Malheureusement, j'ai encore un problème dans la dernière fonctionnalité que je souhaite mettre en oeuvre. J'ai besoin d'un coup de pouce éclairé.

Je m'explique. Mon port folio est divisé en 3 parties:
- en haut gauche: la photo
- en haut à droite: la légende
- en bas sur toute la longueur, les vignettes de photos.

J'aimerai pouvoir ajouter des liens HTML en bas de la légende vers les sites des propriétaires des droits des photos. De plus j'ai besoin de faire des sauts de ligne (<br />) pour rendre le tout propre à l'affichage.
Mais je n'arrive pas à passer du code HTML dans la variable javascript. J'ai l'impression que ca ne se fait pas...
Pourriez-vous me prouvez le contraire? Ou sinon me proposer une méthode plus adaptée?
Merci pour votre aide.

Et maintenant: le code !! (en rouge les éléments clés de mon problème)

tout d'abord la fonction:
Code:

1 2 3 4 5 6 7 8 9 10 11 { offset=23; } function changeImg(path,legend,statusImg) { document.images[2+offset].src=path longueurCible = document.getElementById("textP").firstChild.length; document.getElementById("textP").firstChild.replaceData(0, longueurCible, legend); window.status=statusImg }
Et le code HTML de la page
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 <table width="573" border="0" cellspacing="0" cellpadding="0"> <tr> <td width="390" height="375" align="center" valign="middle"><img src="../images/1.jpg" alt="" border="0" /></td> <td width="169" bgcolor="#E8D9BC" height="375" align="left" valign="middle"> <table border="0" cellspacing="0" cellpadding="5"> <tr> <td> <p id="textP">Déplacez la souris sur les photos pour les afficher avec leur légende correspondante.</p></td> </tr> </table></td> </tr> <tr> <td width="570" colspan="3">        <a href="#" onMouseOver="changeImg('../images/1.jpg','legend1','');return true"><img src="../images/pt_img1.jpg" alt="" width="100" height="75" border="0"></a>   <a href="#" onMouseOver="changeImg('../images/2.jpg','legend2','');return true"><img src="../images/pt_img2.jpg" alt="" width="100" height="75" border="0"></a>   <a href="#" onMouseOver="changeImg('../images/3.jpg','legend3','');return true"><img src="../images/pt_img3.jpg" alt="" width="100" height="75" border="0"></a>   <a href="#" onMouseOver="changeImg('../images/4.jpg','legend4','');return true"><img src="../images/pt_img4.jpg" alt="" width="100" height="75" border="0"></a>   <a href="#" onMouseOver="changeImg('../images/5.jpg','legend5','');return true"><img src="../images/pt_img5.jpg" alt="" width="100" height="75" border="0"></a>     </td> </tr> </table>

En fait tu peux très bien le faire, mais essaye plutot avec la propriété innerHTML non ?

exemple :
Code:

1 2 3 4 5 6 7 <div id="mazonedetexte"></div> <script> var tmptxt = '<b>bold</b><br/><i>oo</i>'; document.getElementById('mazonedetexte').innerHTML=tmptxt; </script>

07/09/2006, 12h29
kom23

C'est beau le talent.
Merci pour tout, ca marche :D
14/09/2006, 16h42
kom23

Ah tiens je viens d'avoir une mauvaise surprise,
cette solution ne fonctionne pas sur Internet Explorer :cry:

Auriez-vous une idée pour la faire fonctionner à la fois sur Firefox et Internet explorer?
14/09/2006, 16h47
SpaceFrog

ton problème vient sans doute du firstChild ... si tu l'utilise toujours avec innerHTML ...

Non, je ne l'utilise plus.

Désolé, je n'avais pas mis la nouvelle version de ma fonction:
Code:

1 2 3 4 5 6 7 8 9 10 { offset=23; } function changeImg(path,legend,statusImg) { document.images[2+offset].src=path document.getElementById('textP').innerHTML=legend; window.status=statusImg }

18/09/2006, 10h46
kom23

up

innerHTML ne marche pas avec IE.
Existe t-il une autre syntaxe plus appropriée pour qu'il marche avec les deux explorateurs?
18/09/2006, 10h58
SpaceFrog

le innerHTML ne marche pas avec IE ??? depuis quand ...

quel est l'objet dont tu cherches à modifier le contenu ?
18/09/2006, 11h38
kom23

Je cherche à modifier le contenu du paragraphe dont l'id est "textP"
(voir code plus haut)

Le code et la fonction remaniée fonctionnent avec Firefox mais pas avec IE.
L'équivalent DOM ne donne rien nulle part (voir première version de ma fonction)
18/09/2006, 11h59
stanford

le innerHTML marche très bien avec ie ;)

ton erreur dois venir d'ailleur, ton objet existe t'il bien?
18/09/2006, 12h44
kom23

Oui mon objet existe bien (voir code, il s'agit du paragraphe ayant pour identifiant "textP").
et inner HTML marche avec Firefox, donc c'est pas l'objet qui est en cause à priori :\
Je pense que c'est la fonction mais je ne connais pas trop le javascript.

Je ne demande qu'à tous vous croire quand vous me dites que ça fonctionne sous IE. Il se trouve qu'avec mon code ce n'est pas le cas, là est le problème...

Vous pouvez essayer par vous-même, j'ai laissé le code html de la table ainsi que la fonction. Vous pouvez tester le fonction DOM, qui ne prend pas du tout en compte le HTML où la dernière version de la fonction avec le innerHTML qui ne fonctionne que sous Firefox.

Là, je coince vraiment...

okay on avance quand même, j'ai fait un test sur ce code, et ça marche bien

Code:

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
35
36
37
<html>
<head>
<script>
offset=23;
function changeImg(path,legend,statusImg)
{
	//document.images[2+offset].src=path
	longueurCible = document.getElementById("textP").firstChild.length;
	document.getElementById("textP").firstChild.replaceData(0, longueurCible, legend);
	window.status=statusImg
}
</script>
</head>
<body>
<table width="573" border="0" cellspacing="0" cellpadding="0">
<tr> 
   <td width="390" height="375" align="center" valign="middle"><img src="../images/1.jpg" alt="" border="0" /></td>
   <td width="169" bgcolor="#E8D9BC" height="375" align="left" valign="middle"> 
      <table border="0" cellspacing="0" cellpadding="5">
         <tr> 
            <td> <p id="textP">D&eacute;placez la souris sur les photos 
                        pour les afficher avec leur l&eacute;gende correspondante.</p></td>
          </tr>
       </table></td>
</tr>
<tr> 
  <td width="570" colspan="3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     &nbsp;<a href="#" onMouseOver="changeImg('../images/1.jpg','legend1','');return true"><img src="../images/pt_img1.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/2.jpg','legend2','');return true"><img src="../images/pt_img2.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/3.jpg','legend3','');return true"><img src="../images/pt_img3.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/4.jpg','legend4','');return true"><img src="../images/pt_img4.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/5.jpg','legend5','');return true"><img src="../images/pt_img5.jpg" alt="" width="100" height="75" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp; 
  </td>     
</tr>
</table>
</body>
</html>

18/09/2006, 14h38
kom23

C'est sûr ca marche..c'est la version avec laquelle je suis venu ici...

Essaie de mettre du code html dans la légend d'une image(un saut de ligne par ex)

Code:

 <a href="#" onMouseOver="changeImg('../images/1.jpg','legend1<br />ligne2','');return true"><img src="../images/pt_img1.jpg" alt="" width="100" height="75" border="0"></a>

Ca n'interprête pas du tout le code HTML, on revient à ma problématique originale, comment interprêter le HTML dans une variable JS.
Et je rajouterai maintenant: de manière à être compatible avec au moins Firefox et IE.:D

ok donc la suite :

ça marche ici aussi et j'ai mis du code html

Code:

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
35
36
37
<html>
<head>
<script>
offset=23;
function changeImg(path,legend,statusImg)
{
	//document.images[2+offset].src=path
	longueurCible = document.getElementById("textP").firstChild.length;
	document.getElementById("textP").innerHTML=legend;
	window.status=statusImg
}
</script>
</head>
<body>
<table width="573" border="0" cellspacing="0" cellpadding="0">
<tr> 
   <td width="390" height="375" align="center" valign="middle"><img src="../images/1.jpg" alt="" border="0" /></td>
   <td width="169" bgcolor="#E8D9BC" height="375" align="left" valign="middle"> 
      <table border="0" cellspacing="0" cellpadding="5">
         <tr> 
            <td> <p id="textP">D&eacute;placez la souris sur les photos 
                        pour les afficher avec leur l&eacute;gende correspondante.</p></td>
          </tr>
       </table></td>
</tr>
<tr> 
  <td width="570" colspan="3"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
     &nbsp;<a href="#" onMouseOver="changeImg('../images/1.jpg','<b>test</b>','');return true"><img src="../images/pt_img1.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/2.jpg','<i>legend2</i>','');return true"><img src="../images/pt_img2.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/3.jpg','legend3','');return true"><img src="../images/pt_img3.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/4.jpg','legend4','');return true"><img src="../images/pt_img4.jpg" alt="" width="100" height="75" border="0"></a> 
     &nbsp; <a href="#" onMouseOver="changeImg('../images/5.jpg','legend5','');return true"><img src="../images/pt_img5.jpg" alt="" width="100" height="75" border="0"></a>&nbsp;&nbsp;&nbsp;&nbsp; 
  </td>     
</tr>
</table>
</body>
</html>

il faut que tu encode tes caractères spéciaux en js par contre ca le / en est un ;) de meme que ' etc...

18/09/2006, 15h33
kom23

Ca marche sur IE aussi??
J'ai le même problème qu'avec le innerHTML tout seul.
Firefox: nickel
IE: les légendes ne changent pas, le texte reste celui par défaut. J'utilise IE 6.0. Quelle est ta version?
18/09/2006, 16h37
stanford

huumm bizarre ie6 aussi... (6.0.2900.2180)

si tu fait des tests javacript tout bete avec un div et un innerHTML, ça plante??
18/09/2006, 17h43
kom23

Ca marche nickel sous IE...
C'est encore plus grave que je ne le pensais...:?

Sais-tu d'où peut venir cette erreur?
J'ai le point d'exclamation jaune en bas à gauche d'ie qui pointe l'erreur sur une ligne de la fonction pourtant... J'ai essayé d'enlever tout les scripts, sans succès...

En tout cas merci pour ton aide.
18/09/2006, 18h24
stanford

t'a essayer d'enlever tous tes scripts et rien??

bha là, je te conseille de buter tes lignes petit a petit pour voir pile poil d'ou ça viens ;)

ou alors de mettre des alert partout ;)
18/09/2006, 19h07
kom23

Ca vient de la balise <p> contenue dans la légende ou des propriétés CSS liées à la balise ou la classe (comme les propriétés de marges)

J'en saurai plus demain après une bonne nuit de sommeil..

Merci pour le coup de main ;)
19/09/2006, 10h23
kom23

[ Posté par guySk ] :

Citation:

Essaie d'ajouter un element div dans cette partie:

<p id="textP">Déplacez la souris sur les photos
pour les afficher avec leur légende correspondante.</p>

ce qui donne :

<p><div id="textP">Déplacez la souris sur les photos
pour les afficher avec leur légende correspondante.</div></p>

Waw, ca y'est le code est compatible
19/09/2006, 11h40
stanford

:ccool:

mais du coup peut etre ton tag <p> ne te sert plus ;)