Défilé d'images avec flèches

Version imprimable

17/06/2007, 11h06
cel44

Défilé d'images avec flèches

Bonjour,

Je souhaite concevoir un petit site très simple pour montrer le book d'une personne, qui serait composé ainsi :

- Les images en haut d'écran (qui défilent 1 par 1)
- Une barre de navigation au-dessous
- Et au dessous encore, les flèches correspondant au défilé des images

J'avais posté un premier message ici où l'on m'avait conseillée à raison un diaporama tout fait. J'ai testé mais ça ne va pas être possible, car il faudrait personnaliser trop de chose (la personne concernée est dans le design et accord une grande importance à chaque chose comme les flèches, le placement de telle chose etc..).

J'avais réussi à faire un petit site construit ainsi :
- Barre de navigation en haut
- Au centre les images qui déflaient avec les flèches au dessous (images et flèches dans le meme doc html)
- Au dessous une 2e barre de navigation

Mais la personne souhaiterait maintenant que les flèches passe au dessous de la barre de navigation du bas c à dire qu'il y ait :
- Image
- Barre de navigation
- flèches faisant défiler les images 1 par 1

J'ai vraiment du mal à trouver comment faire ça via des frames.
Connaitriez-vous d'autres pistes (simples) pour y arriver svp ..?

Merci.
18/06/2007, 09h20
blueice

Il ne faut pas utiliser des frames, mais de simples "div" pour les différentes parties.
18/06/2007, 11h19
cel44

Citation:

Envoyé par blueice

Il ne faut pas utiliser des frames, mais de simples "div" pour les différentes parties.

Ah, merci de m'avoir répondu Bluice.
Hier j'ai passé des heures à élaborer des frames ça donne un résultat vraiment abominable, je ne sais vraiment pas comment procéder.

Ok pour l'utilisation des balises div mais je ne suis pas fortiche en HTML, je fais ça sous Dreamweaver. Saurais-tu comment procéder sur Dreamweaver pour réaliser un site sans frames de cette manière, avec les DIV ?
18/06/2007, 15h47
Auteur

bonjour,

j'ai réalisé deux petits scripts pour Oluha, j'ignore si cela répond à ta question.
18/06/2007, 17h51
cel44

Merci auteur, mais à la lecture du post que tu m'indiques je crois que j'aurai du mal à appliquer ces scripts. Je ne connais rien au Javascript et surtout je ne sais pas du tout si cela donnera le résultat voulu.

J'ai essayé aujourd'hui d'explorer la technique des div mentionnée par bluice. Je suis parvenue à créer des défilement d'images à l'aspect largement amélioré par rapport à ce que je faisais précédemment.
Par contre, j'arrive à faire défiler les images une par une via des boutons, ex. Img1, Img2, Img3... Mais je ne parviens pas à les faire défiler par des flèches avec les calques.
C'est à dire que si je fixe sur la flèche gauche le comportement de "Permuter l'image" avec l'image 2 Onclick, je ne peux plus affecter à cette même flèche un second comportement pour qu'au clic suivant le lien dirige vers l'image (je précise que je travaille sous Dreamweaver).

Sauriez-vous comment je peux faire ça via les calques ?

J'ai aussi jeté un oeil aux techniques d'include pour le problème des frames, mais ça me paraît hyper compliqué, j'ai l'impression que je devrai faire tout le site en PHP, c'est bien ça non (je ne connais rien au PHP) ?
19/06/2007, 00h17
cel44

Pourriez-vous m'aider svp ?
Ca fait des heures et des jours que je suis dessus et j'ai l'impression que je vais jamais y arriver et que je vais péter un plomb.

J'aurai besoin simplement d'orientations : comment vous vous feriez à ma place pour faire un tel site et quelles techniques emploieriez vous ?

Voici mon frameset :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<frameset rows="80,*" frameborder="no" border="0" framespacing="0">
<frame src="frame_haut.html" name="topFrame" scrolling="No" noresize="noresize" marginheight="15" id="topFrame" title="topFrame" />
<frameset rows="*,80" frameborder="no" border="0" framespacing="0">
<frame src="frame_centre.html" name="mainFrame" marginheight="0" id="mainFrame" title="mainFrame" />
<frame src="frame_bas.html" name="bottomFrame" scrolling="No" noresize="noresize" marginheight="0" id="bottomFrame" title="bottomFrame" />
</frameset>
</frameset>
<noframes><body>
</body>
</noframes></html>

La page du haut :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="layer1"><img src="images/haut_pa.jpg" width="400" height="65" longdesc="images/haut_pa.jpg" /></div>
<p> </p>
<p> </p>
</body>
</html>

Celle du milieu :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body onload="MM_preloadImages('photos/packaging_boula.jpg')">
<div id="layer1"><img src="images/centre_pa.jpg" name="img_pa" width="400" height="324" id="img_pa" longdesc="images/centre_pa.jpg" /></div>
<div id="apDiv1"><img src="images/fl_2.jpg" width="400" height="50" border="0" usemap="#Map" longdesc="file:///C|/Documents and Settings/Swanou/Mes documents/Flo_site_v3/images/fl_2.jpg" />
<map name="Map" id="Map"><area shape="circle" coords="232,23,19" href="photos/packaging_milka.jpg" />
<area shape="circle" coords="169,27,17" href="photos/packaging_ysl.jpg" />
</map></div>
<p> </p>
<p> </p>
</body>
</html>

Et celle du bas :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">

</script>
</head>
<body>
<div id="layer2"><img src="images/bas_pa.jpg" width="400" height="91" border="0" usemap="#Map2" id="Image1" longdesc="images/bas_pa.jpg" onclick="MM_swapImgRestore()" />
<map name="Map2" id="Map2"><area shape="rect" coords="14,23,109,58" href="packaging_boula.html" target="mainFrame" onclick="MM_swapImgRestore()" />
</map></div>
<p> </p>
<p> </p>
</body>
</html>