Hello I'm a student that is building a site for a friends business and I have learned online how to make radio buttons styled with custom images but i am trying to make a small, medium , large option to make the user able to choose the size. I know java but not much Jquery. I understand if it is not possible and I am open to other ways of accomplishing the task as long as i can make code that can check which option is selected to make it direct them to the right page/shopping-cart product.
---HERE'S AN EXAMPLE OF WHAT I HAVE SO FAR: http://squidsquadgang.com/radiobuttons.html any help would be much appreciated!
Thank you, Stephen T.
You have quite a bit of JavaScript doing the work on the radio buttons. The javaScript you are using is actually creating dynamic <span> elements and completely hiding the radiobuttons. While this may support old browsers better, a much more "future-proof" (one might even say "correct") way to do this is through pure CSS. It's simpler, gives you more options and customization, and it will load much faster than that giant JavaScript file.
So, while this may not be exactly what you came here looking for, I encourage you to at least give this a try.
Example: Here's what I've done.
Give it a try: go into your image editor and remove the text. Now, the text displayed on your buttons is in your HTML code. much easier to edit than images, and faster too.
input[type=radio] {
display:none;
}
This selects all the radio buttons on the page and gives them a display:none property. It hides the radio buttons, since you don't want to see those ugly things anymore.
input[type=radio] + label { ... }
This selects all of the radio button labels. In our HTML, we've created labels for each of the <input> elements. It's a built in feature in HTML: when labels are clicked, the radio button is automatically selected. We don't need any javascript here! Don't reinvent the wheel.
Here, we define both the background image and the style of the text to be displayed over the background image (if any). In this case, it's "XS", "S", and "M". I've used display:table-cell to display the buttons side-by-side (like in your link) and make use of the vertical-align property. If there is no text, simply change it do display:inline-block and adjust from there.
input[type=radio]:checked + label { ... }
Finally, we specify the styling for the selected option. In your case, I've moved the background image down 42px (background-position:0 -42px;). Again, you are going to want to remove the text from your image. You can look up other styling you can do - you could make the text "glow" by adding something like:
text-shadow:2px 2px 10px #FF00FF;
You can play around with the details. Even though it's not going to display the images IE8 and before, this will still nicely fall back to whatever text you have in <label>. It will just go to regular old radio buttons. People smart enough to use Chrome or keep IE updated, well, they'll get the extra eye-candy.