Adding images to SharePoint 2007 survey options

Posted: August 12, 2011 in 2007, SharePoint
Tags: ,

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>
Advertisements
Comments
  1. alexa8 says:

    good point!
    useful to me

  2. Marsh says:

    Thanks
    Is this way to replace text options with images?
    If yes, in sharepoint 2010 put this code in content editior ?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s