?
Solved

Using images as radio labels

Posted on 2011-02-24
7
Medium Priority
?
324 Views
Last Modified: 2012-05-11
I want to substitute the standard radio form buttons for selectable images. Here is my markup for this...

<label><input type="radio" name="finish" value="walnut">
                            <img class="imagebox" onClick="this.className='imagebox-active';" src="awards/walnut.jpg" width="190" height="220"/></label>
                            
                            <label><input type="radio" name="finish" value="cherry">
                            <img class="imagebox" onClick="this.className='imagebox-active';" src="awards/cherry.jpg" width="190" height="220"/></label>
                            
                            <label><input type="radio" name="finish" value="piano">
                            <img class="imagebox" onClick="this.className='imagebox-active';" src="awards/piano.jpg" width="190" height="220"/></label>


Two issues:
1. How do I hide the actual radio buttons?
2. The onclick events activate the class that highlights the border to indicate selection... how do I revert back if another image is selected? Currently I can 'select' all 3 radio images.

0
Comment
Question by:pixelscape
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 2
7 Comments
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34972817
for all radio buttons add this style

<input type="radio" name="finish" value="walnut" style="display:none">

or you can simply remove the radio buttons itself

when you click an image, try something like

<img class="imagebox" onClick="this.className='imagebox-active';" src="awards/piano.jpg" width="190" height="220"/>

function changeClassName(thisObj)
{
   var allImages = document.getElementsByTagName("img");
   for (var counter = 0; counter < allImages.length; counter++)
   {
        allImages [ counter ].setAttribute("class", "imagebox"); //reset all images
   }
    thisObj.setAttribute("class", "imagebox-active");
}
0
 
LVL 40

Expert Comment

by:Gurvinder Pal Singh
ID: 34972822
sorry the image markup will become
<img class="imagebox" onClick="changeClassName(this)" src="awards/piano.jpg" width="190" height="220"/>

0
 

Author Comment

by:pixelscape
ID: 34973122
Great, thanks!

var allImages = document.getElementsByTagName("img");

...applies class=imagebox-active to all images on page... I need to specify only apply to class=imagebox

Thanks
0
Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

 

Author Comment

by:pixelscape
ID: 34973843
I am a little confused as to how this should work...

so I replace this line:
var allImages = document.getElementsByTagName("img");

with this line:
var allImages = document.getElementsByClassName('imagebox imagebox-active', 'img'); ?
0
 
LVL 40

Assisted Solution

by:Gurvinder Pal Singh
Gurvinder Pal Singh earned 400 total points
ID: 34976710
if you are using the last link (second code) in my last reply, then make it

var allImages = getElementsByClassName(document, "img", 'imagebox imagebox-active' );

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 1600 total points
ID: 34978201

Try something like this:

<html>
<head>
<title>http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q__26845659.html</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js" type="text/javascript"></script>
<script> 

jQuery(document).ready(function(){

  $(".imagebox").click( function() {

    $(this).siblings().get(0).checked = true;
    $(".imagebox-active").removeClass( "imagebox-active" );
    $("input[name=finish]:checked").siblings().addClass( "imagebox-active" );

  });

});

</script>

<style>
label { display: block; cursor: pointer; }
.label-radio input { position: absolute; left: -9999px; }
.imagebox-active { border: 3px dashed #f00; }
</style>

</head>
<body>

<label class="label-radio">
  <input type="radio" name="finish" value="walnut">
  <img class="imagebox" src="awards/walnut.jpg" width="190" height="220"/>
</label>
                            
<label class="label-radio">
  <input type="radio" name="finish" value="cherry">
  <img class="imagebox" src="awards/cherry.jpg" width="190" height="220"/>
</label>
                            
<label class="label-radio">
  <input type="radio" name="finish" value="piano">
  <img class="imagebox" src="awards/piano.jpg" width="190" height="220"/>
</label>

</body>
</html>

Open in new window

0

Featured Post

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…

718 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question