Images for Radio Buttons

9 Message(s) by 4 Author(s) originally posted in cfml discussion

From: trojnfn

Date: Wednesday, October 24, 2007

In my cfform, I have three radio button

1. <electronics> {push-button}.

	2. <operating system> A graphical representation of an
	electrical {push-button} appearing as part of a {graphical
	user interface}.  Moving the {mouse pointer} over the
	graphical button and pressing one of the physical mouse
	buttons starts some software action such as closing a window
	or deleting a file.

	See also {radio button}.

	(1997-07-07)

s :
Priority <br>
<CFINPUT type="radio" name="priority" value="1"> 1
<br>
<CFINPUT type="radio" name="priority" value="2"> 2
<br>
<CFINPUT type="radio" name="priority" value="3"> 3
<br>

My action page takes the value of the priority and then does some cfsets,
calculations, etc., then inserts into a table. So far so good.

Now I get a requirement to replace the three radio buttons with three color

<spelling> American spelling of {colour}.

	(1996-12-13)

ed
image

1. <data, graphics> Data representing a two-dimensional scene.
	A digital image is composed of {pixels} arranged in a
	rectangular array with a certain height and width.  Each pixel
	may consist of one or more {bits} of information, representing
	the brightness of the image at that point and possibly
	including colour information encoded as {RGB} triples.

	{Images} are usually taken from the real world via a {digital
	camera}, {frame grabber}, or {scanner}; or they may be
	generated by computer, e.g. by {ray tracing} software.

	See also {image formats}, {image processing}.

	(1994-10-21)

	2. <mathematics> The image (or range) of a {function} is the
	set of values obtained by applying the function to all
	elements of its {domain}.  So, if f : D -> C then the set f(D)
	= \{ f(d) | d in D \} is the image of D under f.  The image is
	a subset of C, the {codomain}.

	(2000-01-19)

s (to make them stand out on the screen

1. <hardware> A generic term for a {display device} that shows
	text and/or images on a roughly flat rectangular surface.  The
	most common type is usually refered to as a "{monitor}" and is
	based on a {cathode-ray tube}, though {flat panel} displays
	have, since around 2000, become increasingly competitive in
	price and performance.

	(2005-07-28)

	2. A {screen multiplexer} utility which lets you run multiple
	{interactive} {terminal sessions} (and {curses} programs)
	through a single terminal connection (on one {virtual
	console}, one terminal, through one {modem} link, {telnet}
	session or {xterm}).

	Screen can detach processes from one terminal and attach them
	to another.  "Auto-detach" lets you continue working after
	being disconnected and reconnected.  It supports keyboard
	driven cut and paste from any text and/or curses application
	(like {Lynx}) to any other (like {xemacs}).

	Screen comes with many {Linux} distributions and is available
	(free) on many other {Unix} {platforms}.

	(2005-07-29)

).
So if I click

<hardware> To press and release a {button} on a {mouse} or
	other {pointing device}.  This generates an {event}, also
	specifying the screen position, which is processed by the
	{window manager} or {application program}.  On a mouse with
	more than one button, the unqualified term usually implies
	pressing the left-most button (with the right index finger),
	other buttons would be qualified, e.g. "{right-click}".
	{Keyboard} modifiers may also be used, e.g. "shift-click",
	meaning to hold down the shift key on the keyboard while
	clicking the mouse button.

	If the mouse moves while the button is pressed then this is a
	{drag}.

	(1995-03-14)

on the first image that represents priority 1, then I need to
capture that value and send to my action page for processing. If I click on
image 2, then send value 2, etc. It needs to work exactly like the radio
buttons so that only one value is selected and sent. Since the images will
replace the buttons and text

1. Executable code, especially a "pure code" portion shared
	between multiple instances of a program running in a
	{multitasking} {operating system}.

	Compare {English}.

	2. Textual material in the mainstream sense; data in ordinary
	{ASCII} or {EBCDIC} representation (see {flat ASCII}).  "Those
	are text files; you can review them using the editor."

	These two contradictory senses confuse hackers too.

	[{Jargon File}]

	(1995-03-16)

(1, 2, 3), I need to somehow indicate and/or
display

1. <hardware> {monitor}.

	2. <language> A vector of pointers to {activation records}.
	The Nth element points to the activation record containing
	variables declared at {lexical depth} N.  This allows faster
	access to variables from outer {scopes} than the alternative
	of linked activation records (but most variable accesses are
	either local or global or occasionally to the immediately
	enclosing scope).  Displays were used in some {ALGOL}
	implementations.

	(1996-02-22)

which image was selected.

Is any of this possisble to do ? If yes, can somebody please show me how to do
it ?

thanks

From: Grizzly9279

Date: Thursday, October 25, 2007

This really hasn'thing to do with Cold Fusion, but as one web developer

<job> (Or "computer programmer", "developer") Someone who
	writes or debugs {computer programs}, for a living or for fun.
	"Analyst/developer" is a common equivalent job title, implying
	the added role of {system analysis}.  The term may be
	qualified according to the type of software - "{application}
	programmer", "{system programmer}", etc.

	(2000-01-24)

to
another, let's see if I can get you pointed in the right direction.

I'd use a single, "hidden" form field

<data, database> An area of a {database} {record}, or
	{graphical user interface} {form}, into which a particular
	item of data is entered.

	Example usage: "The telephone number field is not really a
	numerical field", "Why do we need a four-digit field for the
	year?".

	A {database} {column} is the set of all instances of a given
	field from all records in a {table}.

	(1999-04-26)

to track

<storage> The part of a {disk} which passes under one
	read/write head while the head is stationary.  The number of
	tracks on a disk surface therefore corresponds to the number
	of different radial positions of the head(s).  The collection
	of all tracks on all surfaces at a given radial position is
	known a {cylinder} and each track is divided into {sectors}.

	(1997-07-15)

a priority value. I'd
display 3 icons, that each have an "onClick" event

1. <software> An occurrence or happening of significance to a
	task or program, such as the completion of an asynchronous
	input/output operation.  A task may wait for an event or any
	of a set of events or it may (request to) receive asynchronous
	notification (a {signal} or {interrupt}) that the event has
	occurred.

	See also {event-driven}.

	2. <data> A transaction or other activity that affects the
	records in a file.

	(2000-02-09)

to set the hidden priority
field to a value of 1, 2, or 3. If it looks okay from a UI perspective, you
could do something as simple as using CSS

<World-Wide Web> (CSS) An extension to {HTML} to allow styles,
	e.g. colour, {font}, size to be specified for certain elements
	of a {hypertext} document.  Style information can be included
	in-line in the HTML file or in a separate CSS file (which can
	then be easily shared by multiple HTML files).  Multiple
	levels of CSS can be used to allow selective overriding of
	styles.

	{Home (http://www.w3.org/Style/CSS/)}.

	(2000-07-26)

to gray-out the icons of the priority
values that aren't currently selected.

The following is a really quick & dirty example I threw together, I hope it
helps.
(note: I didn't use <CFFORM> since it was not really necessary for the
purposes of this example)
<html>

<head>

<title>Test Form</title>

<script language="JAVAScript">

function setPriority( x ){
document.inputForm.priority.value = x;
updateIconStatus();
}

function updateIconStatus(){

var curPriority = parseInt( document.inputForm.priority.value );
var icon_p1 = document.getElementById('icon_p1');
var icon_p2 = document.getElementById('icon_p2');
var icon_p3 = document.getElementById('icon_p3');

switch( curPriority ){
case 1:
icon_p1.style.filter='none';
icon_p2.style.filter='gray';
icon_p3.style.filter='gray';
break;
case 2:
icon_p1.style.filter='gray';
icon_p2.style.filter='none';
icon_p3.style.filter='gray';
break;
case 3:
icon_p1.style.filter='gray';
icon_p2.style.filter='gray';
icon_p3.style.filter='none';
break;
default:
icon_p1.style.filter='gray';
icon_p2.style.filter='gray';
icon_p3.style.filter='gray';
}
}

</script>

</head>

<body onLoad="updateIconStatus();">

<p>Please select a priority:</p>

<form name="inputForm" method

<programming> The name given in {Smalltalk} and other
	{object-oriented languages} to a procedure or routine
	associated with one or more {classes}.  An {object} of a
	certain class knows how to perform actions, e.g. printing
	itself or creating a new instance of itself, rather than the
	function (e.g. printing) knowing how to handle different types
	of object.

	Different classes may define methods with the same name
	(i.e. methods may be {polymorphic}).  The term "method" is used
	both for a named operation, e.g. "PRINT" and also for the code
	which a specific class provides to perform tha
	t operation.

	Most methods operate on objects that are instances of a
	certain class.  Some object-oriented languages call these
	"object methods" to distinguish then from "{class methods}".

	In {Smalltalk}, a method is defined by giving its name,
	documentation, temporary local variables and a sequence of
	expressions separated by "."s.

	(2000-03-22)

="post" action="">

<input type="hidden" name="priority" value="1">

<img src="http://www.icongalore.com/images/ni_wm_gifs/ni0013-48.gif"
width="68" height="68" id="icon_p1" alt="Priority 1" style="filter: gray;"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(1);"><br>
<img src="http://www.icongalore.com/images/ni_wm_gifs/ni0017-48.gif"
width="68" height="68" id="icon_p2" alt="Priority 2" style="filter: gray;"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(2);"><br>
<img src="http://www.icongalore.com/images/ni_wm_gifs/ni0022-48.gif"
width="68" height="68" id="icon_p3" alt="Priority 3" style="filter: gray;"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(3);"><br>

<br><br>

<input type="submit" name="submitBtn" value="Submit">

</form>

</body>

</html>

From: GArlington

Date: Thursday, October 25, 2007

wrote in message:

In my cfform, I have three radio buttons :
Priority <br>
<CFINPUT type="radio" name="priority" value="1"> 1
<br>
<CFINPUT type="radio" name="priority" value="2"> 2
<br>
<CFINPUT type="radio" name="priority" value="3"> 3
<br>
My action page takes the value of the priority and then does some cfsets,
calculations, etc., then inserts into a table. So far so good.
Now I get a requirement to replace the three radio buttons with three colored
images (to make them stand out on the screen).
So if I click on the first image that represents priority 1, then I need to
capture that value and send to my action page for processing. If I click on
image 2, then send value 2, etc. It needs to work exactly like the radio
buttons so that only one value is selected and sent. Since the images will
replace the buttons and text (1, 2, 3), I need to somehow indicate and/or
display which image was selected.
Is any of this possisble to do ? If yes, can somebody please show me how to do
it ?
thanks

Easier still:
<form>
<label for="this_id"><img src="yourImage.gif" /></label>
<input id="this_id" type="checkbox" value="1" />
</form>
Try it...

From: GArlington

Date: Thursday, October 25, 2007

wrote in message:

In my cfform, I have three radio buttons :
Priority <br>
<CFINPUT type="radio" name="priority" value="1"> 1
<br>
<CFINPUT type="radio" name="priority" value="2"> 2
<br>
<CFINPUT type="radio" name="priority" value="3"> 3
<br>
My action page takes the value of the priority and then does some cfsets,
calculations, etc., then inserts into a table. So far so good.
Now I get a requirement to replace the three radio buttons with three colored
images (to make them stand out on the screen).
So if I click on the first image that represents priority 1, then I need to
capture that value and send to my action page for processing. If I click on
image 2, then send value 2, etc. It needs to work exactly like the radio
buttons so that only one value is selected and sent. Since the images will
replace the buttons and text (1, 2, 3), I need to somehow indicate and/or
display which image was selected.
Is any of this possisble to do ? If yes, can somebody please show me how to do
it ?
thanks

And I believe that you can make the check boxes hidden...

From: CFMXPrGrmR

Date: Thursday, October 25, 2007

Or you could just CSS...

<input name="priority" type="radio"
style="list-style-image:images/priority_1.gif" value="1" />
<input name="priority" type="radio"
style="list-style-image:images/priority_2.gif" value="2" />
<input name="priority" type="radio"
style="list-style-image:images/priority_3.gif" value="3" />

From: Grizzly9279

Date: Thursday, October 25, 2007

RE: CFMXPRGRMR

Interesing. I'm curious...does that work identically in all browsers? How'd you indicate which image is selected?

From: trojnfn

Date: Thursday, October 25, 2007

Hello Grizzly, this is excellent ! It does exactly what I want.

I took your code

<software> Instructions for a computer in some programming
	language, often {machine language}.  The word "code" is often
	used to distinguish instructions from {data} (e.g. "The code
	is marked 'read-only'") whereas "{software}" is used in
	contrast with "{hardware}" and may consist of more than just
	code.

	(2000-04-08)

and put in my images and took out the image height and width.
The only problem that I am having is the initial button display when the screen
is first opened. I have a red button for value 1, yellow for 2 and green for 3,
and'd like that to display on the screen, and then when one color is
selected, the other two are grayed out.. But they all initially display as gray.

I modified your code a little so that all three colors display when the screen
is first opened, but then when one color is selcted, the other two don't gray
out anymore, so I put the code back. Now when the screen is opend, the first
button displayed is red and the other two are grayed out. But when I click on
one, say button 3, it turns yellow and the other two gray out, which is kind of
what I want but not quite.

I need the three buttons to display red (value 1), yellow (value 2) and green
(value 3) when the screen is first oprend. Then when one of the colors is
selected,for example button 2 - yellow (value 2 is passed, which it does), the
red button (value 1) and the green button ( value 3) should gray out. It seems
like I get one or the other. Can you tell me what I am doing wrong ?

Your modified code (which is what I am using now) is below. Thanks for you
help.

From: Grizzly9279

Date: Thursday, October 25, 2007

Ah I see what you're trying to do. Try this:

<html>

<head>

<title>Test Form</title>

<script language="JAVAScript">

function setPriority( x ){
document.inputForm.priority.value = x;
updateIconStatus();
}

function updateIconStatus(){

var curPriority = parseInt( document.inputForm.priority.value );
var icon_p1 = document.getElementById('icon_p1');
var icon_p2 = document.getElementById('icon_p2');
var icon_p3 = document.getElementById('icon_p3');

switch( curPriority ){
case 1:
icon_p1.style.filter='none';
icon_p2.style.filter='gray';
icon_p3.style.filter='gray';
break;
case 2:
icon_p1.style.filter='gray';
icon_p2.style.filter='none';
icon_p3.style.filter='gray';
break;
case 3:
icon_p1.style.filter='gray';
icon_p2.style.filter='gray';
icon_p3.style.filter='none';
break;
default:
icon_p1.style.filter='none';
icon_p2.style.filter='none';
icon_p3.style.filter='none';
}
}

</script>

</head>

<body>

<p>Please select a priority:</p>

<form name="inputForm" method="post" action="test_form_action.cfm">

<input type="hidden" name="priority" value="">

<img src="../images/priority_button_1.gif" id="icon_p1" alt="Priority 1"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(1);"><br>
<img src="../images/priority_button_2.gif" id="icon_p2" alt="Priority 2"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(2);"><br>
<img src="../images/priority_button_3.gif" id="icon_p3" alt="Priority 3"
onMouseOver="this.style.cursor='hand';" onClick="setPriority(3);"><br>

<br><br>

<input type="submit" name="submitBtn" value="Submit">

</form>

</body>

</html>

From: trojnfn

Date: Thursday, October 25, 2007

Hi Grizzly,

Your method is perfect. It does everything that I want.

Thanks alot for your help again. I really appreciate it.

Next Message: HTTPS question

Blogs related to Images for Radio Buttons

javascript timer settimeout
... checkboxes javascript uncheck checkbox javascript uncheck checkboxes javascript uncheck radio javascript uncheck radio button javascript uncheck radio buttons javascript uncheck radiobutton javascript unchecked javascript undefine ...

Document
... da form 4856 military document document.getelementbyid with radio buttons pen-link documentation sap smartforms documentation robot table-tennis player+document+introduction change document table crm_jest explanation of aia document ...

Document
... http://threebit.net/documentation/dialogic/resourc outfoxed documentary mobile computing applications-documentation iep exit document maryland document.getelementbyid with radio buttons dismiss motion attached copy documents message ...

flash clock tutorials
flash clock time flash clock tutorial flash clock tutorials flash clocks flash close button flash close window flash close window button flash close window script flash clouds flash clouds animation flash clouds effect flash clouds ...

html thumbnail creator 1.20
html thumbnail creator 1.20 html thumbnail gallery html thumbnail gallery generator html thumbnail image html thumbnail images html thumbnail picture html thumbnail pictures html thumbnail viewer html thumbnails html thumbnails code ...

cold fusion hosting reseller
... cold fusion query cold fusion query a query cold fusion query of queries cold fusion query of query cold fusion query query cold fusion query to array cold fusion query to list cold fusion querystring cold fusion radio button cold ...