Images in an option form

[Ini]

Can it be done, ive been trying for ages but can't get them to show..

[Moh]

So like the vB mood changer?

[Ini]

Don't no what that means

I mean like

<form>
<select>
<option><img src="img.jpg"></option>
</select>
</form>

[MrCraig]

<form>
<select>
<option><img src="img.jpg" /></option>
</select>
</form>

remember to close img tag. dont know if it can be done though.

if that dont work, try


<form>
<select>
<option><img src="img.jpg"></img></option>
</select>
</form>

[Caleb]

Use CSS for the option tag, put a background on it, define the height, and put some padding on it ;)

[Ini]

No i mean i want to put images in the option form for you to select one so have an image instead of text

[Florx]

Thats what Caleb said.

[[Oli]]

Thats what Caleb said.

Yeah, it would be like:
In your css, create a new class, ex.

CSS

.option_1{
background-image: url(path/to/img.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}

.option_2{
background-image: url(path/to/img_2.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}

.option_3{
background-image: url(path/to/img_3.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}

HTML

<form>
<select name="imgselect">
<option class="option_1"></option>
<option class="option_2"></option>
<option class="option_3"></option>
</select>
</form>

(i think :p)

[Ini]

Thats what Caleb said.

I thought he mean decorating it


;4453128']Yeah, it would be like:
In your css, create a new class, ex.

CSS

.option_1{
background-image: url(path/to/img.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}

.option_2{
background-image: url(path/to/img_2.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}

.option_3{
background-image: url(path/to/img_3.png);
background-repeat: no-repeat;
width: ??px;
height: ??px;
}HTML

<form>
<select name="imgselect">
<option class="option_1"></option>
<option class="option_2"></option>
<option class="option_3"></option>
</select>
</form>(i think :p)

I have javascript in my <img> tags so that when the image is clicked it goes to the textarea..

Can i still do that?

[[Oli]]

I thought he mean decorating it



I have javascript in my <img> tags so that when the image is clicked it goes to the textarea..

Can i still do that?


<option class="option_3" onclick="dothis();">

just place it on ur option

[Ini]

doesnt show the images..

[chrisgocrazyH]

Its not exactly what you wanted but:


<form name="dynamicselector">
<table border="0" width="100%" cellspacing="0" cellpadding="0" height="178">
<tr>
<td width="35%" valign="top" align="left">
<select name="dynamicselector2" size="1" onChange="generateimage(this.options[this.selectedIndex].value)">

<option value="img.jpg">lol</option>
<option value="img.jpg">lol</option>
<option value="img.jpg">lol</option>
<option value="img.jpg">lol</option>
</select>
</td>
<td width="65%" valign="top" align="left"><ilayer id="dynamic1" width=100% height=178><layer id="dynamic2" width=100% height=178><div id="dynamic3"></div></layer></ilayer></td>
</tr>
</table>
</form>

<script>

//Dynamic Image selector Script- © Dynamic Drive (www.dynamicdrive.com)
//For full source code, installation instructions,
//100's more DHTML scripts, visit dynamicdrive.com

//enter image descriptions ("" for blank)
var description=new Array()
description[0]="13321213"
description[1]="2342de"
description[2]="134523"
description[3]="34557684234"

var ie4=document.all
var ns6=document.getElementById
var tempobj=document.dynamicselector.dynamicselector2
if (ie4||ns6)
var contentobj=document.getElementById? document.getElementById("dynamic3"): document.all.dynamic3
function generateimage(which){
if (ie4||ns6){
contentobj.innerHTML='<center>Loading image...</center>'
contentobj.innerHTML='<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>'
}
else if (document.layers){
document.dynamic1.document.dynamic2.document.write ('<center><img src="'+which+'"><br><br>'+description[tempobj.options.selectedIndex]+'</center>')
document.dynamic1.document.dynamic2.document.close ()
}
else
alert('You need NS 4+ or IE 4+ to view the images!')
}

function generatedefault(){
generateimage(tempobj.options[tempobj.options.selectedIndex].value)
}

if (ie4||ns6||document.layers){
if (tempobj.options.selectedIndex!=-1){
if (ns6)
generatedefault()
else
window.onload=generatedefault
}
}

</script>
</form>