Monday 10 November 2014

Change Images When Picklist value Changes



You can add create a functionality in which on change on picklist value the images will change. To do so add images in your static resource and create vf page and controller with below code. 


Visualforce page:

<apex:page controller="PicWithPicklist">
    <apex:form >
        <apex:pageBlock >
            <apex:selectList value="{!legend}" size="1">
                <apex:selectOptions value="{!legendNames}"></apex:selectOptions>
                 <apex:actionSupport event="onchange" reRender="picPanel"/>
            </apex:selectList>
        </apex:pageBlock>
    </apex:form>   
   
    <apex:outputPanel id="picPanel">
   <apex:image rendered="{!legend='jobs'}" value="{!$Resource.jobs}" width="200" height="200"/>
        <apex:image rendered="{!legend='gates'}" value="{!$Resource.gates}" width="200" height="200"/>
        <apex:image rendered="{!legend='benioff'}" value="{!$Resource.mark}" width="200" height="200"/>
        <apex:image rendered="{!legend='larry'}" value="{!$Resource.larry}" width="200" height="200"/>
    </apex:outputPanel>
</apex:page>

Controller :

public class PicWithPicklist {

    public String legend;
   
    public void setLegend(string legend) {
        this.legend = legend;
    }
   
    public String getLegend() {
        return legend;
    }
   
    public List<SelectOption> getLegendNames() {
        List<SelectOption> option = new List<SelectOption>();
        option.add(new SelectOption('None', 'none'));
        option.add(new SelectOption('jobs', 'Steve Jobs'));
        option.add(new SelectOption('gates', 'Bill Gates'));
        option.add(new SelectOption('benioff', 'Mark Benioff'));               
        option.add(new SelectOption('larry', 'Larry Ellison'));       
        return option;
    }
   
}  

No comments:

Post a Comment