JS / CSS help

Mike

Mike

New member
Jun 27, 2006
6,779
114
0
50
On the firing line
Once again, I'm posting because fucking Javascript makes me crazy.

Here's what I'm trying to do:

Very simply, I want to use images for radio buttons.

Three radio buttons, 6 images. Pretty simple, in theory.

Or maybe 4 radio buttons and 6 images... whatever.

Here's what I envision (and I see it fucking working all over the web, but all the examples I've tried to make work have failed - yes, I've used Google and Bing and tried no less than a dozen different examples):

You arrive at the site. There are three choices:

- Choice A shows an Apple with a green checkmark, it is selected by default. The unselected version would be just an apple.
- Choice B has a picture of an orange. When selected, it shows an orange and a green checkmark
- Choice C has a picture of a banana. When selected it shows a banana with a green checkmark.

Pretty simple, right?
Bx8VRaZ.gif

How can I implement different images for each radio button? OR if it's simpler, how can I change the damn radio button to images? Unchecked box when unselected, checked box when selected?

Thanks!
 


Don't use radio buttons at all. Use a hidden form field, then just some images with an "onclick" statement within them. When someone clicks on an image, it changes the value of the hidden form field, and changes the image appropriate to with / without a checkbox.
 
BlogHue said:
Is this what you're looking for?

Mike's JS/CSS Question

Edit - Also, if you're going to add a lot of checklist options on your page, you should always preload your images, since they won't load until an action is performed which could mean it not coming down to your desired effect.
Click to expand...


Yes, minus the actual radio buttons. I want the images to replace them.

Hmmm... I guess you could just set the visibility of the radio button to 'no', right? I will play around with it.
 
Mike said:
Yes, minus the actual radio buttons. I want the images to replace them.

Hmmm... I guess you could just set the visibility of the radio button to 'no', right? I will play around with it.
Click to expand...

Setting it to hidden will not trigger a clickable hover.

Try this -
http://amazing.bloghue.com/mike/mikenew.html

I merged the UI with the script I wrote earlier. Done using JqueryUI. www.jqueryui.com - a brilliant Javascript library.

Let me know. :)
 
BlogHue said:
Mike JS/CSS Query - 3 Hiding Input Type // Using Labels

This should be precisely what you're looking for. No jquery or any other library or framework.

My original javascript code with css styling.
Click to expand...


Exactly what I'm looking for!

Thanks BlogHue!

You presented the simplest, easiest to understand code for switching images in a radio button that I've ever seen!

However, being... me... I can't get it to work.

I've got everything that I think I should have, but it's still not switching images.

Only two things I "think" it could be.

1. You call the function "fruit". Does that need to be edited to another name for this to work, if I'm not using fruit images? Seems farfetched, but....

2. You have a div that wraps it all called "radio". Do I need to wrap my radio buttons in a div called radio?

Thanks for all your help!
 
Last edited:
Mike said:
You presented the simplest, easiest to understand code for switching images in a radio button that I've ever seen!

However, being... me... I can't get it to work.
Click to expand...

No worries, happens to the best of us. :)

Mike said:
1. You call the function "fruit". Does that need to be edited to another name for this to work, if I'm not using fruit images? Seems farfetched, but....
Click to expand...

No, I am essentially just calling a variable "fruit" for the function "imageswitch" - this can be named anything.

Code: 
function imageswitch (fruit) {

I am then using document.getElementById within an (if/else) segment to change the values of "src" of your images.

So in the first case, if the value of the variable fruit is returned as 'apple' - document.getElementById kicks in and changes all three images (with one becoming the highlighted image and the other remaining non highlighted) -

Code: 
  if (fruit == 'apple') {
document.getElementById('apple').src = "appletick.png";
    document.getElementById('mango').src = "mango.png";
	document.getElementById('banana').src = "banana.png";
 
So if the value is returned as 'mango' - the second bit of code kicks and so on.

And finally, I am assigning values to the variable 'fruit' using "on Click (this.value)" within my input tags.

^^ What this does is, as as soon as the user clicks on the image, it assigns whatever is within the 'value' field of the input tag as the value of the variable. So if a user clicks the mango image, it sets the value of the variable 'fruit' as 'mango'

----
Pay special attention to the 'value' field within your input tags. This field is what determine your javascript value. Also, pay attention to the ID tag of your images, these should match the IDs being called in the div.

If you're still stuck, you may post your form code here (removing any references to your website) or PM me and I'll be happy to take a look.

Mike said:
2. You have a div that wraps it all called "radio". Do I need to wrap my radio buttons in a div called radio?
Click to expand...

Won't be needed. I just like to wrap my forms in a div, helps with the styling etc.

Cheers

(The on Click function doesn't have space in between it, I had to add the space because I kept getting the inCapsula error when trying to make the post)
 
You must log in or register to reply here.
Top Bottom
Back