simple forms Q: Using images instead of radio buttons?

[Ken Fine]

I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio button
associated with each layout icon. On click of one of the radio buttons, the
form submits and a new layout is chosen.

I would prefer if people can click on the icons themselves , rather than
using the radio buttons.The border or background associated with the
selected icon can highlight conditionally, based on a DB lookup. The
highlighting will indicate the selection.

I know how I could do this "by hand", associating each image with code that
would initate an insert to a database.

I would prefer it if I just bolt the image onto the existing structures in
HTML that manage radio buttons, and sub an image for the
button.

I seem to recall there is a way to do sub an image for the button. Can
anyone show me the syntax?

Right now my code looks something like this:

img name="Layout2" src="images/Layout2.gif" width="100" height="125"
border="4" alt="">
<br>
<input <%If (rsArticle.Fields.Item("Lay_LayoutID").Value) = "2" Then
Response.Write("CHECKED") : Response.Write("")%> type="radio" name="Layouts"
value="2" onclick="this.form.submit();">

Thanks,
-KF

[Andrew Urquhart]

Ken Fine wrote:

I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio
button associated with each layout icon. On click of one of the radio
buttons, the form submits and a new layout is chosen.

I would prefer if people can click on the icons themselves , rather
than using the radio buttons.The border or background associated with
the selected icon can highlight conditionally, based on a DB lookup.
The highlighting will indicate the selection.

<cut />

HTML provides this functionality natively:

<form action="someurl.asp" method="post">
<fieldset>
<legend>Choose a Layout</legend>
<label for="layout_1">
<img src="layout1.jpg" alt="Layout 1" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="1" id="layout_1" />

<label for="layout_2">
<img src="layout2.jpg" alt="Layout 2" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="2" id="layout_2" />

<label for="layout_3">
<img src="layout3.jpg" alt="Layout 3" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="3" id="layout_3" />
<input type="Submit" value="Save Layout Choice" />
</fieldset>
</form>
--
Andrew Urquhart
- Reply: www.andrewu.co.uk/about/contact/

[Ken Fine]

Sorry, I'm not being sufficiently clear.

I don't want the button interface elements to appear, just the icons, yet I
still want forms functionality.

OnClick of an icon, the form will auto-submit the chosen value to the
database.

On subsequent access, the icon's background or border will be conditionally
rendered a different color if it is chosen.

I'd prefer to still do this within an HTML forms context, just without using
any of the standard form widgets or elements (e.g. radio button.)

"Andrew Urquhart" <re***@website.in.sig> wrote in message
news:h_*************@newsfe1-gui.server.ntli.net...

Ken Fine wrote:

I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio
button associated with each layout icon. On click of one of the radio
buttons, the form submits and a new layout is chosen.

I would prefer if people can click on the icons themselves , rather
than using the radio buttons.The border or background associated with
the selected icon can highlight conditionally, based on a DB lookup.
The highlighting will indicate the selection.

<cut />

HTML provides this functionality natively:

<form action="someurl.asp" method="post">
<fieldset>
<legend>Choose a Layout</legend>
<label for="layout_1">
<img src="layout1.jpg" alt="Layout 1" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="1" id="layout_1" />

<label for="layout_2">
<img src="layout2.jpg" alt="Layout 2" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="2" id="layout_2" />

<label for="layout_3">
<img src="layout3.jpg" alt="Layout 3" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="3" id="layout_3" />
<input type="Submit" value="Save Layout Choice" />
</fieldset>
</form>
--
Andrew Urquhart
- Reply: www.andrewu.co.uk/about/contact/

[Lance Wynn]

Can you use <Input type=image> ?

"Ken Fine" <ke*****@u.washington.edu> wrote in message
news:c4**********@nntp6.u.washington.edu...
Sorry, I'm not being sufficiently clear.

I don't want the button interface elements to appear, just the icons, yet I
still want forms functionality.

OnClick of an icon, the form will auto-submit the chosen value to the
database.

On subsequent access, the icon's background or border will be conditionally
rendered a different color if it is chosen.

I'd prefer to still do this within an HTML forms context, just without using
any of the standard form widgets or elements (e.g. radio button.)

"Andrew Urquhart" <re***@website.in.sig> wrote in message
news:h_*************@newsfe1-gui.server.ntli.net...

Ken Fine wrote:

I've made a content managment system that uses icons to represent page
layouts. To choose a different layout, the user clicks on a radio
button associated with each layout icon. On click of one of the radio
buttons, the form submits and a new layout is chosen.

I would prefer if people can click on the icons themselves , rather
than using the radio buttons.The border or background associated with
the selected icon can highlight conditionally, based on a DB lookup.
The highlighting will indicate the selection.

<cut />

HTML provides this functionality natively:

<form action="someurl.asp" method="post">
<fieldset>
<legend>Choose a Layout</legend>
<label for="layout_1">
<img src="layout1.jpg" alt="Layout 1" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="1" id="layout_1" />

<label for="layout_2">
<img src="layout2.jpg" alt="Layout 2" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="2" id="layout_2" />

<label for="layout_3">
<img src="layout3.jpg" alt="Layout 3" width="100"
height="75" />
</label>
<input type="radio" name="layout" value="3" id="layout_3" />
<input type="Submit" value="Save Layout Choice" />
</fieldset>
</form>
--
Andrew Urquhart
- Reply: www.andrewu.co.uk/about/contact/

[Bob Barrows]

Ken Fine wrote:

You'll get more help for this issue if you post to an appropriate html,
dhtml or .scripting newsgroup. What you're asking about involves client-side
code, which is totally outside the realm of asp.

Bob Barrows

--
Microsoft MVP - ASP/ASP.NET
Please reply to the newsgroup. This email account is my spam trap so I
don't check it very often. If you must reply off-line, then remove the
"NO SPAM"