468,140 Members | 1,425 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 468,140 developers. It's quick & easy.

simple forms Q: Using images instead of radio buttons?

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
Jul 19 '05 #1
4 3369
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/
Jul 19 '05 #2
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/

Jul 19 '05 #3
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/


Jul 19 '05 #4
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"
Jul 19 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

13 posts views Thread by LRW | last post: by
5 posts views Thread by Digital Puer | last post: by
4 posts views Thread by Marc | last post: by
24 posts views Thread by firstcustomer | last post: by
reply views Thread by jehugaleahsa | last post: by
27 posts views Thread by didacticone | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.