Navigation sur une seule page

Bonjour tout le monde,

Je débute sur ce forum, je ne sais pas si je suis dans la bonne rubrique, je pense que oui mais en tout cas pardon d'avance !!

Voila alors je suis en train de créer un site sous dreamweaver CS5, la base du site se présente comme ceci :

-un background en slide fullscreen

-un contenu centré sur la page où l'on peut naviguer

voici le site comme j'ai réussi a le faire pour l'instant http://www.expressionflorale.ch , ce sont des pages différentes a chaque fois... D'où mon problème. Je souhaiterai que ce soit seulement le rond qui change, car la on remarque que mon slider redémarre a chaque fois et ce n'est vraiment pas joli ( ainsi que le chargement du rond a chaque fois... ).

Avez vous une solution ? Je pense que ça doit être avec du javascript ou jquery que je trouverai ma solution... mais mes compétences sont tellement limitées.... je cherche a aller au plus simple. ( d'ailleurs le slider est généré par un site, je n'ai pas réussi a m'en faire un moi-même, alors que j'ai vu énormément de tutoriels sur le net en jquery... )

J'attends de vos nouvelles, merci...

Katia

Hello,
en effet le javascript va permettre de change l'image sans changer de page :

on garde une seule page, la page index.html

1 - il faut ajouter un ID à l'image ce qui donne ceci :
<img src="final_norm.png" width="600" height="600" border="0" usemap="#Map" id="image_variable" />

2 - On change les 4 liens de la Map qui ne vont plus pointer vers une autre page, mais exécuter un javascript :

<area shape="rect" coords="70,243,185,260" href="javascript:void()" onClick="document.getElementById('image_variable').src = 'final_philo.png';" />

<area shape="poly" coords="259,39,258,99,148,98,150,164,209,169,217,219,372,219,386,169,447,159,445,112,341,101,335,38" href="javascript:void()" onClick="document.getElementById('image_variable').src = 'final_norm.png';"/>

<area shape="rect" coords="255,241,351,260" href="javascript:void()" onClick="document.getElementById('image_variable').src = 'final_creations.png';"/>

<area shape="rect" coords="442,243,519,257" href="javascript:void()" onClick="document.getElementById('image_variable').src = 'final_contact.png';" />

javascript:void() dans les href permet de ne pas recharger la page (contrairement à un lien de la forme #),
et on ajoute pour chaque lien un onClick:"code javascript pour changer l'image"
Quand on clique, la balise img d'ID 'image' change de source et le tour est joué.

Attention avec les simples et doubles apostrophes !

Avec jQuery on pourrait ajouter un effet de fondu enchaîné (ou autre) pour la transition d'images.

A noter que l'utilisation d'images pour les contenus va interdire le référencement du site,
il serait préférable d'utiliser du texte !

Dans ce cas on aurait 4 <div></div> contenant les 4 textes, et les liens afficheraient la div adéquate et masqueraient les autres, avec un effet de transition possible si on utilise jQuery

On peut faire un beau rond en ajoutant dans les styles de la div apDiv1 :
border-radius:300px;
background-color:#524551;

Ensuite ajouter le logo, le menu et les 4 div dont une seule sera visible

That's all, folks