pixelscape
asked on
Using images as radio labels
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='i magebox-ac tive';" src="awards/walnut.jpg" width="190" height="220"/></label>
<label><input type="radio" name="finish" value="cherry">
<img class="imagebox" onClick="this.className='i magebox-ac tive';" src="awards/cherry.jpg" width="190" height="220"/></label>
<label><input type="radio" name="finish" value="piano">
<img class="imagebox" onClick="this.className='i magebox-ac tive';" 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.
<label><input type="radio" name="finish" value="walnut">
<img class="imagebox" onClick="this.className='i
<label><input type="radio" name="finish" value="cherry">
<img class="imagebox" onClick="this.className='i
<label><input type="radio" name="finish" value="piano">
<img class="imagebox" onClick="this.className='i
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.
sorry the image markup will become
<img class="imagebox" onClick="changeClassName(t his)" src="awards/piano.jpg" width="190" height="220"/>
<img class="imagebox" onClick="changeClassName(t
ASKER
Great, thanks!
var allImages = document.getElementsByTagN ame("img") ;
...applies class=imagebox-active to all images on page... I need to specify only apply to class=imagebox
Thanks
var allImages = document.getElementsByTagN
...applies class=imagebox-active to all images on page... I need to specify only apply to class=imagebox
Thanks
ASKER
I am a little confused as to how this should work...
so I replace this line:
var allImages = document.getElementsByTagN ame("img") ;
with this line:
var allImages = document.getElementsByClas sName('ima gebox imagebox-active', 'img'); ?
so I replace this line:
var allImages = document.getElementsByTagN
with this line:
var allImages = document.getElementsByClas
SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<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='i
function changeClassName(thisObj)
{
var allImages = document.getElementsByTagN
for (var counter = 0; counter < allImages.length; counter++)
{
allImages [ counter ].setAttribute("class", "imagebox"); //reset all images
}
thisObj.setAttribute("clas
}