Display different Images depending on field's value

Question

I have a requirement where I have to display different images stored in Static resource depending on a Lead's custom field's (Profile__c) value. Kindly help me with a sample code which states that if the value of Profile__c is 'A', display /resource/1413133715000/A and If value of Profile__c is 'B' then display /resource/1413133715000/B.

I have this custom formula field on Lead (Profile__c) whose value is being calculated which could be either A, B or C. Now I have created a custom button on Lead detail page which is a URL button where I have mentioned the link of the page which should display different images depending upon Profile__c field's value. Here is the Java script which is being used currently:

 <apex:form >
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
      <script type="text/javascript">
           $(document).ready(function () {
        var result=getParameterByName('lId');
            var url;
          if(result=='A')
          {
            url='https://ap1.salesforce.com/resource/A';
            }
              else if(result='B')
                 {
                url='https://ap1.salesforce.com/resource/B';
             }
                 else if(result='C')
            {
            url='https://ap1.salesforce.com/resource/C';}
             window.location.href=url;
                   function getParameterByName(name) {
                     name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
                         var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
                            results = regex.exec(location.search);
                       return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
             }
                     });
             </script>
    </apex:form>

Answer 1

There are two ways to implement this requirement:

1. You can use multiple <apex:image> to add image in visualforce page and you can use rendered attribute to check if condition is satisfied, then display this image. Please see sample code below:

   <apex:image id="theImage" value="{!$Resource.myResourceImage1}" width="200" height="200" rendered={!IF(leadObj.Profile__c == 'ABC',true,false)}/> <apex:image id="theImage" value="{!$Resource.myResourceImage2}" width="200" height="200" rendered={!IF(leadObj.Profile__c == 'DEF',true,false)}/>

2. Second way is that in your controller logic, you can get name of static resource using your logic, then you can display that static resource in visualforce page.

Answer 2

I would suggest creating a visualforce component. The value of formula field can be passed in as component's attribute and component can have multiple image blocks, each image block for each image and would render appropriate image, based on formula field's value.

With component, this can be reused multiple times.