I have once received a nice script from Tpartner for having the functionality of clickable images as answers (no radio buttons and the option to click on the image).
This is just working fine in LS 1.91, but in 1.92 it is not working.
I know there is no support on workarounds but just wondering if someone sees why this is not working anymore.
I have the example
here
The link for a working example is
here (screen 3)
Maybe I just miss a small thing what is different in 1.92?
And otherwise this is the code:
Code:
<script type="text/javascript" charset="utf-8">
function Custom_On_Load(){
$(document).ready(function() {
// Insert the images into the labels
$( 'label[for="answer65848X42X146A1"]' ).html('<img title="Option 1" src="../plaatjes/smile.jpg"/>');
$( 'label[for="answer65848X42X146A2"]' ).html('<img title="Option 2" src="../plaatjes/smile.jpg"/>');
// A function to handle the behavior of images in select/radio questions
function labelImageEffects(qid) {
////////// Set your border colors here /////////
var uncheckedBorder = '#fff';
var checkedBorder = '#0F0';
var hoverBorder = '#066';
///////////////////////////////////////////////
// Find the initial state of the radio buttons and style labels accordingly
$( '#question' + qid + ' td.answer label.answertext' ).each(function(i) {
var id = $( this ).attr('for');
if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) {
$(this).css({'border':'10px solid ' + checkedBorder + ''});
}
else {
$(this).css({'border':'10px solid ' + uncheckedBorder + ''});
}
});
// Hide the radio buttons
$( '#question' + qid + ' input.radio' ).hide();
// Label pointer and width styles
// $( '#question' + qid + ' td.answer label.answertext' ).css({'cursor':'pointer', 'width':'auto'});
$( '#question' + qid + ' td.answer label.answertext' ).css({'cursor':'pointer', 'width':'auto', 'height':'auto', 'display':'inline-block'});
// Dennis - extra for the inline-block outline
// Fix list text-indent
$( '#question' + qid + ' li' ).css({'text-indent':'0'});
// Hover label border styles
$( '#question' + qid + ' td.answer label.answertext' ).hover(function () { // On mouseover
var id = $( this ).attr('for');
$(this).css({'border':'10px solid ' + hoverBorder + ''});
},
function () { // On mouseout
var id = $( this ).attr('for');
if ( $( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked') == true ) {
$(this).css({'border':'10px solid ' + checkedBorder + ''});
}
else {
$(this).css({'border':'10px solid ' + uncheckedBorder + ''});
}
});
// Checked label border styles
$( '#question' + qid + ' td.answer label.answertext' ).click(function (event) {
$( '#question' + qid + ' td.answer label.answertext' ).css({'border':'10px solid ' + uncheckedBorder + ''});
$( this ).css({'border':'10px solid ' + checkedBorder + ''});
// IE hack to check the affiliated radio button
var id = $( this ).attr('for');
$( '#question' + qid + ' td.answer input#' + id + '' ).attr('checked', true);
});
}
// Call the image effects function
labelImageEffects(146);
});
}
</script>
Topic Author
