Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

forms with select using images 1

Status
Not open for further replies.
glendacom

glendacom

MIS
Oct 23, 2002
36
US
I am trying to create a form with a select statement that displays a graphic with the choice. Is there anyway to do this. What I have now is:

<form method=post name=xyz action=xyz.asp>
<SELECT NAME=&quot;statusvalue&quot;>
<OPTION>Choose an option</option>
<option>choice 1</option>
<option>choice 2</option>
<option>choice 3</option>
</SELECT>
</form>

but what I want is more like:

<form method=post name=xyz action=xyz.asp>
<SELECT NAME=&quot;statusvalue&quot;>
<OPTION>Choose an option</option>
<option><img src=&quot;number1.gif&quot;>choice 1</option>
<option><img src=&quot;number2.gif&quot;>choice 2</option>
<option><img src=&quot;number3.gif&quot;>choice 3</option>
</SELECT>
</form>

Can this be done? I am programming for IE 5 or higher only and using Active Server Pages (.asp). I also have SQL*Server as a background and it would be &quot;okay&quot; if the image came from a database table but I can't figure out how to do that either.
 
Sort by date Sort by votes
You can't include images in SELECT. If you really want to do this you'll have to make your own &quot;Select like&quot; control that can be done this way :
- an image and input type text to show selected item
- a button to show drop down list-box
- the drop down list-box itself in form of a div with style set to
Code: 
display=none; position:absolute; overflow:auto
Note that you'll have to set the div top, left, height and width style properties in order for it to appear just under the text field.
What you've got to do then is :
- fill your div with a TABLE containing for each TR
- a TD with image
- a TD with text
- on each TD of this table, add an event handler for &quot;onclick&quot; event that should copy row content to the img and text field and then hides back the div.

That would give this kind of code :
Code: 
<html>
<head>
<style>
  .dropDownLst {
  display : none;
  BORDER-RIGHT: 2px inset; 
  BORDER-TOP: 2px inset; 
  BORDER-LEFT: 2px inset; 
  BORDER-BOTTOM: 2px inset;
  POSITION: absolute; 
  LEFT: 37px; 
  WIDTH: 163px; 
  TOP: 40px; 
  HEIGHT: 160px; 
  TEXT-ALIGN: center;
  Z-INDEX: 5; 
  }
</style>

<script language=&quot;jscript&quot;>
  function showDropDown() {
    var oDiv = document.getElementById(&quot;DropDownList&quot;);
    oDiv.style.display=&quot;block&quot;;
  }
			
  function selectRow(num) {
    // copy image source
    var oSrc = document.getElementById(&quot;img&quot; + num);
    var oDest= document.getElementById(&quot;selImg&quot;);
    oDest.src = oSrc.src;
    // copy text
    oSrc = document.getElementById(&quot;text&quot; + num);
    oDest= document.getElementById(&quot;selText&quot;);
    oDest.value = oSrc.innerHTML;
    // memo current selection in hidden textfield
    oDest= document.getElementById(&quot;selIndex&quot;);
    oDest.value = num;
    // hide div
    var oDiv = document.getElementById(&quot;DropDownList&quot;);
    oDiv.style.display=&quot;none&quot;;
  }
</script>
</head>
<body>
  <input type=&quot;hidden&quot; id=&quot;selIndex&quot; value=&quot;-1&quot;/>
  <IMG id=&quot;selImg&quot; border=&quot;0px&quot; height=&quot;20px&quot; width=&quot;20px&quot; src=&quot;empty.gif&quot;/>
  <input type=&quot;text&quot; id=&quot;selText&quot; NAME=&quot;selText&quot;/>
  <input type=&quot;button&quot; id=&quot;dropDownBt&quot; value=&quot;V&quot; onClick=&quot;showDropDown();&quot; NAME=&quot;dropDownBt&quot;/>
  <Div id=&quot;DropDownList&quot; class=&quot;dropDownLst&quot;>
    <table border=&quot;0px&quot;>
      <tr>
        <td><img id=&quot;img1&quot; src=&quot;1.gif&quot; height=&quot;20px&quot; width=&quot;20px&quot; onclick=&quot;selectRow(1);&quot;/></td>
        <td id=&quot;text1&quot; onclick=&quot;selectRow(1);&quot;>Well, I think it's row 1 text.</td>
      </tr>
      <tr>
        <td><img id=&quot;Img2&quot; src=&quot;2.gif&quot; height=&quot;20px&quot; width=&quot;20px&quot; onclick=&quot;selectRow(2);&quot;/></td>
        <td id=&quot;text2&quot; onclick=&quot;selectRow(2);&quot;>This one should be row 2 text.</td>
      </tr>
      <tr>
        <td><img id=&quot;Img3&quot; src=&quot;3.gif&quot; height=&quot;20px&quot; width=&quot;20px&quot; onclick=&quot;selectRow(3);&quot;/></td>
        <td id=&quot;text3&quot; onclick=&quot;selectRow(3);&quot;>Is it row 3 text?</td>
      </tr>
    </table>
  </div>
</body>
</html>
I tested under IE6, It works perfectly. Water is not bad as long as it stays out human body ;-)
 
Upvote 0 Downvote
WOW! Cool as can be --- works as advertised! Thanks a lot, Targol!
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

scorney
  • Locked
  • Question
background image with overlay which Hover when over a specific Area/Form
Replies
1
Views
701
3esolar
3
jizzer
  • Locked
  • Question
HTML/CSS Image map with multiple tool-tips
Replies
3
Views
1K
spamjim
spamjim
198709km
  • Locked
  • Question
Grouping XML key value using XSLT
Replies
0
Views
615
198709km
198709km
LyndonOHRC
  • Locked
  • Question
Can I select all child TD's using Parent TR's id?
Replies
5
Views
433
vacunita
vacunita
caykamanj1966
  • Locked
  • Question
Sorting a grid list using iframe associated with Google Drive
Replies
0
Views
193
caykamanj1966
caykamanj1966

Part and Inventory Search

Sponsor

Back
Top