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

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

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

JavaScript

Vue hybride

Discussions similaires

Partager

Partager