function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
AlbertoSMAlbertoSM 

Conditionally showing images in a input type button

Hi everyone,

I have this input type button but I want to display an Image depending on the language of the visualforce.
  
<input type="button" image="{!If(URLFOR($Resource.IKEA_Boton_Enviar_CasCat))}" style="cursor:pointer;border-radius: 10px;" data-role="none" onclick="submitForm()"/>



I have 4 images depending on the language: 
Image1 for Spanish
Image2 for Euskera
Image3 for Catalan
Image4 for english

I don't know how to do it. I've seen multiple times this way to do it, but it's not working: 
<input type="button" image="{!If(idioma == 'es', URLFOR($Resource.Image1), URLFOR($Resource.Image2))}" style="cursor:pointer;border-radius: 10px;" data-role="none" onclick="submitForm()"/>



Thanks in advance and for your time
Cheers!
​Alberto
NagendraNagendra (Salesforce Developers) 
Hi Alberto,

You can use multiple <apex:image> to add an image in the visualforce page and you can use rendered attribute to check if a condition is satisfied, then display this image.

Please see sample code below which will guide you in the right direction. 
<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)}/>
Hope this helps.

Please mark this as solved if it's resolved so that it gets removed from the unanswered queue which results in helping others who are encountering a similar issue.

Thanks,
Nagendra
 
Shruti SShruti S
You can use the background-image property of style attribute for displaying an image on the button. Here is the corrected markup -  
<input type="button" style="background-image:url({!CASE(idioma,"Spanish", URLFOR($Resource.Image1),"Euskera", URLFOR($Resource.Image2),"Catalan", URLFOR($Resource.Image3),"english", URLFOR($Resource.Image4),NULL)});cursor:pointer;border-radius: 10px;" data-role="none" onclick="submitForm()"/>
Please let me know if you have any more doubts.