Adding images to SharePoint 2007 survey options

In this example I am using -

• SharePoint MOSS 2007
• JQuery 1.5.2 min

 A colleague asked me for a way to spruce up his SharePoint survey page with images, so I put together the following script. It is generic and re-usable so you might even wrap it into a js file to share between sites.

Check out the CSS tutorials here  and the selector tutorial on the JQuery site  to learn more how the selectors work.

Examples -
$(‘body) selects the body element
$(‘.ms-formbodysurvey span.ms-RadioText’) selects all span elements with the class ‘ms-RadioText’ that are a descendent of an element with the class ‘ms-formbodysurvey’.

I’ve added the comments inside the code to explain what is happening. You’ll need to update the paths to your JQuery library, option text, and image paths. You can use the ‘ToolPaneView=2′ hack to put your NewForm.aspx page into edit mode. Then add a ‘Content Editor’ webpart to place the following code in.

Also, you might want to add a bit of CSS to style the position, margin, or padding of the images.

<!-- Including the JQuery library in the page.      This provides the element selector function $() -->
<script type="text/javascript" src="/sites/scripts/jquery-1.5.2.min.js" ></script>
<script type="text/javascript">
$(document).ready(function() {
  // Handler for .ready() called when the document is loaded.
  // We call the following function to iterate through each option
  IterateThroughOptions();
});

function IterateThroughOptions(){
  // This selects all elements that match the expression
  // '.each' performs the defined function on each of the matched elements
  $('.ms-formbodysurvey span.ms-RadioText').each(function(){
      // The span element contains an attribute called Title that we store in a variable called optionText
      // This is the text that is displayed next to the radio button
      var optionText = $(this).attr('Title');
      // Pass the optionText value to our function 'GetImgUrl'
      var imgUrl = GetImgUrl(optionText);
      // Append a new element (img) to our span element
      $(this).append('<img src="' + imgUrl + '" />');
    });
}
function GetImgUrl(optionText){
  // Check the option text and return the correct URL
  if(optionText === "Chargers")
    { return "/sites/NFL_Images/Chargers.jpg"; }
  if(optionText === "Cowboys")
    { return "/sites/NFL_Images/Cowboys.jpg"; }
  if(optionText === "Dolphins")
    { return "/sites/NFL_Images/Dolphins.jpg"; }
// Add more 'IF' statements to match the rest of the option text
// If there are no matches, use this default image path 
return "/sites/NFL_Images/helmet50.gif";
}
</script>

Advertisement