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

**kom23** · 07/09/2006, 12h00

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 :

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

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 :

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

**stanford** · 07/09/2006, 12h20

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

exemple :

Code :

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

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>

**kom23** · 07/09/2006, 12h29

C'est beau le talent.
Merci pour tout, ca marche

**kom23** · 14/09/2006, 16h42

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

Auriez-vous une idée pour la faire fonctionner à la fois sur Firefox et Internet explorer?

**SpaceFrog** · 14/09/2006, 16h47

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

**kom23** · 14/09/2006, 16h57

Non, je ne l'utilise plus.

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

Code :

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

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
}

**kom23** · 18/09/2006, 10h46

up

innerHTML ne marche pas avec IE.
Existe t-il une autre syntaxe plus appropriée pour qu'il marche avec les deux explorateurs?

**SpaceFrog** · 18/09/2006, 10h58

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

quel est l'objet dont tu cherches à modifier le contenu ?

**kom23** · 18/09/2006, 11h38

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)

**stanford** · 18/09/2006, 11h59

le innerHTML marche très bien avec ie

ton erreur dois venir d'ailleur, ton objet existe t'il bien?

**kom23** · 18/09/2006, 12h44

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...

**stanford** · 18/09/2006, 14h22

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

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

**kom23** · 18/09/2006, 14h38

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 :

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

&nbsp;<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.

**stanford** · 18/09/2006, 14h42

ok donc la suite :

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

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
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...

**kom23** · 18/09/2006, 15h33

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?

**stanford** · 18/09/2006, 16h37

huumm bizarre ie6 aussi... (6.0.2900.2180)

si tu fait des tests javacript tout bete avec un div et un innerHTML, ça plante??

**kom23** · 18/09/2006, 17h43

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.

**stanford** · 18/09/2006, 18h24

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

**kom23** · 18/09/2006, 19h07

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

**kom23** · 19/09/2006, 10h23

[ Posté par guySk ] :

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

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

JavaScript

Discussions similaires

Partager

Partager