Today's Posts Follow Us On Twitter! TFL Members on Twitter  
Forum search: Advanced Search  
Navigation
Marketplace
  Members Login:
Lost password?
  Forum Statistics:
Forum Members: 24,254
Total Threads: 80,792
Total Posts: 566,472
There are 1659 users currently browsing (tf).
 
  Our Partners:
 
  TalkFreelance     Design and Development     HTML/XHTML/DHTML/CSS :

Custom radio buttons.

Thread title: Custom radio buttons.
Closed Thread  
Page 1 of 2 1 2 >
    Thread tools Search this thread Display Modes  
06-15-2005, 02:20 PM
#1
Paul is offline Paul
Status: I love this place
Join date: Apr 2005
Location: Canada
Expertise:
Software:
 
Posts: 723
iTrader: 0 / 0%
 

Paul is on a distinguished road

  Old  Custom radio buttons.

I have seen a few sites with custom radio buttons, such as:
http://www.ala.ch (at the top)
http://www.k10k.net (friggin everywhere)

Does anyone know how to do this? I checked around the sources and just get lost.
Thanks.

06-15-2005, 04:51 PM
#2
techo is offline techo
Status: Lurker
Join date: Jun 2005
Location:
Expertise:
Software:
 
Posts: 1,473
iTrader: 0 / 0%
 

techo is on a distinguished road

  Old

They are images..

06-15-2005, 04:58 PM
#3
Paul is offline Paul
Status: I love this place
Join date: Apr 2005
Location: Canada
Expertise:
Software:
 
Posts: 723
iTrader: 0 / 0%
 

Paul is on a distinguished road

  Old

uh, duh? (maybe I should have reworded the first post)... so do you know to make it switch images when clicked and then be able to send the information?

06-16-2005, 05:30 AM
#4
plattopus is offline plattopus
Status: Junior Member
Join date: Dec 2004
Location: Melbourne, AU
Expertise:
Software:
 
Posts: 33
iTrader: 0 / 0%
 

plattopus is on a distinguished road

Send a message via MSN to plattopus

  Old

Probably both would be handled by Javascript. When the image is clicked, a simple image change script makes the radio button look "clicked", and another script passes information to the server that says "this radio button was selected".

Specifically I couldn't tell you, but I'd wager it uses JScript.

06-16-2005, 06:06 AM
#5
sliceandcode is offline sliceandcode
Status: Request a custom title
Join date: Aug 2004
Location: California
Expertise:
Software:
 
Posts: 1,004
iTrader: 0 / 0%
 

sliceandcode is on a distinguished road

  Old

It's all CSS, I believe. Do a quick search for it on Google and you'll get some results.

06-16-2005, 09:43 AM
#6
plattopus is offline plattopus
Status: Junior Member
Join date: Dec 2004
Location: Melbourne, AU
Expertise:
Software:
 
Posts: 33
iTrader: 0 / 0%
 

plattopus is on a distinguished road

Send a message via MSN to plattopus

  Old

It's not CSS. CSS can't handle passing a variable anywhere.

06-16-2005, 09:44 AM
#7
plattopus is offline plattopus
Status: Junior Member
Join date: Dec 2004
Location: Melbourne, AU
Expertise:
Software:
 
Posts: 33
iTrader: 0 / 0%
 

plattopus is on a distinguished road

Send a message via MSN to plattopus

  Old

These are the on/off radio buttons from the ala.ch site:

Code:
<td width="36" height="28" align="left" valign="middle"><a href="javascript:action='add'; changeImage(null,'radiobut_add','chckbox_true'); changeImage(null,'radiobut_remove','chckbox_false');" onMouseover="window.status='subscribe'; return true;" onMouseover="window.status=''; return true;" onClick="window.status=''; return true;" onFocus="blur();"><img src="../media/img/header/chckbox_true.gif" name="radiobut_add" alt="" width="11" height="12" border="0"><img src="../media/img/header/b10.gif" alt="" width="18" height="12" border="0"></a></td>
		<td width="36" height="28" align="left" valign="middle"><a href="javascript:action='remove'; changeImage(null,'radiobut_add','chckbox_false'); changeImage(null,'radiobut_remove','chckbox_true');" onMouseover="window.status='unsubscribe'; return true;" onMouseover="window.status=''; return true;" onClick="window.status=''; return true;" onFocus="blur();"><img src="../media/img/header/chckbox_false.gif" name="radiobut_remove" alt="" width="11" height="12" border="0"><img src="../media/img/header/b11.gif" alt="" width="24" height="12" border="0"></a></td>
That javascript would do it all. Have a poke around and you should be able to find the functions that actually do the work.

06-16-2005, 09:45 AM
#8
sliceandcode is offline sliceandcode
Status: Request a custom title
Join date: Aug 2004
Location: California
Expertise:
Software:
 
Posts: 1,004
iTrader: 0 / 0%
 

sliceandcode is on a distinguished road

  Old

Originally Posted by plattopus
It's not CSS. CSS can't handle passing a variable anywhere.
Oh nvm, I thought he was talking about the styling

06-20-2005, 05:42 AM
#9
Joey D is offline Joey D
Status: I'm new around here
Join date: Jun 2005
Location: Fort Wayne, Indiana, USA
Expertise:
Software:
 
Posts: 10
iTrader: 0 / 0%
 

Joey D is on a distinguished road

Send a message via AIM to Joey D Send a message via MSN to Joey D

  Old

Could you do it the same way you change the submit button?

06-20-2005, 09:41 AM
#10
Salathe is offline Salathe
Salathe's Avatar
Status: Community Archaeologist
Join date: Jul 2004
Location: Scotland
Expertise: Software Development
Software: vim, PHP
 
Posts: 3,820
iTrader: 25 / 100%
 

Salathe will become famous soon enough

Send a message via MSN to Salathe

  Old

It's possible with good old JavaScript (making use of the DOM) to only markup the regular checkbox (for people without JS enabled) and dynamically change that to a working on/off image.

Joey D, no you can't do it that way.

Closed Thread  
Page 1 of 2 1 2 >


Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 

  Posting Rules  
Smilies are On
[IMG] code is On
HTML code is Off
Forum Jump:
 
  Contains New Posts Forum Contains New Posts   Contains No New Posts Forum Contains No New Posts   A Closed Forum Forum is Closed