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

Re: changer une image au survol d'un lien + charger du conte

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

 

Re: changer une image au survol d'un lien + charger du conte

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.

 

Re: changer une image au survol d'un lien + charger du conte

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:

<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

 

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.

 

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

 

pour le chargement de contenu :

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

Code:

     <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:

	// 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:

   <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:

   echo $ton_contenu;

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

Code:

   // 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.

 

remplace le lien ici :

Code:

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

par celui ci :

Code:

<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)

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

Code:

echo "contenu de la page 2";

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:

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

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 ?

 

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)

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).

 

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é'

 

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, ... :cry:

 

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

 

si le contenu est en base, le problème ne se pose pas .

- affichage suite a requête sgbd dans la div a travers ajax
+
- script php qui génère la page de puis la base aussi .

donc de vrais pages et une interface utilisable.

 

Re: changer une image au survol d'un lien + charger du conte

Tu peux tout à fait faire ça en css pur.
Tu mets tes images dans un span, tu le positionne loin, et tu modifies le span avec le survol.

Regarde par exemple le menu gauche de -http://www.mezgarne.com pour avoir une idée.