Réaliser un menu déroulant d'images
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 totales :
WIDTH="180px" : Mettez une largeur supérieur de 20px par rapport à celle de vos images.
HEIGHT="248px" : Mettez une largeur supérieur 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
Remplacer 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.