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

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par pixee, 8 Janvier 2008.

  1. pixee
    pixee Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    6
    J'aime reçus:
    0
    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
     
  2. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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.
     
  3. dorian53
    dorian53 WRInaute passionné
    Inscrit:
    10 Avril 2005
    Messages:
    1 886
    J'aime reçus:
    1
    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.
     
  4. pixee
    pixee Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    6
    J'aime reçus:
    0
    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?
     
  5. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 601
    J'aime reçus:
    4
    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 :)
     
  6. nickargall
    nickargall WRInaute accro
    Inscrit:
    13 Juin 2005
    Messages:
    6 601
    J'aime reçus:
    4
    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.
     
  7. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 851
    J'aime reçus:
    219
    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
     
  8. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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.
     
  9. pixee
    pixee Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    6
    J'aime reçus:
    0
    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:
    <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?
     
  10. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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 ?
     
  11. pixee
    pixee Nouveau WRInaute
    Inscrit:
    3 Janvier 2006
    Messages:
    6
    J'aime reçus:
    0
    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...
     
  12. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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).
     
  13. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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é'
     
  14. Leonick
    Leonick WRInaute accro
    Inscrit:
    8 Août 2004
    Messages:
    19 274
    J'aime reçus:
    0
    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:
     
  15. Hearty
    Hearty WRInaute discret
    Inscrit:
    23 Février 2004
    Messages:
    118
    J'aime reçus:
    0
    Tu peux faire inclure uniquement ce qui est entre les balises body par javascript ;)
     
  16. zeb
    zeb WRInaute accro
    Inscrit:
    5 Décembre 2004
    Messages:
    12 021
    J'aime reçus:
    1
    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.
     
  17. Marie-Aude
    Marie-Aude WRInaute accro
    Inscrit:
    5 Juin 2006
    Messages:
    16 851
    J'aime reçus:
    219
    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.
     
Chargement...
Similar Threads - changer image survol Forum Date
[script] changer un texte en images Développement d'un site Web ou d'une appli mobile 10 Décembre 2013
Changer images des commentaires Wordpress Développement d'un site Web ou d'une appli mobile 28 Juillet 2012
comment changer l image thumbshots.com Autres moteurs de recherche connus 6 Juin 2012
Peut-on changer le fichier d'une image positionnée dans les SERPs, sans risque de chute ? YouTube, Google Images et Google Maps 4 Juin 2012
Changer la couleur d'un pixel sur une image en php Développement d'un site Web ou d'une appli mobile 2 Mai 2011
Impossible de changer l'image d'un template!! Développement d'un site Web ou d'une appli mobile 22 Octobre 2009
script pour changer d'image selon l'heure. Développement d'un site Web ou d'une appli mobile 7 Octobre 2008
Changer la taille d'une image avec le css Débuter en référencement 3 Juillet 2008
Changer une image a intervalle reguliere ! Développement d'un site Web ou d'une appli mobile 9 Décembre 2007
WordPress Changer l'emplacement par défaut des médias dans WordPress Développement d'un site Web ou d'une appli mobile 14 Juillet 2022
Quel est l'impact SEO de changer le titre des pages et la balise H1 chaque mois? Débuter en référencement 11 Avril 2022
Quantcast - Comment changer le titre "Le respect de votre vie privée est notre priorité" Développement d'un site Web ou d'une appli mobile 19 Octobre 2021
Changer la couleur du background d'un <tr> Développement d'un site Web ou d'une appli mobile 11 Février 2020
Changer le mdp sans connaitre l'ancien chez Digital Ocean Administration d'un site Web 6 Janvier 2020
Le monde vient de changer (Bert inside) Référencement Google 10 Décembre 2019
Article fixe avec bannière changer souvent Crawl et indexation Google, sitemaps 9 Octobre 2019
Changer de mot clé ? Référencement Google 5 Août 2019
Changer la police de la SERP Référencement Google 16 Juillet 2019
Changer mon url canonique oui / non ? Débuter en référencement 26 Mai 2019
changer les meta title trop souvent est il négatif? Débuter en référencement 29 Décembre 2018