changer une image au survol d'un lien + charger du contenu

[pixee]

Bonjour,

Je dois faire un site rapidement à partir d'une interface imposée.
Il y a un menu, et à gauche de la page des formes géométriques noires. Quand je clique sur un lien du menu, il doit changer de couleur (ça ok) et une des formes doit changer de couleur en même temps.
Ca je ne vois pas comment faire. Car les images ne sont pas à côté du menu mais ailleurs dans le design. Je ne sais pas si je dois utiliser un javascript pour faire ça? Je ne m'y connais pas du tout en js...

Autre chose il faut que le contenu des pages s'affiche sans recharger la page à chaque fois. Est-ce que je dois utiliser une Iframe ou y'a-t-il d'autres moyens? J'ai cru comprendre que les frames n'étaient plus très recommandées.

Merci par avance à ceux qui m'apporteront leur aide. A bientôt

[zeb]

Autre chose il faut que le contenu des pages s'affiche sans recharger la page à chaque fois. Est-ce que je dois utiliser une Iframe ou y'a-t-il d'autres moyens? J'ai cru comprendre que les frames n'étaient plus très recommandées.

Je pense que la solution a ce cas de figure passe par Ajax.

[dorian53]

Autre chose il faut que le contenu des pages s'affiche sans recharger la page à chaque fois. Est-ce que je dois utiliser une Iframe ou y'a-t-il d'autres moyens? J'ai cru comprendre que les frames n'étaient plus très recommandées.

Je pense que la solution a ce cas de figure passe par Ajax.

A condition que tu trouves une méthode pour indexer ton contenu issu d'AJAX, sinon ce n'est pas plus recommande qu'une iframe au point de vue référencement.

[pixee]

Merci... je ne connais pas Ajax, je vais aller jeter un oeil, depuis le temps que j'en entends parler.

Solution pour le changement des images au survol des liens?

[nickargall]

Autre chose il faut que le contenu des pages s'affiche sans recharger la page à chaque fois. Est-ce que je dois utiliser une Iframe ou y'a-t-il d'autres moyens? J'ai cru comprendre que les frames n'étaient plus très recommandées.

Je pense que la solution a ce cas de figure passe par Ajax.

A condition que tu trouves une méthode pour indexer ton contenu issu d'AJAX, sinon ce n'est pas plus recommande qu'une iframe au point de vue référencement.

On peut tout a fait mettre en place de l'ajax pour afficher du contenu sans recharger la page tout en faisant attention à ce que le contenu affiché soit indexable par les moteurs de recherche:

Code: Tout sélectionner

<a href="page2.html" onClick="Affiche_le_contenu('page2');">page2</a>


la fonction affiche_le_contenu fait appel à de l'Ajax qui recharge le contenu central de la page et le moteur de recherche peut toujours indexer la page page2.html en suivant le lien.

Bon après comment faire la fonction ajax, j'en sais rien

[nickargall]

Merci... je ne connais pas Ajax, je vais aller jeter un oeil, depuis le temps que j'en entends parler.

Solution pour le changement des images au survol des liens?

il te faudra donner des identifiants id aux images que tu souhaites modifier et placer des fonctions javascript qui modifieront la source des images identifiées au survol des liens.

[Marie-Aude]

Solution pour le changement des images au survol des liens?

On peut jouer en pur css sur des spans liés à la propriété a:active, a:hover

Regarde ce que j'ai fait pour le menu principal de mon www, pas une once de java

[zeb]

pour le chargement de contenu :

dans la page 'interface' qui doit voir son contenu changé tu met une div de ce style:

Code: Tout sélectionner

     <div class="contenu" id="box_contenu">
     </div>

ensuite il te faut un script ajax pour faire le travail (ce script est aussi sur la page 'interface') :

Code: Tout sélectionner

   // connexion serveur et récupération d'une page
   function getPage(x){
      var xhr=null;
      
      if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xhr.open("GET", "http://www.monsite.com/getPage.php?&id="+x, false);
      xhr.send(null);
      
      obj = document.getElementById("box_contenu");
      obj.innerHTML = xhr.responseText;
   }

comme le fait remarquer Nickargall il te faux un beau lien (ou un bouton, enfin tout ce qui est susceptible de gérer un évènement javascript)

Code: Tout sélectionner

   <a href="page2.html" onClick="getPage('page2');">page2</a>

et pour finir sur ton serveur il te faux réaliser un script php capable de te renvoyer ton contenu (justement le script qu'ajax va appeler) soit dans cet exemple : getPage.php

dans ce script php tu fais ce que tu veux du moment qu'a la fin du script tu as :

Code: Tout sélectionner

   echo $ton_contenu;

Le contenu demandé sera identifié dans ce script grâce a la variable id passé en GET. d'ou :

Code: Tout sélectionner

   // identifiant du contenu désiré
   $id = $_GET['id'];
   (...)
   génération du contenu
   (...)
   echo $ton_contenu;

a la sortie de ce script appelé par ajax, ta div de la page recevra $ton_contenu.

Les remarques liées au ref sont a prendre sérieusement en compte s'il s'agit d'un site mais si tu travaille sur une interface d'intranet ou sur un truc d'administration de site tu n'en a rien a faire puisque ce genre de pages ne sont pas indexées.

[pixee]

Merci Marie-Aude pour ton idée de CSS, j'ai testé d'une autre façon avec mes images et ça fonctionne parfaitement.

Zeb, je n'arrive pas à faire fonctionner le script.
En fait la page interface affiche le lien page2, mais lorsque je clique dessus ça m'envoie directement page2.html sans l'afficher dans le div et donc comme s'il n'y avait aucun script sur ma page.

Voici la page :

Code: Tout sélectionner

<html>
<head>
<script type="text/javascript" language="javascript">
// connexion serveur et récupération d'une page
   function getPage(x){
      var xhr=null;
     
      if (window.XMLHttpRequest) {
         xhr = new XMLHttpRequest();
      }
      else if (window.ActiveXObject) {
         xhr = new ActiveXObject("Microsoft.XMLHTTP");
      }

      xhr.open("GET", "http://localhost:8888/test/getPage.php?&id="+x, false);
      xhr.send(null);
     
      obj = document.getElementById("box_contenu");
      obj.innerHTML = xhr.responseText;
   }
   </script>
</head>

<body>
<a href="page2.html" onClick="getPage('page2');">page2</a>
<div  id="box_contenu"></div>
</body>
</html>

Mais concrètement dans le script php je mets quoi? (à la place de (...), de ton_contenu...)

En fait je vois pas le rapport entre ton_contenu et le contenu de la page2.html... comment le script peut l'identifier comme ça? je précise que je suis une noob en php. (et en js aussi d'ailleurs )

Et du coup, puisque le site sera public, est-ce que c'est une meilleure solution que les frames niveau ref?

[zeb]

remplace le lien ici :

Code: Tout sélectionner

<a href="page2.html" onClick="getPage('page2');">page2</a>

par celui ci :

Code: Tout sélectionner

<a href="page2.html" onmouseover="getPage('page2');">page2</a>

et ne clique pas dessus mais contente toi de passer la sourie dessus (onmouseover) ça devrais déclencher le script ajax. (vérifie si onmouseover s'écrit bien onmouseover)

Mais concrètement dans le script php je mets quoi? (à la place de (...), de ton_contenu...)

ça c'est a toi de voir mais pour faire un test met juste une ligne du style :

Code: Tout sélectionner

echo "contenu de la page 2";

En fait je vois pas le rapport entre ton_contenu et le contenu de la page2.html... comment le script peut l'identifier comme ça? je précise que je suis une noob en php. (et en js aussi d'ailleurs Smile )

comprend pas bien ta question.

sinon un exemple ici : -http://www.imperial-abri.com/
quand la sourie passe par dessus les boutons du menu a droite (accueil, entreprise, ...) les contenu de la boite en dessous (avec une ampoule) change. l'appel de fait sur la commande onmouseover du lien qui est située dans le script ici : -http://www.imperial-abri.com/javascript.js ( a noter que le changement d'image du bouton se fait avec CSS comme t'en parle Marie-Aude )

Code: Tout sélectionner

<a href="http://www.imperial-abri.com/" title="Impérial Abri" onmouseover="setpromo(2);" onmouseout="unsetpromo()">Accueil</a>

Et du coup, puisque le site sera public, est-ce que c'est une meilleure solution que les frames niveau ref?

si tu as un site map et / ou des liens en dur les moteurs vont te référencer correctement, donc c'est juste pour une histoire d'ergonomie de l'application. Mais dans tous les cas c'est se compliquer la vie car il va te faloir de vrais pages (pour les moteurs) et le contenu de tes pages ailleurs pour ajax.
Les frames serait plus simple mais c'est vraiment plu le truc a utiliser en 2008 (pour entre autre aussi la difficulté de bien référencer ce type de structure.)

Ton cahier des charges est figé ou tu peut le faire évoluer ?

[pixee]

Disons que le cahier des charges n'est pas figé, mais le design général implique le fait que les pages s'affichent dans une frame : il y a une partie gauche très graphique, très présente, qui sert aussi de menu, avec des formes géométriques qui changent de couleur lorsqu'on passe sur le menu.
La partie droite quant à elle est une zone de contenu un peu à la façon d'une boite de texte en Flash.
En gros le rafraichissement de la page casse un peu l'esprit dans lequel le site a été conçu par la graphiste.
Il me semble pourtant que je vois souvent des sites avec des frames, ou alors c'est autre chose que des frames, mais ça y ressemble. La méthode avec Ajax me semble maintenant un peu compliquée du fait que je n'ai que très peu de connaissances en javascript et php...
Merci en tous cas d'avoir pris le temps de développer ces réponses...

[zeb]

Disons que le cahier des charges n'est pas figé, mais le design général implique le fait que les pages s'affichent dans une frame : il y a une partie gauche très graphique, très présente, qui sert aussi de menu, avec des formes géométriques qui changent de couleur lorsqu'on passe sur le menu.
La partie droite quant à elle est une zone de contenu un peu à la façon d'une boite de texte en Flash.
En gros le rafraichissement de la page casse un peu l'esprit dans lequel le site a été conçu par la graphiste.
Il me semble pourtant que je vois souvent des sites avec des frames, ou alors c'est autre chose que des frames, mais ça y ressemble. La méthode avec Ajax me semble maintenant un peu compliquée du fait que je n'ai que très peu de connaissances en javascript et php...
Merci en tous cas d'avoir pris le temps de développer ces réponses...

disons que si la graphiste n'est pas heureuse c'est un peut son problème. En revanche si tu dois sacrifier 'la technique' pour la contenter, c'est le SEO qui va faire la tronche et s'il n'y a pas de visiteurs car c'est bancal, c'est le webmaster qui va déprimer ...
faux trouver une solution intermédiaire.

Un truc, au passage, est d'utiliser en fond de page une image qui comprend le max d'éléments fixe du site. comme cela a chaque changement de page, le cache du navigateur te recrache l'image aisément, et tu as moins l'impression de changer de page entre chaque clic. Si de plus le contenu est simple, il se chargera rapidement donc cela te conserve la fludité.
Pour ce qui est des changement de couleurs, tout en gardant la notion d'images et de CSS tu peut facilement dynamiser tes pages sans pour autant perdre ta fluidité (a charge de préloader les images avant qu'elles soit utilisées)

implique le fait que les pages s'affichent dans une frame

dans une frame, une div ou ... c'est un peut la même chose en tous cas c'est plus propre en div et plus simple a placer (a mon sens avec mon expérience perso).

[zeb]

si tu veux et si tu peux uploader deux pages qque part, j'aimerais bien voir concrètement le truc pour me faire une vrai idée et peut être proposer du 'plus adapté'

[Leonick]

sauf que si dans le div on inclus le contenu entier d'une page html, il va y avoir un sacré problème de contenu au total : 2 balises html, head, body, ...

[Hearty]

Tu peux faire inclure uniquement ce qui est entre les balises body par javascript