Bonjour,
J'ai réalisé un diaporama dont le fonctionnement me convient, mais j'aimerais simplifier la page appelante.
La page qui permet de l'appeler se présente comme suit :
Code : Tout sélectionner
<html>
<head>
<script language="javascript" src="diaporama.js" type="text/javascript"></script>
<script language="javascript" src="config_diaporama.js" type="text/javascript"></script>
</head>
<body onload="InitDiaporama()">
Ceci est une page de test pour mettre au point le diaporama javascript.
<div id='diaporama'>
<div id='dimage1' style='position: absolute;'>
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image1' alt='' />
</div>
<div id='dimage2' style='position: absolute;'>
<a href="" id="lien">
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image2' alt='' />
</a>
</div>
</div>
Ceci est le bas de page...
<div id='debug_diaporama'>
</div>
</body>
</html>
Pour simplifier, j'aimerais que ce soit le code javascript qui écrive une partie des div afin de n'avoir par exemple que :
Code : Tout sélectionner
<html>
<head>
<script language="javascript" src="diaporama.js" type="text/javascript"></script>
<script language="javascript" src="config_diaporama.js" type="text/javascript"></script>
</head>
<body onload="InitDiaporama()">
Ceci est une page de test pour mettre au point le diaporama javascript.
<div id='diaporama'>
</div>
Ceci est le bas de page...
<div id='debug_diaporama'>
</div>
</body>
</html>
et que ce soit le code javascript qui rajoute :
Code : Tout sélectionner
<div id='dimage1' style='position: absolute;'>
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image1' alt='' />
</div>
<div id='dimage2' style='position: absolute;'>
<a href="" id="lien">
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image2' alt='' />
</a>
</div>
dans le div diaporama.
J'ai essayé par :
Code : Tout sélectionner
document.getElementById('diaporama').InnerHTML="<div id='dimage1' style='position: absolute;'>\n"
document.getElementById('diaporama').InnerHTML+=" </div>\n"
ou bien
Code : Tout sélectionner
longueurCible = document.getElementById('diaporama').firstChild.length;
document.getElementById('diaporama').firstChild.replaceData(0, longueurCible, "<div id='dimage1' style='position: absolute;'>\n</div>");
dans les deux cas, je n'arrive pas à atteindre mon élément 'dimage1' par document.getElementById('dimage1').
Pour résumer : quand je change le contenu d'un div pour ajouter un nouvel élément au document, je n'arrive pas à accéder à ce nouvel élément.
Je commence à douter que c'est possible, avez-vous une idée ?
D'avance merci pour vos réponses.
Bonjour,
J'ai réalisé un diaporama dont le fonctionnement me convient, mais j'aimerais simplifier la page appelante.
La page qui permet de l'appeler se présente comme suit :
[code]<html>
<head>
<script language="javascript" src="diaporama.js" type="text/javascript"></script>
<script language="javascript" src="config_diaporama.js" type="text/javascript"></script>
</head>
<body onload="InitDiaporama()">
Ceci est une page de test pour mettre au point le diaporama javascript.
<div id='diaporama'>
<div id='dimage1' style='position: absolute;'>
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image1' alt='' />
</div>
<div id='dimage2' style='position: absolute;'>
<a href="" id="lien">
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image2' alt='' />
</a>
</div>
</div>
Ceci est le bas de page...
<div id='debug_diaporama'>
</div>
</body>
</html>
[/code]
Pour simplifier, j'aimerais que ce soit le code javascript qui écrive une partie des div afin de n'avoir par exemple que :
[code]<html>
<head>
<script language="javascript" src="diaporama.js" type="text/javascript"></script>
<script language="javascript" src="config_diaporama.js" type="text/javascript"></script>
</head>
<body onload="InitDiaporama()">
Ceci est une page de test pour mettre au point le diaporama javascript.
<div id='diaporama'>
</div>
Ceci est le bas de page...
<div id='debug_diaporama'>
</div>
</body>
</html>
[/code]
et que ce soit le code javascript qui rajoute :
[code] <div id='dimage1' style='position: absolute;'>
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image1' alt='' />
</div>
<div id='dimage2' style='position: absolute;'>
<a href="" id="lien">
<img src='' style='position: absolute; border: 0 none; width: 0; height: 0;' id='image2' alt='' />
</a>
</div>
[/code]
dans le div diaporama.
J'ai essayé par :
[code]document.getElementById('diaporama').InnerHTML="<div id='dimage1' style='position: absolute;'>\n"
document.getElementById('diaporama').InnerHTML+=" </div>\n"[/code]
ou bien
[code]longueurCible = document.getElementById('diaporama').firstChild.length;
document.getElementById('diaporama').firstChild.replaceData(0, longueurCible, "<div id='dimage1' style='position: absolute;'>\n</div>");[/code]
dans les deux cas, je n'arrive pas à atteindre mon élément 'dimage1' par document.getElementById('dimage1').
Pour résumer : quand je change le contenu d'un div pour ajouter un nouvel élément au document, je n'arrive pas à accéder à ce nouvel élément.
Je commence à douter que c'est possible, avez-vous une idée ?
D'avance merci pour vos réponses.
