| |
 Savez-vous bien utiliser les outils de mesure d'audience ?
Effectuez-vous un calcul de ROI (Retour sur investissement) pour savoir comment améliorer vos campagnes emarketing ?
Savez-vous utiliser les bons outils pour booster votre taux de transformation ?
La formation Web Analytics de Ranking Metrics, présentée par un expert reconnu officiellement par Google Analytics, vous apportera les réponses à toutes vos questions !
===> Informations et inscriptions.
|
Voir le sujet précédent :: Voir le sujet suivant
|
| Auteur |
Message |
| |
|
pixee
Nouveau WRInaute
Inscrit le: 03 Jan 2006
Messages: 9
|
 Posté le : Mar Jan 08, 2008 17:18 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Mar Jan 08, 2008 17:22 Sujet du message: Re: changer une image au survol d'un lien + charger du conte |
|
|
| pixee a écrit: |
| 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
WRInaute accro
Inscrit le: 10 Avr 2005
Messages: 1567
|
| Posté le : Mar Jan 08, 2008 17:28 Sujet du message: Re: changer une image au survol d'un lien + charger du conte |
|
|
| zeb a écrit: |
| pixee a écrit: |
| 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
Nouveau WRInaute
Inscrit le: 03 Jan 2006
Messages: 9
|
| Posté le : Mar Jan 08, 2008 18:03 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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
WRInaute accro
Inscrit le: 13 Juin 2005
Messages: 3866
Localisation: Exilé au Groland à cause de Joe Dalton
|
| Posté le : Mar Jan 08, 2008 18:07 Sujet du message: Re: changer une image au survol d'un lien + charger du conte |
|
|
| dorian53 a écrit: |
| zeb a écrit: |
| pixee a écrit: |
| 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: |
<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
WRInaute accro
Inscrit le: 13 Juin 2005
Messages: 3866
Localisation: Exilé au Groland à cause de Joe Dalton
|
| Posté le : Mar Jan 08, 2008 18:08 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
| pixee a écrit: |
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
WRInaute accro
Inscrit le: 05 Juin 2006
Messages: 3440
Localisation: More than a plastic girl
|
| Posté le : Mar Jan 08, 2008 18:37 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
| pixee a écrit: |
| 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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Mar Jan 08, 2008 18:46 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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 :
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. |
|
| |
|
|
pixee
Nouveau WRInaute
Inscrit le: 03 Jan 2006
Messages: 9
|
| Posté le : Mer Jan 09, 2008 12:02 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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? |
|
| |
|
|
zeb
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Mer Jan 09, 2008 21:31 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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)
| Citation: |
| 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: |
| echo "contenu de la page 2"; |
| Citation: |
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: |
| <a href="http://www.imperial-abri.com/" title="Impérial Abri" onmouseover="setpromo(2);" onmouseout="unsetpromo()">Accueil</a> |
| Citation: |
| 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
Nouveau WRInaute
Inscrit le: 03 Jan 2006
Messages: 9
|
| Posté le : Jeu Jan 10, 2008 9:54 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Jeu Jan 10, 2008 20:26 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
| pixee a écrit: |
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)
| Citation: |
| 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
WRInaute accro
Inscrit le: 05 Déc 2004
Messages: 1002
|
| Posté le : Jeu Jan 10, 2008 20:28 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
| 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
WRInaute accro
Inscrit le: 08 Aoû 2004
Messages: 9076
Localisation: Val de Marne
|
| Posté le : Dim Jan 13, 2008 20:56 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
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
WRInaute occasionnel
Inscrit le: 23 Fév 2004
Messages: 138
|
| Posté le : Dim Jan 13, 2008 21:07 Sujet du message: changer une image au survol d'un lien + charger du contenu |
|
|
Tu peux faire inclure uniquement ce qui est entre les balises body par javascript  |
|
| |
|
|
| |
|
|
|
|
Autres sujets de discussion :
|
|
