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
bob17bob17 

How to change apex:image on mouseover

I am fairly new to Html/VisualForce so maybe this is an obvious question but how does one change the image associated with an apex:image element on a VisualForce page when the user places the mouse over it?
Best Answer chosen by Admin (Salesforce Developers) 
bob17bob17

That did not work exactly as you put in your reply BUT it gave me enough of clue to figure out what does work.  Maybe not the most efficient but it works.  THANK YOU for the assistance. 

 

Code that worked for me:

.
.
.
<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.MyOver}'; 
} 
function ImageNormal(MyImage)
{
    MyImage.src='{!$Resource.MyNormal}'; 
} 
</script>
 


All Answers
kyleRochekyleRoche
You can just use standard javascript. There's an onmouseover event that fires for apex:image
 
<apex:image onmouseover='nameOfJavaScriptFunction'...  


bob17bob17
I saw that but the problem is I do not know how to change the specific image in an apex:image.  For example.  I have the following VF code:
 


<apex:image url="{!$Resource.MyNormalImage}" width="100" height="100" id="MyImage" /> 

 
 
and on mouse over I would like to chnage the image to the file in the static resources called MyHoverImage.  Could you give me an example of how to do that?
 
Thanks


aebenaeben
<script>
	function changeImage()
	{
		this.src='{!$Resource.MySecondImage}'; 
	} 
</script> 
<apex:image url="{!$Resource.MyNormalImage}" width="100" height="100" id="MyImage" onmouseover="changeImage(this)"/>
 
I have not tested it. Give it a try.


bob17bob17
That did not work exactly as you put in your reply BUT it gave me enough of clue to figure out what does work.  Maybe not the most efficient but it works.  THANK YOU for the assistance.  
 
Code that worked for me:
.
.
.
<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.MyOver}'; 
} 
function ImageNormal(MyImage)
{
    MyImage.src='{!$Resource.MyNormal}'; 
} 
</script>
 
This was selected as the best answer
aebenaeben
You got it!!!! Thats exactly how its suppose to be done!!!


pavan@sforcepavan@sforce
  1. 
		How to zoom the Image on mousehover ?