IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

HTML Discussion :

Défilé d'images avec flèches


Sujet :

HTML

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 15
    Par défaut 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.

  2. #2
    Modérateur
    Avatar de blueice
    Homme Profil pro
    Développeur Web
    Inscrit en
    Mars 2003
    Messages
    3 494
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 50
    Localisation : France, Alpes Maritimes (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Mars 2003
    Messages : 3 494
    Par défaut
    Il ne faut pas utiliser des frames, mais de simples "div" pour les différentes parties.

  3. #3
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 15
    Par défaut
    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 ?

  4. #4
    Expert confirmé
    Avatar de Auteur
    Profil pro
    Inscrit en
    Avril 2004
    Messages
    7 660
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Avril 2004
    Messages : 7 660
    Par défaut
    bonjour,

    j'ai réalisé deux petits scripts pour Oluha, j'ignore si cela répond à ta question.

  5. #5
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 15
    Par défaut
    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) ?

  6. #6
    Membre averti
    Profil pro
    Inscrit en
    Mai 2007
    Messages
    15
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Mai 2007
    Messages : 15
    Par défaut
    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">
    <!--
    #layer1 {
    position:absolute;
    left:127px;
    top:18px;
    width:402px;
    height:50px;
    z-index:1;
    }
    #apDiv1 {
    position:absolute;
    left:127px;
    top:359px;
    width:406px;
    height:50px;
    z-index:2;
    }
    #layer2 {
    position:absolute;
    left:127px;
    top:413px;
    width:403px;
    height:100px;
    z-index:3;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    //-->
    </script>
    </head>
    <body>
    <div id="layer1"><img src="images/haut_pa.jpg" width="400" height="65" longdesc="images/haut_pa.jpg" /></div>
    <p>&nbsp;</p>
    <p>&nbsp;</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">
    <!--
    #layer1 {
    position:absolute;
    left:127px;
    top:2px;
    width:402px;
    height:265px;
    z-index:1;
    }
    #apDiv1 {
    position:absolute;
    left:127px;
    top:327px;
    width:406px;
    height:50px;
    z-index:2;
    }
    #layer2 {
    position:absolute;
    left:127px;
    top:383px;
    width:403px;
    height:100px;
    z-index:3;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_findObj(n, d) { //v4.01
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
    if(!x && d.getElementById) x=d.getElementById(n); return x;
    }
    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </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>&nbsp;</p>
    <p>&nbsp;</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">
    <!--
    #layer1 {
    position:absolute;
    left:127px;
    top:2px;
    width:402px;
    height:265px;
    z-index:1;
    }
    #apDiv1 {
    position:absolute;
    left:127px;
    top:327px;
    width:406px;
    height:50px;
    z-index:2;
    }
    #layer2 {
    position:absolute;
    left:126px;
    top:2px;
    width:403px;
    height:100px;
    z-index:3;
    }
    -->
    </style>
    <script type="text/javascript">
    <!--
    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }
    //-->
    </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>&nbsp;</p>
    <p>&nbsp;</p>
    </body>
    </html>

Discussions similaires

  1. [WD-2007] Déplacement images avec les flèches impossible
    Par riko31 dans le forum Word
    Réponses: 3
    Dernier message: 25/12/2013, 14h35
  2. Diaporama images avec flèches
    Par cel44 dans le forum Dreamweaver
    Réponses: 3
    Dernier message: 31/05/2007, 14h24
  3. Economie de mémoire pour plusieur images avec la même source
    Par neness dans le forum Composants VCL
    Réponses: 5
    Dernier message: 18/01/2004, 10h56
  4. PB affichage d'image avec IE
    Par arturo dans le forum Modules
    Réponses: 6
    Dernier message: 25/09/2003, 17h28
  5. [VB6] Affichage d'image avec qlq contraintes
    Par youri dans le forum VB 6 et antérieur
    Réponses: 3
    Dernier message: 21/11/2002, 14h44

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo