473,215 Members | 1,271 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,215 software developers and data experts.

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 12936
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*******@discussions.microsoft.com> wrote in message
news:90**********************************@microsof t.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*******@discussions.microsoft.com> wrote in message
news:90**********************************@microsof t.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*******@discussions.microsoft.com> wrote in message
news:19**********************************@microsof t.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*******@discussions.microsoft.com> wrote in message
| > news:90**********************************@microsof t.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", "dropdownlist" 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*******@discussions.microsoft.com> wrote in message
news:90**********************************@microsof t.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 "intellisense" 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.WebControls;
using System.ComponentModel;
using System.Collections;
using System.Collections.Specialized;

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

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

set
{
text = value;
}
}
[
Bindable(true),
Category("Data"),
Description("HTML Select Box Collection")
]
private StringCollection _selectItems ;
public StringCollection SelectItems
{
get { return _selectItems;}
set{_selectItems = value;}
}

[
Bindable(true),
Category("Data"),
Description("HTML Select Box Collection")
]
private int _htmlSelectTagSize = 4;
public int HtmlSelectTagSize
{
get { return _htmlSelectTagSize;}
set{_htmlSelectTagSize = value;}
}

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

private string WriteCSScript()
{
return
"<style>body{font-family:arial;}table.menu{font-size:100%;position:absolute;visibility:hidden;}</style>";
}

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
Page.RegisterClientScriptBlock("jsBlock",WriteJSSc ript());
Page.RegisterClientScriptBlock("cssBlock",WriteCSS cript());

}

protected override void Render(HtmlTextWriter output)
{

// write html around selectbox
output.Write("<table><tr><td onmouseover=\"show('{0}')\"
onmouseout=\"hide('{0}')\">HoverObject<table
class=\"menu\"><tr><td>",this.ClientID.ToString()) ;

// try to render html listbox / textarea
output.AddAttribute(HtmlTextWriterAttribute.Name, "optSelect");
output.AddAttribute(HtmlTextWriterAttribute.Id,thi s.ClientID.ToString())
output.AddAttribute(HtmlTextWriterAttribute.Size,_ htmlSelectTagSize.ToString());
output.RenderBeginTag(HtmlTextWriterTag.Select);

// Goal is to loop through SelectItems which is type StringCollection
// StringCollection class implements IEnumerable Interface
if (SelectItems !=null)
{
System.Collections.IEnumerator myEnumerator =
((IEnumerable)SelectItems).GetEnumerator();
while ( myEnumerator.MoveNext() )
{
output.RenderBeginTag(HtmlTextWriterTag.Option)
output.AddAttribute(HtmlTextWriterAttribute.Value, myEnumerator.Current.ToString());
output.Write(myEnumerator.Current.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", "dropdownlist" 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*******@discussions.microsoft.com> wrote in message
news:90**********************************@microsof t.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*******@discussions.microsoft.com> wrote in message
news:E2**********************************@microsof t.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 "intellisense" 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.WebControls;
using System.ComponentModel;
using System.Collections;
using System.Collections.Specialized;

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

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

set
{
text = value;
}
}
[
Bindable(true),
Category("Data"),
Description("HTML Select Box Collection")
]
private StringCollection _selectItems ;
public StringCollection SelectItems
{
get { return _selectItems;}
set{_selectItems = value;}
}

[
Bindable(true),
Category("Data"),
Description("HTML Select Box Collection")
]
private int _htmlSelectTagSize = 4;
public int HtmlSelectTagSize
{
get { return _htmlSelectTagSize;}
set{_htmlSelectTagSize = value;}
}

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

private string WriteCSScript()
{
return
"<style>body{font-family:arial;}table.menu{font-size:100%;position:absolute;
visibility:hidden;}</style>"; }

protected override void OnPreRender(EventArgs e)
{
base.OnPreRender(e);
Page.RegisterClientScriptBlock("jsBlock",WriteJSSc ript());
Page.RegisterClientScriptBlock("cssBlock",WriteCSS cript());

}

protected override void Render(HtmlTextWriter output)
{

// write html around selectbox
output.Write("<table><tr><td onmouseover=\"show('{0}')\"
onmouseout=\"hide('{0}')\">HoverObject<table
class=\"menu\"><tr><td>",this.ClientID.ToString()) ;

// try to render html listbox / textarea
output.AddAttribute(HtmlTextWriterAttribute.Name, "optSelect");
output.AddAttribute(HtmlTextWriterAttribute.Id,thi s.ClientID.ToString());
output.AddAttribute(HtmlTextWriterAttribute.Size,_ htmlSelectTagSize.ToString
()); output.RenderBeginTag(HtmlTextWriterTag.Select);

// Goal is to loop through SelectItems which is type StringCollection
// StringCollection class implements IEnumerable Interface
if (SelectItems !=null)
{
System.Collections.IEnumerator myEnumerator =
((IEnumerable)SelectItems).GetEnumerator();
while ( myEnumerator.MoveNext() )
{
output.RenderBeginTag(HtmlTextWriterTag.Option);
output.AddAttribute(HtmlTextWriterAttribute.Value, myEnumerator.Current.ToStr
ing()); output.Write(myEnumerator.Current.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", "dropdownlist" 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*******@discussions.microsoft.com> wrote in message
news:90**********************************@microsof t.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
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
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...
3
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...
7
by: lambertb | last post by:
Hi, is this possible to achieve this, and how? http://img217.imageshack.us/img217/779/derrrvw2.png thanks!
7
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...
14
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...
0
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...
5
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...
9
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"...
3
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 3 Jan 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). For other local times, please check World Time Buddy In...
0
by: mar23 | last post by:
Here's the situation. I have a form called frmDiceInventory with subform called subfrmDice. The subform's control source is linked to a query called qryDiceInventory. I've been trying to pick up the...
0
by: abbasky | last post by:
### Vandf component communication method one: data sharing ​ Vandf components can achieve data exchange through data sharing, state sharing, events, and other methods. Vandf's data exchange method...
2
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 7 Feb 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:30 (7.30PM). In this month's session, the creator of the excellent VBE...
0
by: fareedcanada | last post by:
Hello I am trying to split number on their count. suppose i have 121314151617 (12cnt) then number should be split like 12,13,14,15,16,17 and if 11314151617 (11cnt) then should be split like...
0
by: stefan129 | last post by:
Hey forum members, I'm exploring options for SSL certificates for multiple domains. Has anyone had experience with multi-domain SSL certificates? Any recommendations on reliable providers or specific...
0
Git
by: egorbl4 | last post by:
Скачал я git, хотел начать настройку, а там вылезло вот это Что это? Что мне с этим делать? ...
1
by: davi5007 | last post by:
Hi, Basically, I am trying to automate a field named TraceabilityNo into a web page from an access form. I've got the serial held in the variable strSearchString. How can I get this into the...
0
by: MeoLessi9 | last post by:
I have VirtualBox installed on Windows 11 and now I would like to install Kali on a virtual machine. However, on the official website, I see two options: "Installer images" and "Virtual machines"....

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.