Insertion image dans div depuis une liste

Bonjour,

Je cherche à donner la possibilité à un visiteur d'insérer des image dans un div, depuis un menu déroulant.

C'est à dire, avoir un menu déroulant dans lequel sont listées les images par leur nom. Partant de là en cliquant sur le nom de l'image dans le menu celle-ci s’insère dans une div (en dessous du menu)

Par exemple : je clique sur "La mer" dans le menu et l'image de la mer s'affiche dans la div. Je clique ensuite sur "La montagne" dans le menu et l'image de la montagne s'affiche dans la div à la suite de "La mer".

Merci de votre aide.
F.

Bonjour,

Le plus simple à mon avis reste de créer un dossier avec tes images numérotés de 1 à x (exemple 1.jpg) et de les importer dans un block vide via appendChild.

Un exemple reste toujours mieux qu'une explication...
En supposant que tu as créé un dossier "picture" avec 3 images (1.jpg, 2.jpg, 3.jpg).

Ton html

<nav>
    <ul id="menu" role="navigation">
        <li id="bt1">Première image</li>
        <li id="bt2">Sesonde image</li>
        <li id="bt3">Troisième image</li>
    </ul>
    </nav>
    <div id="picture"></div>

Ton css vite fait

nav { width:100%; margin:2% 0px; text-align:center; }
nav ul { list-style:none; maring:0; padding:0; }
nav ul li { display:inline; margin:0px 10px; cursor:pointer; font-size:18px; }
#picture { width:800px; margin:2% auto; }
#picture img { border:0; float:left; margin:10px; }

Ton js

var controler={
    // Commence par créer la fonction.
    openpic:function(x){
       // le conteneur
        var pic=document.getElementById('picture'),
        // numéro de l'image via l'id du bouton.
        st=x.length, n=x.substr(2,st),
        im=new Image();
        im.onload=function(){
            // affiche ton image dans le conteneur
            pic.appendChild(im);
        };
        // indique ton lien à l'image
        im.src='picture/'+n+'.jpg';
    }
};
window.onload=function(){ // quand le document est chargé
    (function(){
        // recherche du nombre de liens
        var menu=document.getElementById('menu'),
        bt=menu.getElementsByTagName('li'),cbt=bt.length;
        for(var y=0;y<cbt;y++){
            bt[y].onclick=function(){
                // lors du click, appel de la fonction
                controler.openpic(this.id);
            };
	}
    })();
};

Je pense que cela fonctionne ensuite tu peux créer un bouton pour vider la div (removeChild(x)), tu peux aussi passer par querySelectorAll pour chercher tes liens mais tout les navigateurs (ex ie8) ne le supportent pas.

En revanche si tu as beaucoup d'images et que ces dernières sont en base de données , XMLHttpRequest serait peut-être préférable, à toi de voir.
Modifié par t00rist (24 Mar 2012 - 11:18)

Bonjour,

Merci t00rist ça fonctionne effectivement. Mais chaque image est ouverte dans une div séparée, mais est-il possible que les images s'ouvrent dans la même div ?

En fait, voici le "projet" final en 3 étapes :

1) Le visiteur insére dans une même div des images qu'il choisit depuis le menu.

2) Ensuite pouvoir convertir cette div (composée d'images) au format pdf/A4.

3) Pour au final imprimer le pdf.

Merci
F.

Bien en réalité les images s'insèrent bien dans le même block, "appendChild" ne fait qu'ajouter des éléments dans celui-ci.
C'est peut être les marges du css qui te donnent cette impression, a toi de présenter ta page comme bon te semble.
D'ailleurs étant donné qu'il n'y a que des images, il serait peut-être préférable que ce block soit un paragraphe et non une div.

 <p id="picture"></p>

Ensuite pour passer le contenu de ton paragraphe dans une page type pdf, envoi l'innerHTML du paragraphe à l'aide de GET ou POST sur une autre page php défini au préalable comme ceci.

header('Content-type: application/pdf');

Bon courage.

Alors effectivement avec un peu de callage css j'y vois plus clair...

En revanche tu dis :

// indique ton lien à l'image

        im.src='picture/'+n+'.jpg';

Mais cela n'affiche aucune image du dossier picture (que ji créé et dans lequel j'ai 3 images de test). Par contre si je fais

// indique ton lien à l'image

        im.src='picture/01.jpg';

L'image 01.jpg s'affiche quand je clique sur le premier lien mais aussi sur le second et le troisième... Je ne comprend pas comment chaque lien ouvre sa propre image.
Comment je dois lister mes images ?

Quand à // header('Content-type: application/pdf'); // je ne sais pas comment on fait avec innerHTML et GET ou POST.

Bon 'faut dire aussi que php, js et moi c'est pas ça aussi.

Merci
F.

Bonjour,

Bon, après quelques essais, tests, recherches... Je suis finalement parvenu à afficher mes images. Voilà cette première étape de faite... Je pase aux autres.

Encore merci
F.