Notes/Domino XPages Development Forum - Rollover/OnMouseOver image?

This forum is closed to new posts and responses. Individual names altered for privacy purposes. The information contained in this website is provided for informational purposes only and should not be construed as a forum for customer support requests. Any customer support requests should be directed to the official HCL customer support channels below:

HCL Software Customer Support Portal for U.S. Federal Government clients
HCL Software Customer Support Portal

~Fred Xanjumimarakoi

Jun 5, 2012, 1:59 PM

24 Posts

Resolved

Rollover/OnMouseOver image?

Category: Dojo and Client Side JavaScript
Platform: Windows
Release: 8.5.3
Role: Developer
Tags:
Replies: 2

I have a button image that I would like to change when the mouse rolls over the graphic.

Is there a way to add a rollover/OnMouseOver image? I see the event for the image, but not sure what to place in the event.

Do I have to write some JavaScript to change?

Thanks!
Dan

~Ben Asaponeskioden

Jun 5, 2012, 2:37 PM

126 Posts

Re: Rollover/OnMouseOver image?

something like this - i just used some of the iamges from teamroom, change as you like

<xp:image url="/1_Day_deselected_24.gif" id="image1">

<xp:eventHandler event="onmouseover" submit="false">

<xp:this.script>

<xp:executeClientScript>

<xp:this.script><![CDATA[

var image = dojo.byId("#{id:image1}");

dojo.attr(image, "src", "1_Day_selected_24.gif");

]]> </xp:this.script>

</xp:executeClientScript>

</xp:this.script>

</xp:eventHandler>

</xp:image>

~Fred Xanjumimarakoi

Jun 5, 2012, 4:03 PM

24 Posts

Re: Rollover/OnMouseOver image?

Perfect!

I added this to the onmouseover event Client side JavaScript:

var image = dojo.byId("#{id:imageInternal}");
dojo.attr(image, "src", "hover_image.gif");

Add to make sure it went back to the original image, I added this to the onmouseout event Client side JavaScript:

var image = dojo.byId("#{id:imageInternal}");
dojo.attr(image, "src", "original_image.gif");

Thanks!
Dan