Posez votre question Format imprimable Liste des forums Aidez-les Statistiques Rechercher Charte Forum Webmastering

Naviger sur la meme page

Dernière réponse le 23 oct 2009 à 19:05:31 salah2526, le 23 oct 2009 à 13:20:04

Signaler ce message aux modérateurs

Bonjour,

Sur une seul page j'ai une dizaine de liens hypertext a gauche , chaque lien sert a afficher un titre, une image et un paragraphe dons le centre de la page. lorsque le visiteur clique sur un lien je veux afficher au centre sans l'image le titre et le paragraphe correspond sans recharger la page. En plus je veut pas utiliser des frame.

Je serais tres reconnaisant pour ce qui me proposer une solution.

Merci

Configuration: Windows XP
Firefox 3.5.3

Meilleures réponses pour « Naviger sur la meme page » dans :

Plusieurs pages d'accueil pour son navigateur Voir Plusieurs pages d'accueil au démarrage Il est possible d'avoir plusieurs pages d'accueil au démarrage des navigateurs internet. Toutefois, il faut ruser pour y parvenir avec la version actuelle de Microsoft Internet Explorer. Le plus simple est...

Comment changer la page d'accueil de son navigateur WEB ? Voir Vous voulez changer la page d'accueil de votre navigateur web ? Voici comment procéder : Sous Internet Explorer Sous Mozilla Firefox Sous Opéra Les moteurs de recherche Plusieurs pages d'accueil pour son navigateur Sous Internet...

Ouvrir une page differente selon navigateur (Résolu) Voir

[Webmaster] Publier facilement une vidéo dans une page web VoirPublier une vidéo dans une page web n'est pas toujours évident: Selon le format (AVI, MPG, MOV...) tout le monde ne possède pas forcément le bon plugin et le bon codec. En revanche, la quasi-totalité des navigateurs possèdent le plugin Flash (SWF)....

Tester son site sous plusieurs navigateurs Voir

On peut cacher le code source d'une page HTML VoirMythe: On peut cacher le code source d'une page HTML. Réalité: FAUX. Explications: Pour pouvoir afficher une page web (HTML), le navigateur doit - à un moment où un autre - avoir le code HTML en clair. Il y a donc toujours moyen de le...

Navigation vers la page web annulée Voir

Page blanche au lancement du navigateur Voir

[Client navigation] Page chiffrée Voir

Web - Le navigateur VoirLe navigateur web Le «navigateur» est l'outil de l'internaute, lui permettant de surfer entre les pages web de ses sites préférés. Il s'agit d'un logiciel possédant une interface graphique composée de boutons de navigation, d'une barre d'adresse,...

Javascript - Les objets du navigateur VoirPrésentation des objets du navigateur Lorsque vous ouvrez une page Web, le navigateur crée des objets prédéfinis correspondant à la page Web, à l'état du navigateur, et peuvent donner beaucoup d'informations qui vous seront utiles. Les objets de...

PHP - Affichage de texte sur le navigateur VoirLe but de PHP est de permettre la création de pages web dynamiques, ainsi son but premier est de pouvoir envoyer des données au navigateur. Les trois fonctions standards PHP fournit 3 fonctions permettant d'envoyer du texte au navigateur. Ces...

Posez votre question Répondre

incaout, le 23 oct 2009 à 13:45:34

Salut

En Php, tu peux utiliser des includes sur toutes tes pages. Tu crées une page HTML avec ton menu gauche et sur tes autres pages, tu insères à l'aide d'un include la page de ton menu de gauche.

Chaque page que tu appeleras intégrera de fait le menu gauche ce qui donnera l'impression de rester toujours sur la même page.

Si tu veux rester en html uniquement, tu peux utiliser javascript pour changer le contenu de ta zone centrale à l'aide du modele Document Object Model (DOM). Mais le contenu de ce que tu veux afficher doit figurer dans tes scripts.

Cdlt

IC

Répondre à incaout

salah2526, le 23 oct 2009 à 14:07:46

Bonjours,

Merci pour votre repense, je croix que la solution du javascript sera plus facil pour un debutant comme moi, mais comment faire pour qu'au chargement de la page, afficher le conenus du premier lien et cacher les autres titres images et paragraphes des autres liens. la page ne sera elle pas tros chargée?

Répondre à salah2526

avion-f16, le 23 oct 2009 à 14:36:13

Avec PHP, il faudra forcément un rechargement de la page.
Ce que tu veux faire est faisable avec du Javascript. Comme incaout le dis, tu devras utiliser l'objet DOM pour changer le contenu de ton div "contenu". Tu peux aussi construire ton site normalement puis utiliser de l'AJAX : quand on clique sur un lien, une requête est envoyé pour récupérer le HTML de la page cible et ensuite, tu récupères seulement le contenu avec une regex et pour terminer, tu utilises DOM pour mettre le nouveau contenu à la place de l'autre. Tu peux utiliser des bibliothèques comme JQuery (ou Script.aculo.us, Prototype, Mootools, ...) pour avoir plus facile et aussi pour faire des effets de fondu. Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Répondre à avion-f16

incaout, le 23 oct 2009 à 18:02:35

Salut

Je ne suis pas sur que ce sera plus facile en javacript. Une solution peut consister à construire ta page HTML sous la forme de DIV que tu pourras masquer ou afficher à volonté. L'intérêt de cette méthode est que les fonctions javascript à coder sont plutot simples : masquer tous les DIV et n'afficher que celui demandé. De plus, ce sera plus facile pour toi d'écrire le contenu de tes DIV directement en HTLM, plutot que de tout écrire dans des fonctions javascript.

Le principe :

1 menu gauche avec des titres d'articles ou de pages. Un événement onclick sur chaque titre qui lance une fonction javascript d'affichage et lui passe en paramètre l'id de la div à afficher

<div id="menu">
<span onclick="Affiche('article1');">Article 1</span>
<span onclick="Affiche('article2');">Article 2</span>
</div>

Dans la partie centrale, autant de <DIV> que d'articles à afficher. Chaque <DIV> recoit un id.
Le Div central permet d'isoler les div à afficher ou à masquer des autres Div de la page.

<div id="central">
<div id="article1" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>

<div id="article2" class="zone">
<p>Titre</p>
<p>contenu</p>
</div>
</div>

Il te faut aussi une feuille de style qui définit pour le style commun pour chaque div ses propriétés d'affichage
Toutes tes Div ont le même style. L'article qui doit être affiché par défaut a sa propriété display à block

<head>
<style type="text/css">
.zone {display : none; position :absolute; top:80px; left:120px; width:450px; height:300px;}
#article1{display:block;}
</style>
</head>

Enfin une fonction javascript qui masque tous les articles (propriété display à none) et affiche l'article demandé (propriété display à block).

function affiche(id)
{
if(document.getElementById(id))
{
eltAffiche = document.getElementById(id);

//masque toutes les zones
var cadre = document.getElementById("central");
//recupère dans un tableau tous les div présent dans le div central
var zones = cadre.getElementsByTagName("div");
//parcours le tableau et masque toutes les zones
for(c=0;c<zones.length;c++)
{
zones[c].style.display = "none";
}
//affiche la zone demandée
eltAffiche.style.display = "block";
}
}

Voilà, je te laisse assembler tout cela, tester et compléter. Il se peut qu'il y ait des bugs, je n'ai pas testé. Si tu as des questions, n'hésites pas.

Bon courage.

IC

Répondre à incaout

avion-f16, le 23 oct 2009 à 18:13:33

Oui, et ceux qui n'ont pas le Javascript d'activer ne peuvent pas naviguer ...
Ce n'est pas pour rien que j'ai dis “Tu peux aussi construire ton site normalement puis utiliser de l'AJAX”. Avec ma technique, même si le visiteur n'a pas JS d'activé, il pourra naviguer normalement.
Avec ta technique, il y a de grande chance que du contenu soit chargé pour rien si le visiteur ne visite que quelques pages (même si le contenu n'est pas visible, le navigateur charger les images etc...). Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Répondre à avion-f16

incaout, le 23 oct 2009 à 18:27:46

Oui, c exact, mais utiliser ajax, suppose d'avoir derrière un langage de script cote serveur du genre PHP ou équivalent. C'est pour cela que le système des include me semblait le mieux adapté.

Sinon, il faut gérer un affichage pour les navigateurs n'ayant pas javacript activé.

Répondre à incaout

avion-f16, le 23 oct 2009 à 18:30:44

Euh, j'ai l'impression que tu te contredis, faut savoir quoi quand même :

Oui, c'exacte, mais utiliser ajax, suppose d'avoir derrière un langage de script cote serveur du genre PHP ou équivalent. C'est pour cela que le système des include me semblait le mieux adapté.

?? Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Répondre à avion-f16

incaout, le 23 oct 2009 à 18:45:32

Je me contredis en quoi ?
J'ai toujours vu Ajax envoyer une requête à un script serveur et récupérer le traitement fait par celui ci sous la forme de données texte ou XML. Peut être existe t'il une fonction qui permette de récupérer directement le contenu d'un lien html avec Ajax, mais je ne la connais pas.

Si ca existe, par curiosité, ca m'intéresse.

Répondre à incaout

avion-f16, le 23 oct 2009 à 18:52:46

Toi, tu dis “utiliser ajax, suppose d'avoir derrière un langage de script cote serveur” mais utiliser des includes ne suppose pas non plus d'utiliser du PHP ?
De toutes façon, ma technique ne nécessite pas forcément d'utiliser du PHP sur le serveur : avec AJAX, tu peux très bien charger une simple page HTML. Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Répondre à avion-f16

incaout, le 23 oct 2009 à 18:59:17

Si, on est d'accord, les includes supposent du PHP. C'est d'ailleurs ce que j'avais dit dans ma première réponse. Mais il préfère ne pas utiliser de PHP. C pour cette raison que pour moi ajax ne pouvait pas non plus être retenu s'il utilisait du PHP aussi.

Par contre, si tu as des infos ou des docs sur l'utilisation d'Ajax pour charger une page HTML, cela m'interesse.

Répondre à incaout

avion-f16, le 23 oct 2009 à 19:05:31

Pour charger une page HTML, c'est la même technique qu'une page PHP.
Il ne faut pas hésiter à s'imaginer des schémas pour visualiser le fonctionnement d'une technologie (encore faut-il le savoir). En gros, AJAX permet de récupérer la source d'une page ou même de n'importe quel type de fichier comme le ferai le navigateur en tapant l'url du fichier. Si tu es connecté sur un site et que tu lances une requête AJAX vers un fichier PHP, ce fichier réagira de la même façon que si tu tapais son URL dans la barre d'adresse. Quand on sait ça, c'est logique que l'on puisse faire des requêtes AJAX vers du HTML : le navigateur ignorent que c'est du PHP, il récupère juste ce que lui renvoye le serveur Web. Ton ordinateur ne fait pas ce que tu veux ... mais ce que tu lui dis de faire.

Répondre à avion-f16

Posez votre question Répondre