function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
Matt Cooper 7Matt Cooper 7 

Change commandButton image on hover

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>

 
James LoghryJames Loghry
Looks like your class is set up correctly.  Double check that the image path is correct, though.

First, go to https://yourinstance.salesforce.com/servlet/servlet.FileDownload?file=01517000000Atol and make sure it serves the image your expecting.

Also, you currently have: background-image: url('/servlet/servlet.FileDownload?file=01517000000Atol')

But try it without the first slash: background-image: url('servlet/servlet.FileDownload?file=01517000000Atol') and see if that works.

If that doesn't work try it with "./" instead.  If that doesn't work, try fully qualifying the URL as well.

It may make sense to store the image as a static resource rather than as an attachment if none of the above work.