473,581 Members | 3,046 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

HTML <SELECT><OPTION > Tag With Image and Text

Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as
well as a little image(icon) in the option? I know this is not an ASP.NET
related question, but I know this group is knowledgeable and quick with
responses.

Thanks

Nov 19 '05 #1
6 12987
no... not with the standard SELECT control.
You will need a custom one for that.

--
Curt Christianson
Owner/Lead Developer, DF-Software
Site: http://www.Darkfalz.com
Blog: http://blog.Darkfalz.com
"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:90******** *************** ***********@mic rosoft.com...
Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as
well as a little image(icon) in the option? I know this is not an ASP.NET
related question, but I know this group is knowledgeable and quick with
responses.

Thanks

Nov 19 '05 #2
I understand how to make ASP.NET compiled controls but may need a few
pointers to get started on creating this from scratch. Is there a base
control that I can use to start this or do I have to graphically create this
from scratch? Just some design ideas will be a good start and I should be
able to take it from there.

Thanks
"Curt_C [MVP]" wrote:
no... not with the standard SELECT control.
You will need a custom one for that.

--
Curt Christianson
Owner/Lead Developer, DF-Software
Site: http://www.Darkfalz.com
Blog: http://blog.Darkfalz.com
"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:90******** *************** ***********@mic rosoft.com...
Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as
well as a little image(icon) in the option? I know this is not an ASP.NET
related question, but I know this group is knowledgeable and quick with
responses.

Thanks


Nov 19 '05 #3
as most of the work will be the javascript code, create the flyout menu,
handle mouse and keyboard events, display selection, postback data, a good
javascript book is your first task. once you have the javascript worked out,
the control is pretty simple, look at any example. as you will probably use
a hidden field for the postback, you could inherit from the HtmlInputHidden
control, and override the OnRender method.

-- bruce (sqlwork.com)

"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:19******** *************** ***********@mic rosoft.com...
| I understand how to make ASP.NET compiled controls but may need a few
| pointers to get started on creating this from scratch. Is there a base
| control that I can use to start this or do I have to graphically create
this
| from scratch? Just some design ideas will be a good start and I should be
| able to take it from there.
|
| Thanks
| "Curt_C [MVP]" wrote:
|
| > no... not with the standard SELECT control.
| > You will need a custom one for that.
| >
| > --
| > Curt Christianson
| > Owner/Lead Developer, DF-Software
| > Site: http://www.Darkfalz.com
| > Blog: http://blog.Darkfalz.com
| >
| >
| > "Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
| > news:90******** *************** ***********@mic rosoft.com...
| > > Does anyone know it is possible to include a small image(.gif .jpeg)
| > > within a <SELECT><option > so that the user would see the option text
as
| > > well as a little image(icon) in the option? I know this is not an
ASP.NET
| > > related question, but I know this group is knowledgeable and quick
with
| > > responses.
| > >
| > > Thanks
| > >
| > >
| > >
| >
| >
| >
Nov 19 '05 #4
Hi Chris,

This was a cool question! I don't know if someone has put a 3rd party
control out there like this yet. My gut tells me that it is out there.
However I did some quick searches using keywords like "select", "html",
"graphic", "picture", "dropdownli st" and other keywords and combinations I
could think of but didn't come up with anything.

This could have added benefits. For example, ever notice how when you put a
div over a dropdownlist the DDL shows through so you have to hide it? Very
annoying! Might as well replace that too. To be honest, it is all of
today's browsers that need to be replaced but before I launch into my
favorite topic (which I never discuss here) I'll stop.

This is such an interesting topic though that I'm going to come up with a
solution. Curt is right, this will work best as a custom control and not
something you just want to ad hoc together everytime. Bruce is also right,
it will take javascript to get it done. I can handle the custom control and
the javascript for IE. Any javascript gurus for Opera, Mozilla, or Other
please email me because I could use your help to make this universal.
Thanks! Ken.

P.S. Chris, since this is your topic, what would you like? Are you looking
for a few preset graphic sizes or do you want to specify? Do you want to be
able to use html to display the text in the list (bold, multiline items,
specify the color of each item, more than one column, etc.)? Would you be
interested in having items in the list that can in turn be themselves
dropdowns? What about nested dropdowns that go back to the server and fill
themselves with data based on a function you supply without performing a
postback? Sky's the limit. All I can say is this is going to be a blast!

P.P.S. Thanks for the post!

"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:90******** *************** ***********@mic rosoft.com...
Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as
well as a little image(icon) in the option? I know this is not an ASP.NET
related question, but I know this group is knowledgeable and quick with
responses.

Thanks

Nov 19 '05 #5
Thanks for all the feedback. Over the past few weeks, this idea started as a
simple tooltip on a webpage and has now evolved into a much more functional
version....

What I invision is the ability to hover over an object on a webpage and have
an "intellisen se" like dropdownlist (just like in visual studio) appear below
that object. The collection in the intellisense list would have icons
associated with each item and when the user selects an item it will redirect
the user to a new page/window. When the user hover's off this object, the
intellisense dropdown will disappear. I feel this is a robust way to make
use of a web page's space and to also add much needed functionality to a
website.

Ken - I would like to see your finished product and any other
idea's/comments you may have. This would also be an opportune time to
cooperate and share some of the development work....

To share some of my work, I have started to develop a rudimentary custom
control that uses the select option html tag and some javascript to hide and
unhide the object when a user mouseover's an object on the form. Since the
select option tag will not accomplish all of the goals of the design, most of
this code will not be extendable.

Please be in touch!
Chris

using System;
using System.Web.UI;
using System.Web.UI.W ebControls;
using System.Componen tModel;
using System.Collecti ons;
using System.Collecti ons.Specialized ;

namespace Applications.Li brary.Controls
{
[DefaultProperty ("Text"),
ToolboxData("<{ 0}:Intellisense runat=server></{0}:Intellisens e>")]
public class Intellisense : WebControl
{
private string text;

[Bindable(true),
Category("Appea rance"),
DefaultValue("" )]
public string Text
{
get
{
return text;
}

set
{
text = value;
}
}
[
Bindable(true),
Category("Data" ),
Description("HT ML Select Box Collection")
]
private StringCollectio n _selectItems ;
public StringCollectio n SelectItems
{
get { return _selectItems;}
set{_selectItem s = value;}
}

[
Bindable(true),
Category("Data" ),
Description("HT ML Select Box Collection")
]
private int _htmlSelectTagS ize = 4;
public int HtmlSelectTagSi ze
{
get { return _htmlSelectTagS ize;}
set{_htmlSelect TagSize = value;}
}

private string WriteJSScript()
{
// should provide alternative if browser can't js
return ("<script type=\"text/javascript\">fu nction
show(elmnt){doc ument.all(elmnt ).style.visibil ity=\"visible\" } function
hide(elmnt){doc ument.all(elmnt ).style.visibil ity=\"hidden\"} </script>");
}

private string WriteCSScript()
{
return
"<style>body{fo nt-family:arial;}t able.menu{font-size:100%;posit ion:absolute;vi sibility:hidden ;}</style>";
}

protected override void OnPreRender(Eve ntArgs e)
{
base.OnPreRende r(e);
Page.RegisterCl ientScriptBlock ("jsBlock",Writ eJSScript());
Page.RegisterCl ientScriptBlock ("cssBlock",Wri teCSScript());

}

protected override void Render(HtmlText Writer output)
{

// write html around selectbox
output.Write("< table><tr><td onmouseover=\"s how('{0}')\"
onmouseout=\"hi de('{0}')\">Hov erObject<table
class=\"menu\"> <tr><td>",this. ClientID.ToStri ng());

// try to render html listbox / textarea
output.AddAttri bute(HtmlTextWr iterAttribute.N ame, "optSelect" );
output.AddAttri bute(HtmlTextWr iterAttribute.I d,this.ClientID .ToString())
output.AddAttri bute(HtmlTextWr iterAttribute.S ize,_htmlSelect TagSize.ToStrin g());
output.RenderBe ginTag(HtmlText WriterTag.Selec t);

// Goal is to loop through SelectItems which is type StringCollectio n
// StringCollectio n class implements IEnumerable Interface
if (SelectItems !=null)
{
System.Collecti ons.IEnumerator myEnumerator =
((IEnumerable)S electItems).Get Enumerator();
while ( myEnumerator.Mo veNext() )
{
output.RenderBe ginTag(HtmlText WriterTag.Optio n)
output.AddAttri bute(HtmlTextWr iterAttribute.V alue,myEnumerat or.Current.ToSt ring());
output.Write(my Enumerator.Curr ent.ToString()) ;
}
}

output.Write("</select>");
output.Write("</td></tr></table></td></tr></table>");

}
}
}


"Ken Dopierala Jr." wrote:
Hi Chris,

This was a cool question! I don't know if someone has put a 3rd party
control out there like this yet. My gut tells me that it is out there.
However I did some quick searches using keywords like "select", "html",
"graphic", "picture", "dropdownli st" and other keywords and combinations I
could think of but didn't come up with anything.

This could have added benefits. For example, ever notice how when you put a
div over a dropdownlist the DDL shows through so you have to hide it? Very
annoying! Might as well replace that too. To be honest, it is all of
today's browsers that need to be replaced but before I launch into my
favorite topic (which I never discuss here) I'll stop.

This is such an interesting topic though that I'm going to come up with a
solution. Curt is right, this will work best as a custom control and not
something you just want to ad hoc together everytime. Bruce is also right,
it will take javascript to get it done. I can handle the custom control and
the javascript for IE. Any javascript gurus for Opera, Mozilla, or Other
please email me because I could use your help to make this universal.
Thanks! Ken.

P.S. Chris, since this is your topic, what would you like? Are you looking
for a few preset graphic sizes or do you want to specify? Do you want to be
able to use html to display the text in the list (bold, multiline items,
specify the color of each item, more than one column, etc.)? Would you be
interested in having items in the list that can in turn be themselves
dropdowns? What about nested dropdowns that go back to the server and fill
themselves with data based on a function you supply without performing a
postback? Sky's the limit. All I can say is this is going to be a blast!

P.P.S. Thanks for the post!

"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:90******** *************** ***********@mic rosoft.com...
Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as
well as a little image(icon) in the option? I know this is not an ASP.NET
related question, but I know this group is knowledgeable and quick with
responses.

Thanks


Nov 19 '05 #6
Hi Chris,

I'm going to be working on this shortly. I just started a company (which
lanuches 1/1/2005) and I'm making this the top thing on the ToDo:. I think
this control could be awesome. Use my email to contact me about code. Ken.

"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:E2******** *************** ***********@mic rosoft.com...
Thanks for all the feedback. Over the past few weeks, this idea started as a simple tooltip on a webpage and has now evolved into a much more functional version....

What I invision is the ability to hover over an object on a webpage and have an "intellisen se" like dropdownlist (just like in visual studio) appear below that object. The collection in the intellisense list would have icons
associated with each item and when the user selects an item it will redirect the user to a new page/window. When the user hover's off this object, the
intellisense dropdown will disappear. I feel this is a robust way to make
use of a web page's space and to also add much needed functionality to a
website.

Ken - I would like to see your finished product and any other
idea's/comments you may have. This would also be an opportune time to
cooperate and share some of the development work....

To share some of my work, I have started to develop a rudimentary custom
control that uses the select option html tag and some javascript to hide and unhide the object when a user mouseover's an object on the form. Since the select option tag will not accomplish all of the goals of the design, most of this code will not be extendable.

Please be in touch!
Chris

using System;
using System.Web.UI;
using System.Web.UI.W ebControls;
using System.Componen tModel;
using System.Collecti ons;
using System.Collecti ons.Specialized ;

namespace Applications.Li brary.Controls
{
[DefaultProperty ("Text"),
ToolboxData("<{ 0}:Intellisense runat=server></{0}:Intellisens e>")]
public class Intellisense : WebControl
{
private string text;

[Bindable(true),
Category("Appea rance"),
DefaultValue("" )]
public string Text
{
get
{
return text;
}

set
{
text = value;
}
}
[
Bindable(true),
Category("Data" ),
Description("HT ML Select Box Collection")
]
private StringCollectio n _selectItems ;
public StringCollectio n SelectItems
{
get { return _selectItems;}
set{_selectItem s = value;}
}

[
Bindable(true),
Category("Data" ),
Description("HT ML Select Box Collection")
]
private int _htmlSelectTagS ize = 4;
public int HtmlSelectTagSi ze
{
get { return _htmlSelectTagS ize;}
set{_htmlSelect TagSize = value;}
}

private string WriteJSScript()
{
// should provide alternative if browser can't js
return ("<script type=\"text/javascript\">fu nction
show(elmnt){doc ument.all(elmnt ).style.visibil ity=\"visible\" } function
hide(elmnt){doc ument.all(elmnt ).style.visibil ity=\"hidden\"} </script>");
}

private string WriteCSScript()
{
return
"<style>body{fo nt-family:arial;}t able.menu{font-size:100%;posit ion:absolute;
visibility:hidd en;}</style>"; }

protected override void OnPreRender(Eve ntArgs e)
{
base.OnPreRende r(e);
Page.RegisterCl ientScriptBlock ("jsBlock",Writ eJSScript());
Page.RegisterCl ientScriptBlock ("cssBlock",Wri teCSScript());

}

protected override void Render(HtmlText Writer output)
{

// write html around selectbox
output.Write("< table><tr><td onmouseover=\"s how('{0}')\"
onmouseout=\"hi de('{0}')\">Hov erObject<table
class=\"menu\"> <tr><td>",this. ClientID.ToStri ng());

// try to render html listbox / textarea
output.AddAttri bute(HtmlTextWr iterAttribute.N ame, "optSelect" );
output.AddAttri bute(HtmlTextWr iterAttribute.I d,this.ClientID .ToString());
output.AddAttri bute(HtmlTextWr iterAttribute.S ize,_htmlSelect TagSize.ToStrin g
()); output.RenderBe ginTag(HtmlText WriterTag.Selec t);

// Goal is to loop through SelectItems which is type StringCollectio n
// StringCollectio n class implements IEnumerable Interface
if (SelectItems !=null)
{
System.Collecti ons.IEnumerator myEnumerator =
((IEnumerable)S electItems).Get Enumerator();
while ( myEnumerator.Mo veNext() )
{
output.RenderBe ginTag(HtmlText WriterTag.Optio n);
output.AddAttri bute(HtmlTextWr iterAttribute.V alue,myEnumerat or.Current.ToSt r
ing()); output.Write(my Enumerator.Curr ent.ToString()) ;
}
}

output.Write("</select>");
output.Write("</td></tr></table></td></tr></table>");

}
}
}


"Ken Dopierala Jr." wrote:
Hi Chris,

This was a cool question! I don't know if someone has put a 3rd party
control out there like this yet. My gut tells me that it is out there.
However I did some quick searches using keywords like "select", "html",
"graphic", "picture", "dropdownli st" and other keywords and combinations I could think of but didn't come up with anything.

This could have added benefits. For example, ever notice how when you put a div over a dropdownlist the DDL shows through so you have to hide it? Very annoying! Might as well replace that too. To be honest, it is all of
today's browsers that need to be replaced but before I launch into my
favorite topic (which I never discuss here) I'll stop.

This is such an interesting topic though that I'm going to come up with a solution. Curt is right, this will work best as a custom control and not something you just want to ad hoc together everytime. Bruce is also right, it will take javascript to get it done. I can handle the custom control and the javascript for IE. Any javascript gurus for Opera, Mozilla, or Other please email me because I could use your help to make this universal.
Thanks! Ken.

P.S. Chris, since this is your topic, what would you like? Are you looking for a few preset graphic sizes or do you want to specify? Do you want to be able to use html to display the text in the list (bold, multiline items,
specify the color of each item, more than one column, etc.)? Would you be interested in having items in the list that can in turn be themselves
dropdowns? What about nested dropdowns that go back to the server and fill themselves with data based on a function you supply without performing a
postback? Sky's the limit. All I can say is this is going to be a blast!
P.P.S. Thanks for the post!

"Chris Fink" <Ch*******@disc ussions.microso ft.com> wrote in message
news:90******** *************** ***********@mic rosoft.com...
Does anyone know it is possible to include a small image(.gif .jpeg)
within a <SELECT><option > so that the user would see the option text as well as a little image(icon) in the option? I know this is not an ASP.NET related question, but I know this group is knowledgeable and quick with responses.

Thanks


Nov 19 '05 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
3066
by: Cristian Martinello | last post by:
How can I add <OPTION> to a tag <SELECT> runtime ? the code combo.innerHTML+="<OPTION value='1'>Name</OPTION>" doesn't work... -- Posted via Mailgate.ORG Server - http://www.Mailgate.ORG
2
1923
by: Craig Keightley | last post by:
How do I retrive the Name of the item in a select box I have the following form <select name="select"> <option value="1">Monday</option> <option value="2">Tuesday</option> <option value="3">Wednesday</option> <option value="4">Thursday</option> </select>
3
18560
by: Iain Hallam | last post by:
Hi. I've been using display:none on the style property of some <option> elements in my forms, which works fine with Mozilla - as expected it removes the option from my dropdown (although it still exists in the code). Is there an equivalent in IE? The reasoning behind this is that I want users to rank objects using a <select> for each...
7
10906
by: lambertb | last post by:
Hi, is this possible to achieve this, and how? http://img217.imageshack.us/img217/779/derrrvw2.png thanks!
7
6556
by: Shrek | last post by:
I have a drop down on a web page and want to change the cursor from default to pointer, so my style definition has style ="cursor: pointer;" the drop down though fails to change from the default curor. I've tryed applying the style to the <select> tag and to the <option> tags to no avail.
14
9218
by: The Natural Philosopher | last post by:
This is a nasty one and I can't see my way out of it. I have a bunch of select statements in a form, and each select statement has an onchange="do_something(this)" in it, and this works nicely..except when there is only ONE OPTION in a given select. It seems you cannot 'onchange' a single option! Well, that is reasonable. The trouble...
0
1153
by: ajos | last post by:
hi friends, Im currently having a <html:select> where ive got many options value inside it...for example---> <html:select property="branch" size="1"> <html:option value="New York"></html:option> <html:option value="kingston"></html:option> <html:option value="Los Angeles"></html:option> and so on..... what i want...
5
4728
by: plsHelpMe | last post by:
Hi Frens, I want to show a blank space at the begining of the option tag using javascript, can anyone please help me for the same. Let me explain what i want: I want to have an event which the following code will give <Select> <option>&nbsp;option1</option> <option>option2</option> </select>
9
5776
by: eihabisaac | last post by:
hey every body how can i get using javascript the selected option <option> ID or Value because when ever i clicked it i get the <select> id and i dont want that <select name="list" id="list" size="10%" > <option id="3" ondblclick="select_song();">Apple <br> </option> <option id="4" ondblclick="select_song();">Orange <br> </option> ...
0
7809
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
8312
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
1
7920
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows Update option using the Control Panel or Settings app; it automatically checks for updates and installs any it finds, whether you like it or not. For...
0
6569
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5366
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3809
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in...
0
3835
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1413
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.
0
1147
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.