XMLHttpRequest et page web

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : XMLHttpRequest et page web

armand_c

Bonjour,

Je voudrais créer une page dynamique avec XMLHttpRequest.
En gros en haut de la page il y a une image et dessous un tableau avec 2 colonnes.
Dans la colonne de gauche il y a des liens.
Lors du clic sur un lien, l'image d'en haut change ainsi que le texte de la colonne de droite.

Comment puis je faire ?

Merci

Publicité

MainMa

Vous pouvez déjà aller voir du coté de Google... En cherchant "XMLHttpRequest", vous tombez sur un grand nombre du tutoriels qui vous expliquent comment est-ce qu'il faut l'utiliser.

Après, si vous avez des problèmes plus précises, n'hésitez pas à venir demander de l'aide.

armand_c

C'est déjà fait, mais je n'ai trouvé que des exemples remplissant des listes ou des zones de texte. Je n'est rien trouvé sur comment changer une image

MainMa

Et bien...

Vous avez fait quoi déjà par vous même, comme code ?

armand_c

J'ai déjà utilisé xmlhttprequest pour afficher une info bulle http://opp2.free.fr/saisons_precedentes.php. C'est une fonction javascript qui est appelé au passage de la souris.
Je ne comprends pas comment modifier un contrôle (image par exemple) qui ne se trouve pas à l'emplacement de la souris et du lien sur lequel je veux cliquer.

En javascript je ne sais faire que des choses simples.

Message cité 1 fois

MainMa

armand_c a écrit :

Je ne comprends pas comment modifier un contrôle (image par exemple) qui ne se trouve pas à l'emplacement de la souris et du lien sur lequel je veux cliquer.

Ah. D'accord. Je vois.

Lorsque vous avez dans le code HTML, par exemple :

[...]
<div id="tam">Texte à modifier</div>
[...]

Il vous suffit, pour modifier le contenu du <div> avec JavaScript, de faire :

Code :

objTam = document.getElementById('tam'); // Création de la variable objTam, qui permet de manipuler l'objet <div>
if (objTam) // Il faut toujours vérifier si l'objet a bien été trouvé avant de le manipuler
{
objTam.innerHTML = 'Le texte vient d\'être <b>modifié</b> !';
}

Par la suite, vous pouvez mettre ensemble les requêtes AJAX et la modification du contenu de vos éléments, et jouer sur le contenu HTML, le contenu texte ou l'apparence d'un objet précis de la page.

MainMa

Et pour les images, vous pouvez utiliser la propriété "src", en lui attribuant la valeur de l'emplacement de la nouvelle image.

armand_c

d'accord, merci beaucoup je vais essayer.
en fait il faut que j'apprenne à utiliser les div, ça a l'air riche comme objet.

armand_c

Je viens de faire un test.
Ca marche avec du texte et pas avec les images. Y a t'il un raffraichissement à demander ?

MainMa

Normalement, tout est fait automatiquement.

Pouvez vous poster ici votre code ?

Publicité

armand_c

<html>
<head>
<script language="javascript">
//Lecture du contenu d'un fichier
function imageEnTete(page){
objTam = document.getElementById('tam'); // Création de la variable objTam, qui permet de manipuler l'objet <div>
if (objTam) // Il faut toujours vérifier si l'objet a bien été trouvé avant de le manipuler
{
if (page == "page1" ) {
objTam.src="images/image1.jpg";
objTam.innerHTML = page;
}
if (page == "page2" ) {
objTam.src="images/image2.jpg";
objTam.innerHTML = page;
}
}
objTam2 = document.getElementById('tam2'); // Création de la variable objTam, qui permet de manipuler l'objet <div>
if (objTam) // Il faut toujours vérifier si l'objet a bien été trouvé avant de le manipuler
{
if (page == "page1" ) {
objTam2.innerHTML = "Je suis le test de <b>page1</b>";
}
if (page == "page2" ) {
objTam2.innerHTML = "Je suis le test de <b>page2</b>";
}
}
}
</script>
</head>
<body>
<table width="80%" align="center" border="1">
<tr>
<td width="25%">
logo OPP
</td>
<td width="75%">
<div id="tam"><img src=""></div>
</td>
</tr>
<tr>
<td>
<a href=# onclick="javascript:imageEnTete('page1');">Page 1</a>
<br><a href=# onclick="javascript:imageEnTete('page2');">Page 2</a>
</td>
<td>
<div id="tam2"> </div>
</td>
</tr>
</table>
</body>
</html>

MainMa

Si vous changez l'image, ne le faites pas sur un <div></div>, mais sur un <img />, l'élément <div></div> n'ayant pas cette propriété.

armand_c

ok j'ai trouvé.
il faut que je passe la balise <img dans innerText.
objTam.src ne marche pas

merci pour vos aides

MainMa

Mais surtout pas !

Manipulez directement l'image.

Le code HTML d'origine doit donc être :

Code :

[...]
<img id="demoImg" src="images/image0.jpg" alt="Demo" />
[...]

Et le code JavaScript qui va modifier l'image :

Code :

objDemoImg = document.getElementById('demoImg');
if (objDemoImg) objDemoImg.src = 'images/image1.jpg';

armand_c

bien noté

merci

FORUM HardWare.fr

Programmation

HTML/CSS

XMLHttpRequest et page web

Sujets relatifs
Est il possible de forcer l'impression d'une page en recto verso	Forcer un signet
[Résolu] Image en fonction du nom de la page	récuperer infos d'une page web (parsing)
espace avant pied de page	[ ASP ] Fonction include d'une page HTTP situé sur un autre serveur
Afficher du code en couleur dans une page HTML	afficher un pdf dans une page html/php
[résolu] Random page promo	[résolu] PHP : lire une page web et séparation paramètres
Plus de sujets relatifs à : XMLHttpRequest et page web

Page générée en 0.044 secondes