drop down lists but with images Options

[gutted]

hi, im new on this site and its well confusing at first

but can anyone give me the html for a drop down box that i can put my images into.

thanx <3

x

[YourSuperior]

A drop down box for images? Can you give an example?

[gutted]

mm no sorry, iive definitly seen it on someones profile before tho

its like a scroll box, but when u click the arrow, whatever youve put in the box comes down, in stead of scrolling down. if that makes sense.

[kimberlyx012]

alls you have to do is put in a scrollbar, then put an image in then put <br> right after it, that way each picture is on a seperate line
so itd look like this;;

IMAGE<br>
IMAGE<br>
IMAGE<br>
IMAGE<br>

then itd give you the scrolling effect that i think your talking about

[gutted]

mmm, its well hard for me to explain it without an example.

ive attached a pic i think, dunno if it worked


if not heres a link


http://img.photobucket.com/albums/v661/tif...003/example.bmp

[gutted]

mmm, its well hard for me to explain it without an example.

ive attached a pic i think, dunno if it worked

heres a link


http://img.photobucket.com/albums/v661/tif...003/example.bmp

[*mipadi*]

What you're describing seems to be a utlization of the HTML <select>/<option> tags with images. Unfortunately, in HTML, you can't use images in the <option> tag (I just gave it a shot, and it didn't work). Maybe there is a way to do it with JavaScript, but if there is, I have no idea how to make it work.

[gutted]

ohhh

well thanx anywayz

[kimberlyx012]

i still think you want a scrollbox with a scrollbar and then once you got that you could put images in it and have them set up like the picture, maybe im wrong? lol

[Teknoblade]

You can do that. It won't show in IE though, just Netscape and Mozilla clients.

If you wanted to try it though, try this...

<!-- begin code provided by createblog.com --><br /><style type="text/css"><br /><!--<br />body {background: white; color: black; margin: 0; padding: 0;}<br /><br />ul {padding: 0; margin: 0; border-bottom: 1px solid silver;<br />  font: 1em sans-serif;}<br />ul li {list-style-type: none;<br />  border: 1px solid silver; border-width: 1px 1px 0 3px;<br />  position: relative; margin: 0; padding: 0;}<br />ul ul {display: none;}<br />ul li:hover > ul {display: block; position: absolute; top: -1px; left: 100%;}<br />li a {display: block; padding: 5px 7px; text-decoration: none;<br />  background: #FFF;}<br />ul#topmenu li a:hover {background: yellow;}<br />li.sub > a {font-weight: bold; background: #FFE;}<br /><br />h1 {margin: 0; padding: 1em 0.25em 0; font: bold 2.5em Arial, sans-serif; line-height: 0.8em; border-bottom: 1px solid silver; text-align: right; color: #557; letter-spacing: 2px;}<br /><br />div#main {margin: 0 8em 0 1em; padding: 0; border-right: 1px solid silver;}<br />div#main p {margin: 1em 3em 1em 0.5em;}<br />ul#topmenu {width: 6em;}<br />ul#topmenu > li:hover > ul {width: 10em; top: 1.5em; left: -3px;}<br /><br />ul ul {width: 10em;}<br /><br />#rtnv {position: absolute; top: 6em; right: 0; width: 8em; margin: 0; padding: 0; font-family: Arial, sans-serif;}<br />#rtnv > ul {width: 9em; margin-left: -1px; font-size: 85%;}<br />#rtnv ul {border: 1px solid silver; border-width: 0 0 0 1px;}<br />#rtnv ul li {border-width: 1px 0; border-color: white; padding: 0 0 0 5px; line-height: 1.25em;}<br />#rtnv ul ul {border-width: 0 1px 1px 1px; border-color: gray silver gray gray;}<br />#rtnv ul ul li {border-color: #FEFEFC;}<br />#rtnv li > a {background-color: transparent; padding: 3px;}<br />#rtnv li:hover {background-color: #EED;}<br />#rtnv li.sub:hover {margin-left: -10.2em; border: 1px solid gray; background: #DDB;}<br />#rtnv li.sub:hover > a {color: #330;}<br />#rtnv li.sub:hover > ul {top: 1.75em; left: -1px; background: #FEFEFC;}<br /><br />h4 {margin: 0 0.5em 0 0; padding: 0 0.25em; font-size: 90%; border-bottom: 1px solid silver;}<br /><br />--><br /></style><br /><ul id="topmenu"><br />  <li class="sub"><img src=IMAGE URL><br />    <ul><br />    <li class="sub"><img src=IMAGE URL><br />      <ul><br />      <li><img src=IMAGE URL></li><br />      <li><img src=IMAGE URL></li><br />      </ul><br />    </li><br /></ul><br /></div><br /><!-- end code provided by createblog.com -->

Of course you can edit and change the colors to whatever you want.