You need to sign in to do that
Don't have an account?
Matt 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>
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.