Images in an option form

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

So like the vB mood changer?

Don't no what that means

I mean like

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

<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>

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

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

Thats what Caleb said.

Quote:

---

Originally Posted by FlorX

Thats what Caleb said.

---

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

CSS

Code:

---

.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

Code:

---

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

---

(i think :p)

Quote:

---

Originally Posted by FlorX

Thats what Caleb said.

---

I thought he mean decorating it

Quote:

---

Originally Posted by [oli]

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

CSS

Code:

---

.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

Code:

---

<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?

Quote:

---

Originally Posted by Ini

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

doesnt show the images..

Its not exactly what you wanted but:

Quote:

---

<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>

---