1

I am trying to build a simple VF page that has 2 buttons on it. One button creates a new record; the other links to the Reports tab. I have been able to get all the functionality working except that I want to have the ability to change the image used for the commandButtons upon hovering over them. However, when I use the below code, the images do not appear (before or after hover) and I'm unsure what the issue is. 

<apex:page controller="Upload_Executed_Agmt_Button_Class">
    <apex:form enctype="multipart/form-data">
        <style type="text/css">
            .myDataButton{
                background-image: url('/servlet/servlet.FileDownload?file=01517000000Atf5') !important;
            }
            .myDataButton:hover{
                background-image: url('/servlet/servlet.FileDownload?file=01517000000Atol') !important;
            }
        </style>
    <apex:outputPanel id="selected">
        <script type="text/javascript">                  
            function refreshAgmt(){
                window.top.location = "{!redirectUrl}";
            }
        </script>
    </apex:outputPanel>       
    <apex:pageMessages />
    <apex:pageBlock >
        <apex:pageBlockSection showHeader="false" columns="2" id="block1" >
        <apex:pageBlockSectionItem >                  
                <apex:commandButton action="{!createAgmt}" image="/servlet/servlet.FileDownload?file=01517000000Atf0" value="Upload Executed Agreement" styleClass="buttonStyle" style="color:white; font-size: 200%; background:White; margin-left:275px; width:500px; height:auto;"  rerender="selected" oncomplete="refreshAgmt();"/>
        </apex:pageBlockSectionItem>
        <apex:pageBlockSectionItem >              
                <apex:commandButton action="{!showReports}" value="Data" styleClass="myDataButton" style=" color:white; font-size: 200%; background:White; margin-left:0px; width:500px; height:auto"  rerender="selected" oncomplete="refreshAgmt();"/>
        </apex:pageBlockSectionItem>   
        </apex:pageBlockSection>
     </apex:pageBlock>
  </apex:form>
</apex:page>
Improve this question
4
  • Do you see any issues in your console? I picked 2 random images from google and set as background-image:url and on hover the images are rendering fine
    – Rao
    Oct 8, 2015 at 16:28
  • Take a look into CSS Specificity. You need a more specific selector in all likelihood. You should be able to inspect element and see that some styles you have set are not being applied, which you can fix by making your selectors more specific.
    – Adrian Larson ♦
    Oct 8, 2015 at 16:34
  • to be sure, which button are you facing problems with?
    – Anshul
    Oct 8, 2015 at 17:02
  • Thanks all. I was able to get the images appearing. However, the issue I am now running into is it is taking a few seconds to load the image that shows up on hover. It creates a strange experience. Is there a way to resolve for that time lapse?
    – Matt
    Oct 22, 2015 at 19:54

1 Answer 1

Reset to default
1

I checked your code with two random images as below from google and it is working fine. As Rao said did you checked browser console for any error? Double check the URLs /servlet/servlet.FileDownload?file=01517000000Atf5 and /servlet/servlet.FileDownload?file=01517000000Atol for proper file download. 

<apex:page standardController="Account">
    <style type="text/css">
        .myDataButton{
            background-image: url('http://indiespot.net/files/blue_button.png') !important;
        }
        .myDataButton:hover{
            background-image: url('http://www.indiespot.net/files/pink_button.png') !important;
        }
    </style>    
    <apex:form >
        <apex:pageBlock>
            <apex:pageBlockSection>     
                <apex:pageBlockSectionItem >
                    <apex:commandButton action="{!save}" value="Data" styleClass="myDataButton" style=" color:white; font-size: 200%; background:White; margin-left:0px; width:500px; height:auto"  rerender="selected" oncomplete="refreshAgmt();"/>
                </apex:pageBlockSectionItem>
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Improve this answer
3
  • Thanks Saroj. So I've discovered that it is showing the image, but that the image is not auto-resizing so it is just showing the upper corner of the image. Do you know how to set it up so that the image coming from the styleclass will resize?
    – Matt
    Oct 22, 2015 at 16:54
  • Okay, I was able to get the image to auto-resize by adding background-size: contain !important; into the .myDataButton. The issue I am now running into is it is taking a few seconds to load the image that shows up on hover. It creates a strange experience. Is there a way to resolve for that time lapse?
    – Matt
    Oct 22, 2015 at 19:53
  • Yes, there is a way. You have to pre-load the image for a smooth experience. Please check this link for details. perishablepress.com/…
    – Saroj Bera
    Oct 23, 2015 at 19:36

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .