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>