asked on

image in option

Hi i want a select with an image

something like:

<select name="DirSelect" size="2">
<option value="1">..<img src="picture.gif"></option>
</select>

ASKER CERTIFIED SOLUTION

vosk

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

dorward

Of course by depending on advanced scripting you are fairly heavily limiting the users that the site will work for. I would suggest using a series of radio buttons.

Something along the lines of:

<label for="one"><input type="radio" name="myRadio" id="one" value="one" /> <img src="images/radio1.png" alt="One" /></label>

<label for="two"><input type="radio" name="myRadio" id="two" value="two" /> <img src="images/radio2.png" alt="Two" /></label>

aelatik

It's impossible to store images in text or select boxes. Whats the purpose anyway? Do you want to post an "image" ?

God_Ares

ASKER

i want to make a explorer trough the website. It would be nice to enhance it by using images.

vosk

Try with :

<html>
<head>
<script language="JavaScript">
function Obrir()
{
document.all.o1.style.visibility = "visible";
document.all.o2.style.visibility = "visible";
document.all.o3.style.visibility = "visible";
document.all.o4.style.visibility = "visible";
}
</script>
</head>
<body>
<form name="sel">
<input type="text" name="selection" value="Select from ..." onClick="Obrir();" style="cursor:hand">
<div id="o1" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image1.gif"></div>
<div id="o2" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image2.gif"></div>
<div id="o3" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image3.gif"></div>
<div id="o4" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image4.gif"></div>
</form>
</body>
</html>

Only change the src="image1.gif" etc etc for your images.
Also add something else like cursor:hand, onClick change the value of the text field for a text that indicates the selection and close (hidde) all div tags; also you can change div for table.

jbosch(vosk)

mattjp88

i have modified vosk's script to look more like the real thing. here it is:

<html>
<head>
<script language="JavaScript">
function Obrir()
{
var dowhat=document.sel.dowhat.value;
if (dowhat=="show") {
document.all.o1.style.visibility = "visible";
document.all.o2.style.visibility = "visible";
document.all.o3.style.visibility = "visible";
document.all.o4.style.visibility = "visible";
document.sel.dowhat.value="hide";
}
if (dowhat=="hide"){
document.all.o1.style.visibility = "hidden";
document.all.o2.style.visibility = "hidden";
document.all.o3.style.visibility = "hidden";
document.all.o4.style.visibility = "hidden";
document.sel.dowhat.value="show";
}
}
</script>
</head>
<body>
<form name="sel">
<input type="text" name="selection" value="Select from ..." readonly><img id="img1" src="http://www.geocities.com/mattjp88/dropdown.gif" onClick="Obrir();" height=20 WIDTH=20 style="cursor:hand; visibility:show">
<input TYPE="Hidden" value=show NAME=dowhat>
<div id="o1" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image1.gif"></div>
<div id="o2" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image2.gif"></div>
<div id="o3" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image3.gif"></div>
<div id="o4" style="visibility:hidden;background-color:#FF0000;width:150;height:22">
<img src="image4.gif"></div>
</form>
</body>
</html>

**DO NOT ACCEPT THIS AS THE ANSWER, VOSK DESERVES THEM**

hope that helps,
Matt :-)

mattjp88

oh yeah,
if you are going to use that image that i gave you, could you please upload it to your server.
thanx,
Matt :-)

COBOLdinosaur

A select cannot contain an image. With some styling and a lot of scripting you can create someting that looks like a select with images. You may even be able to get it to simulate select behaviours. But it will not be a select. It will not work like a select. You will not be able to put it in a from as a select. You will not be able to submit is as a select.

The select is implemented by browsers by use the native objects of the operating system. If you want different behaviours and functionality for a select then create new objects and write a browser that uses your object classes.

Or create some kind of ugly hack that is ineffficient, unreliable, and irritates users.

Cd&

vosk

I think that will work as a select because you can use some hidden text fields vinculated with the submit form instead to vinculate directly that "pseudoselect" with images. Coboldinosaur have reason with the "a lot of scripting" but you also can find a lot of options.

jbosch(vosk)

rascalpants

from a designer: you could just use Flash :)

let me know if you want this solution...

rp

mattjp88

i found a way to make the drop down with images really look like the real drop down. here is what i have:

<html>
<head>
<script language="JavaScript">
function Obrir()
{
var dowhat=document.sel.dowhat.value;
if (dowhat=="show") {
document.all.o1.style.visibility = "visible";
document.all.o2.style.visibility = "visible";
document.all.o3.style.visibility = "visible";
document.all.o4.style.visibility = "visible";
document.sel.dowhat.value="hide";
}
if (dowhat=="hide"){
document.all.o1.style.visibility = "hidden";
document.all.o2.style.visibility = "hidden";
document.all.o3.style.visibility = "hidden";
document.all.o4.style.visibility = "hidden";
document.sel.dowhat.value="show";
}
}

function selectit(whattext) {
document.all.selector.innerHTML=whattext;
}
</script>
</head>
<body>
<form name="sel">
<div id=selector style="cursor:hand;visibility:show;background-color:#ffffff;width:143;height:15;border-color: black; border-style: solid; border-width: 1;" onClick="Obrir();">
<font SIZE="+2">Select from ...</font>
</div>
<div style="Z-INDEX: 10; LEFT: 129px; VISIBILITY: show; POSITION: absolute; TOP: 16px"><img id="img1" src="http://www.geocities.com/mattjp88/dropdown.gif" height=23 WIDTH=23 style="cursor:hand; visibility:show" onClick="Obrir();"></div>
<input TYPE="Hidden" value=show NAME=dowhat>
<div onclick="selectit(this.innerHTML);Obrir()" onmouseover="this.style.backgroundColor = '#d8d8d8'" onmouseout="this.style.backgroundColor = '#ffffff' " id="o1" style="visibility:hidden;background-color:#ffffff;width:143;height:22;border-color: black; border-style: solid; border-width: 1;BORDER-BOTTOM: #000000">
<img src="image1.gif">1</div>
<div onclick="selectit(this.innerHTML);Obrir()" onmouseover="this.style.backgroundColor = '#d8d8d8'" onmouseout="this.style.backgroundColor = '#ffffff' " id="o2" style="visibility:hidden;background-color:#ffffff;width:143;height:22;border-color: black; border-style: solid; border-width: 1;BORDER-BOTTOM: #000000;BORDER-TOP: #000000">
<img src="image2.gif">2</div>
<div onclick="selectit(this.innerHTML);Obrir()" onmouseover="this.style.backgroundColor = '#d8d8d8'" onmouseout="this.style.backgroundColor = '#ffffff' " id="o3" style="visibility:hidden;background-color:#ffffff;width:143;height:22;border-color: black; border-style: solid; border-width: 1;BORDER-BOTTOM: #000000;BORDER-TOP: #000000">
<img src="image3.gif">3</div>
<div onclick="selectit(this.innerHTML);Obrir()" onmouseover="this.style.backgroundColor = '#d8d8d8'" onmouseout="this.style.backgroundColor = '#ffffff' " id="o4" style="visibility:hidden;background-color:#ffffff;width:143;height:22;border-color: black; border-style: solid; border-width: 1;BORDER-TOP: #000000">
<img src="image4.gif">4</div>
</form>
</body>
</html>

if you put it on a page then you will have to change the div position to suit your needs.

hope that helps;
Matt :-)

God_Ares

ASKER

Thank you so verry much for your solutions, i will open a question for you : https://www.experts-exchange.com/questions/20443578/Points-4-mattjp88.html

mattjp88

you opened the form but you never gave me the points. whats with that??