Using Images as Radio Buttons - CSS / PHP / Javascript

[NetwiseHosting]

Hi All,

I have trawled the net for well over an hour now, and I have come across a few similar examples, but nothing quite the same as I am looking for. In short I am trying to replace a set of four radio buttons with a set of 4 individual images, with a second set of images for hover and selected - is this possible?

I would have thought I could send the actual radio buttons off screen in CSS and use the label tags to contain the images, and this would work including a hover class but I am not sure about selected. Perhaps Javascript to add a selected class? The only issues is each radio button requires a different image, so a different class would need to be applied for each.

Thanks in advance for your help,

Matthew

 

[FreelanceSoftwareDeveloper]

That's a clever idea to use labels and move the radio buttons off the visible page.

For selected if you have JQuery in the page just create a Click function for each label. Use an If(radio button selected) $("#label_id").css(background: ...) else ...background = ...

You will have to check if the click gets the radio button state before or after it changes and use accordingly.

 

[cmcp]

Form elements behave differently in every browser, in my experience it is best to leave form fields as close to the browser default as you can. It's the best option to guarantee the user will recognise those elements.

 

[NetwiseHosting]

Hi Guys,

Many thanks for getting back to me. jQuery sounds like a good idea, I will explore this and let you know how I get on.

Regarding leaving form elements unstyled, normally I would agree with you but in this instance we are creating a configuration calculator for one of our services that is highly styled with jQuery UI sliders etc and this is one element we were stuck on.

Thanks for all your input guys,

Matthew

 

[10032012]

Try:

http://webdesign.maratz.com/lab/fancy-checkboxes-and-radio-buttons/demo.html ??

 

[Vennweb]

set up images with Jscript to switch on over, click etc. In Jscript write info to a set of hidden input boxes <input type="hidden" id="radio1" .... />
read values from hidden boxes on following page.

Our site uses a lot of image buttons, see jscript there: vennweb.co.uk. This approach will reduce server side calls for data

 

[astutiumRob]

Or be user, browser, search-engine, disability and bandwith friendly and just use radio buttons ...

 

[Vennweb]

Or be user, browser, search-engine, disability and bandwith friendly and just use radio buttons ...

all this can be met with a more interesting interface and keep the attention of the browsee and potential customer.

 

[NetwiseHosting]

Hi All,

Going well - will report back with the final product this week.
All the best,

Mathew

 

[NetwiseHosting]

Hi All,

Just a quick follow up message, to say after many hours of coding we have finished our Colocation Calculator which the above questions were related to. You can see the finished product here: http://www.netwisehosting.co.uk/server-colocation/colocation-calculator/index.html which shows the images being used as radio buttons.

If it's of help to anyone, the code behind these radio buttons can be seen on this JS Fiddle: http://jsfiddle.net/HVk7d/18/

The main issue was not displaying the images, this along with the hover function was simple in CSS, but then getting the hover image to 'stick' when selected was the difficulty, especially when each button has a different selected image and therefore the same selected class couldn't be applied to each - if that makes sense! Luckily a little bit of JavaScript came to the rescue here.

Anyway, thanks again for all your assistance,

Matthew

 

[FreelanceSoftwareDeveloper]

That looks good. You could use a single selected class if you made 4 separate background sprites. You would still use the quarter, half, full classes to define the background image but that is all, you apply another class to all the items then it looks like this.

http://jsfiddle.net/HVk7d/19/

 

[NetwiseHosting]

Hi there,

Many thanks for your feedback - I agree, that might be worth doing. Thank you for your thoughts on this!
All the best,

Matthew