Problème avec document.ElementById
Anonymous
-
Airmanbzh Messages postés 122 Statut Membre -
Airmanbzh Messages postés 122 Statut Membre -
Bonjour,
Alors voila mon problème : jai cré une page html au format 480x272 (format conçu pour console psp) et j'ai cré un genre de petit menu démarrer ou j'aimerais que lors du clic, la table du menu s'ouvre sur la meme page html. on ma conseillé ceci :
citation:
hum tu peu tenter de mettre ta table (fenettre) en "position:absolute" et en la mettant en dehor de l'ecran (left:2000;top:1000;) pui lorsque la personne clique sur le lien sa fait un
Code:
document.getElementById('maTable').style.left='100px';
document.getElementById('maTable').style.top='20px';
sa donnera l'impression de voir une fenettre apparaitre sans pour autant changer la page
<!--fin de la citation
alors le truc c'est que jai reussi a placer la table en positon absolute en left:2000 et top:1000 mais mtn je dois placer ou le code : document.getElementById('matable') ... ? et quel lien doi-je mettre a l'image pour permetre laparition de la fenetre?
Merci d'avance pour votre aide ;-)
Alors voila mon problème : jai cré une page html au format 480x272 (format conçu pour console psp) et j'ai cré un genre de petit menu démarrer ou j'aimerais que lors du clic, la table du menu s'ouvre sur la meme page html. on ma conseillé ceci :
citation:
hum tu peu tenter de mettre ta table (fenettre) en "position:absolute" et en la mettant en dehor de l'ecran (left:2000;top:1000;) pui lorsque la personne clique sur le lien sa fait un
Code:
document.getElementById('maTable').style.left='100px';
document.getElementById('maTable').style.top='20px';
sa donnera l'impression de voir une fenettre apparaitre sans pour autant changer la page
<!--fin de la citation
alors le truc c'est que jai reussi a placer la table en positon absolute en left:2000 et top:1000 mais mtn je dois placer ou le code : document.getElementById('matable') ... ? et quel lien doi-je mettre a l'image pour permetre laparition de la fenetre?
Merci d'avance pour votre aide ;-)
6 réponses
tu n'as pas besoin de mettre de "liens" ou pas tout à fait.
Il va falloir que tu fasses comme ça :
Le plus propre serait que tu insères ton code javascript dans une fonction à part telle que :
et tu appelerai sur l'événement on click :
Il va falloir que tu fasses comme ça :
<a href="#" onclick="document.getElementById('maTable').style.left='100px';
document.getElementById('maTable').style.top='20px';">
<img src="blabla" width="x" height="y" />
</a>
Le plus propre serait que tu insères ton code javascript dans une fonction à part telle que :
function appel_table(page)
{
document.getElementById(page).style.left='100px';
document.getElementById(page).style.top='20px';
}
et tu appelerai sur l'événement on click :
onclick="appel_table('maTable')"
Ok merci beaucoup mais la ou ya écrit ('maTable') je dois carément copier toute la table (code html) dedan?
Voici ma table :
<table style="left: 53px; width: 305px; top: 3px; height: 230px;" background="startmenu/startmenu02.png" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td style="text-align: center;"><a href="avatars.html"><img style="border: 0px solid ; width: 70px; height: 70px;" src="avatar.png" alt=""></a></td>
</tr>
<tr height="135">
<td colspan="3" class="menu2"><big> </big>
<ul style="font-family: Segoe UI;">
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="#" style="text-decoration: none;">News</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="liens.html" style="text-decoration: none;">Liens</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Forum<br>
</big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="#" style="text-decoration: none;">Jeux</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Help</big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Réglages</big></big></big></big></li>
</ul>
<a href="index_s.html"><img style="border: 0px solid ; width: 54px; height: 22px;" src="sessions.png" alt=""></a><big><big><big><big><br>
</big></big></big></big> </td>
<td style="font-family: Segoe UI; color: rgb(255, 255, 255);"><img src="startmenu/icSM1.png" alt=""><big><big><br>
<img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""><br>
</big></big><img src="startmenu/icSM2.png" alt=""><big><big> <br>
<span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><img src="startmenu/icSM3.png" alt=""><big><big> <br>
<span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><img src="startmenu/icSM4.png" alt=""><br>
<big><big> <span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><a style="color: rgb(255, 255, 255);" href="plus.html"><img style="border: 0px solid ; width: 105px; height: 25px;" src="startmenu/icSM5.png" alt=""></a></td>
</tr>
</tbody>
</table>
<table style="left: 53px; width: 305px; top: 3px; height: 230px;" background="startmenu/startmenu02.png" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td style="text-align: center;"><a href="avatars.html"><img style="border: 0px solid ; width: 70px; height: 70px;" src="avatar.png" alt=""></a></td>
</tr>
<tr height="135">
<td colspan="3" class="menu2"><big> </big>
<ul style="font-family: Segoe UI;">
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="#" style="text-decoration: none;">News</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="liens.html" style="text-decoration: none;">Liens</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Forum<br>
</big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big><a href="#" style="text-decoration: none;">Jeux</a></big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Help</big></big></big></big></li>
<li style="color: rgb(0, 0, 0); font-weight: bold;"><big><big><big><big>Réglages</big></big></big></big></li>
</ul>
<a href="index_s.html"><img style="border: 0px solid ; width: 54px; height: 22px;" src="sessions.png" alt=""></a><big><big><big><big><br>
</big></big></big></big> </td>
<td style="font-family: Segoe UI; color: rgb(255, 255, 255);"><img src="startmenu/icSM1.png" alt=""><big><big><br>
<img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""><br>
</big></big><img src="startmenu/icSM2.png" alt=""><big><big> <br>
<span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><img src="startmenu/icSM3.png" alt=""><big><big> <br>
<span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><img src="startmenu/icSM4.png" alt=""><br>
<big><big> <span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"></span><span class="Apple-style-span" style="border-collapse: separate; font-size: 16px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: normal; orphans: 2; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;"><img style="left: 242px; width: 80px;" src="lignehorizontale.png" alt=""></span><br>
</big></big><a style="color: rgb(255, 255, 255);" href="plus.html"><img style="border: 0px solid ; width: 105px; height: 25px;" src="startmenu/icSM5.png" alt=""></a></td>
</tr>
</tbody>
</table>
Heureusement que tu n'as pas à recopier tout le code html de ta table ^^.
tu as déclaré ton tableau comme ça :
il te suffit d'ajouter un champ id dans la déclaration du tableau :
ensuite tu remplace 'maTable' par le nom que tu as mis après ton id. Ici c'est 'blabla'.
Cdt
tu as déclaré ton tableau comme ça :
<table style="left: 53px; width: 305px; top: 3px; height: 230px;" background="startmenu/startmenu02.png" border="0" cellpadding="0" cellspacing="0"> ... </table>
il te suffit d'ajouter un champ id dans la déclaration du tableau :
<table id='blabla' style="left: 53px; width: 305px; top: 3px; height: 230px;" background="startmenu/startmenu02.png" border="0" cellpadding="0" cellspacing="0"> ... </table>
ensuite tu remplace 'maTable' par le nom que tu as mis après ton id. Ici c'est 'blabla'.
Cdt
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
Jai rajouter la balise manquante a <table> et le lien qui permet d'afficher le menu demarrer est :
<a href="#" onclick="document.getElementById('startmenu').style.left='100px';
document.getElementById('startmenu').style.top='20px';" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','7icon2.png',1)"><img style="border: 0px solid ; width: 73px; height: 30px;" src="7icon.png" name="Image5" alt=""></a>
(il y a un code javascript avec car l'image s'anime lors du passage de la souris)
Et quand je test la page je clic sur limage et sa fait juste LaPageMeme.html# sa mafiche pas la table, ya t'il une faute dans le code ci-dessus?
<a href="#" onclick="document.getElementById('startmenu').style.left='100px';
document.getElementById('startmenu').style.top='20px';" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','7icon2.png',1)"><img style="border: 0px solid ; width: 73px; height: 30px;" src="7icon.png" name="Image5" alt=""></a>
(il y a un code javascript avec car l'image s'anime lors du passage de la souris)
Et quand je test la page je clic sur limage et sa fait juste LaPageMeme.html# sa mafiche pas la table, ya t'il une faute dans le code ci-dessus?
