Another update – it works now for multi response as well:
download lss example – right click on this link and save the file
UPDATE!! EXTRA NOTE FOR 1.92 and above
Expression Manager in 1.92 can screwing up your valid JavaScript code.
With EM, you need a space after all opening curly braces and before all closing curly braces.
for example:
$(this).css({'border':'10px solid ' + checkedBorder + ''});
needs to be:
$(this).css({ 'border':'10px solid ' + checkedBorder + '' });
Tested with Version 1.92+ Build 120405
download lss example – right click on this link and save the file
Example3<br />
<br />
- No radio buttons<br />
- You will see a pointer when you point your mouse on the image<br />
- And you see that you selected the image when clicking on the image <script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// Insert the images into the labels
$( 'label[for="answer65848X2X6A1"]' ).html('<img title="Option 1" src="../plaatjes/smile.jpg"/>');
$( 'label[for="answer65848X2X6A2"]' ).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(6);
});
</script>
Please note to have Javascript enabled
Tested with Version 1.90 Build 9642
In the demo/example I have 3 questions;
- One is just an image in the answer instead of text
- the second question is an image next to the checkbox
- the third one is an image without the checkbox
This third example is described here below
- Create a new single response question, with 2 answers, name the answers A1 and A2 (just add some text in A1 and A2 as answer text – this will not be displayed)
- Click on the lime and then on code.
And add the following javascript example code in this question: - Change here only the IDs for Survey, Group and Question (see in orange)
Change the images you want to use (see in red)
Change the number (see in blue) of this question<script type=”text/javascript” charset=”utf-8″>function Custom_On_Load(){ $(document).ready(function() { // Insert the images into the labels $( ‘label[for="answer65848X5X35A1"]‘ ).html(‘<img title=”Option 1″ src=”./imagesinsurvey/smile.jpg“/>’); $( ‘label[for="answer65848X5X35A2"]‘ ).html(‘<img title=”Option 2″ src=”./imagesinsurvey/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 – om de inline-block netjes uit te lijnen
// 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(35);
});
}
</script>
