Any way to use an image for a radio button?

[masonbarge]

Does anyone know a way to use an image as a radio button? I've tried a background image in css and several experiments, but nothing works so far.

It's very maddening, LOL. Right clicking the button and choosing "view background image" shows the image I want, but it won't appear on the page.

[ukgeoff]

I've never seen this done to my knowledge.

What exactly are you trying to achieve?

Could there be another way?

[masonbarge]

Well, I don't have Flash, which is the only obvious way to style a radio button that I can think of. Or perhaps use a javascript sniffer and use a rollover/onclick for js enabled browsers, but that seems a bit heavy for a style that some people can't see.

What I want to achieve is a better-looking, easier-to-click radio button. Running the dimensions up looks awful.

[artwich]

Ouch, big programme there, and it won't work with CSS it might work with javascript but otherwise...

Edit by Geoff:
What is the point of this post? In order to maintain the integrity of the forums, please do make post that add nothing to the thread discussion.

[ukgeoff]

Thing is Mason, thinking from the end-user/accessibility viewpoint, how will people know they should treat these 'images' as radio style buttons?

[moojoo]

instead of replacing the radio buttons with an image have you considered using CSS to style them to match your site more? Seems that would be a comfortable middle ground.

[Rob]

This is entirely possible, indeed!

I have seen this done on a friends CMS... he is in fact an admin here - spinal007.

I'll see if I can draw his attention to this thead.

[Ryan Fait]

I've made custom radio boxes before. Let me see if I can explain this clearly:

I started out with three instances of a radio button - off, active and selected. For the HTML, I made a <div> with a CSS background image of the radio button and a hidden radio button element inside. Using JavaScript, I wrote a quick little function that switched the background and told the radio button to be selected when the user clicked on the <div>.

Understand? The only problem is that is uses JavaScript. It wouldn't be too difficult to make it still work without the extra styling if JS was disabled, though.

[Ryan Fait]

I should write an article about this...

[masonbarge]

That's a good workaround Ryan, thanks. If you're going to need js though, why not just use a rollover/onclick? I'll try to use the concept with css but I'm not optimistic about IE support for it.

I may investigate XForms even though they require a browser plugin. I'm not through with introductory XSLT yet but XForms is on my list.

[Ryan Fait]

I made custom checkboxes once and it worked fine in IE. I don't quite understand what mean about the rollover/onclick stuff...

[Ryan Fait]

I couldn't find my old script, so I made a new one. I found the old checkbox images, though. This is fairly universal, but you'll need to be a little familar with JavaScript to play around with it. I haven't tested in IE, but it works fine in Firefox and Safari. I don't really see any reason why it wouldn't work in IE. Let me know if there are any problems with it.

Oh, and if someone has JavaScript disabled, there is no background image and a regular checkbox is displayed.

http://ryanfait.com/checkbox/

[spinal007]

I set up a quick example: http://www.pinesandneedles.com/radio
The idea is similar to ryan's above...

The concept:
1. Find all forms on page
2. Find all input controls with the form
3. Loop through controls and find the ones with type='checkbox' or type='radio'...
3.1. Hide control, append an image next to the control
3.2. Attach events to image (click, mouseover, etc)

You can develop it further by using different images, ie.: some of my checkboxes have a class 'YesNo', which displays a green tick when the control is checked and a red x when the control is not checked... etc

PS.: Ryan, play around with the bottom checkboxes and you'll see the image/checkbox don't always match...

PPS.: Works without JS too!

[Ryan Fait]

Okay, I'll have to do a little more playing with it. It can't be fooled in Safari. In Firefox, if you click the real checkbox, it doesn't fire the other one, but that doesn't matter because they'd normally be hidden. I've have a gander at it in Windows.

On yours, I just get 5 alerts saying "Cannot insert HTML" in Safari... No radio buttons or checkboxes are visible.

[Ryan Fait]

Aw, my script runs horribly in IE6. I'm working on fixing it now and adding support for custom radio buttons. I think I will write a small article on it and provide the code once I get it working properly.

Oh, and I should note. Those looking at mine in IE will see a background color around the images. It's just because I'm using PNG24 and IE doens't support that. I'll change those to GIFs later today.

[Ryan Fait]

Update:

I added radio buttons to the page. It has now been fixed and tested in IE 5, 6, 7; Opera; Firefox; and Safari. This was a fun little project

http://ryanfait.com/checkbox/

[spinal007]

"handle: function() {"
Bad coding style Ryan! Very bad! LOL
I'm only saying that because I like to crunch my scripts when I'm done with them, and your style isn't crunching friendly - but it does look cool.

Damn Safari. I've just downloaded a Windows equivalent called swift and I'll have those problems sorted eventually....

[Ryan Fait]

It's not bad coding! It's an organized approach to multiple functions that should be grouped accordingly. Find me a shred of evidence about why my way is bad, other than personal preference, and I'll willingly change my habbits...

[spinal007]

Easy matey, I was joking! LOL
It's not bad at all, in fact, it's very organized and nice to read....
I just prefer the 'hard coding' everything so I can crunch my scripts.

[Ryan Fait]

Haha, you got me all riled up and I spent some time looking around on Google afterwords, seeing if there was something about it that was bad

I know what you mean about the hard coding. When I first started learning JavaScript, I saw a script that was coded the way I do it now and it seemed to make more sense. I have run into a couple of problems with the style, though. Some functions (specifically Ajax ones) can't be sent back and forth between different functions inside a variable. As far as I know anyway. I'm just super anal about making code look as pretty as I can, so I'll stick with it.