+ Start a Discussion
Charline MitchenerCharline Mitchener 

Create a rollover effect on static resource image

Hi, I want to create a mouse rollover effect on my images in a visualforce page. Below is a sample of my code for one of the images. Can someone please let me know what I need to do/add to create a 'highlight' effect on the image? Thanks so much!

<td align="center" valign="center">
<img src="https://cs5.salesforce.com/resource/1415592831000/FINANCIAL" />
<br />
SonamSonam (Salesforce Developers) 
Using Javascript you can highlight the image, (basically show another image on mouse roll over)sample code below:

<apex:page >
 <apex:image url="{!$Resource.MyNormal}" width="100" height="100" id="MyImage" onmouseover="ImageOver(this)" onmouseout="ImageNormal(this)" /> <script type="text/javascript"> function ImageOver(MyImage) { MyImage.src='{!$Resource.Blue}'; } function ImageNormal(MyImage) { MyImage.src='{!$Resource.Green}'; } </script>
</apex:page>