Réaliser un menu déroulant d'images

Se faire une mini galerie personnelle sans contrainte et simplement :

Le code en HTML:



Code HTML :
<div style="height:248px; width:180px; border:2px dotted #FF33CC; background-color:#FFCCFF;">
<br>
<IMG NAME="img1" SRC="http://MON_IMAGE-0.GIF" BORDER=0 WIDTH=150 HEIGHT=168>
<FORM>
<br>
<SELECT NAME="lst" SIZE=1 onChange="document.img1.src=form.lst.options[form.lst.selectedIndex].value">
<OPTION VALUE="http://MON_IMAGE-1.GIF" border="0"  width: "150px" height="168px">image1
<OPTION VALUE="http://MON_IMAGE-2.GIF" border="0"  width: "150px" height="168px">image2
<OPTION VALUE="http://MON_IMAGE-3.GIF" border="0"  width: "150px" height="168px">image3
<OPTION VALUE="http://MON_IMAGE-4.GIF" border="0"  width: "150px" height="168px">image4
<OPTION VALUE="http://MON_IMAGE-5.GIF" border="0"  width: "150px" height="168px">image5
</SELECT>
</FORM>
</div>


Ensuite, vous personnalisez ainsi :



Concerne la bordure :


border:2px dotted #FF33CC (dotted, étant en pointillet)

Concerne la largeur et la hauteur totale :



WIDTH="180px" : Mettez une largeur supérieure de 20px par rapport à celle de vos images.
HEIGHT="248px" : Mettez une hauteur supérieure de 80px par rapport à celle de vos images.

Concerne le fond :


background-color: #FFCCFF

Pour les images:



Code HTML :
<OPTION VALUE="http://MON_IMAGE-1.GIF" border="0px"  width: "150px" height="168px">image1


Remplacez http://MON_IMAGE-1.GIF par vos images.
Si vous souhaitez un border, réglez : border="0px"
Réglez la largeur de vos images: width: "150px"
Réglez la hauteur de vos images: height="168px"
image1 C'est le nom qui apparaitra dans le menu déroulant.

Démonstration:





Cette page a été vue 2194 fois