Wednesday, June 14, 2006

Changing image on mouseover & mouseout

Usually we will create 2 seperate images for mouse over effects. In Lotus Notes you can do it by using 1 image only. Create one image containing the orginal image and mouse over image side by side. Add a line seperator in the middle. Sample image below.

Create a new image resource. In the property "Basic" tab, change the value of "Image cross" to 2.

In your form, you can insert the image resource. By default, Lotus Notes will show the first image (Left). When previewing the form, the image will change to the second image(right) when mouseover the image and back to the first image when mouseout.

This works on web also. In the image property, check on "Web browser compatible". Domino will create the function below.

<script language="JavaScript" type="text/javascript">
function dominoWellLoad(elem, baseUrl, width) {
elem.well = new Array();
for (var i=0; i < width; i++) {
elem.well[i] = new Image();
elem.well[i].src = baseUrl+"&ImgIndex="+i;
// -->
<img src="dbpath.nsf/Email.gif?OpenImageResource&ImgIndex=0" width="62" height="65" onmouseover="if (this.well) this.src = this.well[1].src;" onmouseout="if (this.well) this.src = this.well[0].src;" onload="if(null==this.well) dominoWellLoad(this, 'dbpath.nsf/Email.gif?OpenImageResource&ImgIndex=0', 2);" alt="">

You can also use the image individually by from the source

By default, the cursor remains the same so you may want to add to the style or a class in stylesheet to change it to a pointer.

You can try out using more image
2 (Second position) - for mouseover
3 (Third positio) - for selected image
4 (Fourth position) - for mouse-down image


Anonymous said...

I cannot find the image resource properties! Is there a direct way to get to it? It is really beginning to frustrate me. I am using version 8.5.2. Thanks!

Anonymous said...

Anonymous, you have to use a Notes Designer client. YOu can find it under the Resource -> Images

Karthikeyan Alagirisamy said...

Nice post. I have been searching for this for a long time and couldn't find any where else.

I tried your procedure. For some reason my Lotus Notes 8.5.3 designer keeps crashing when ever I change the value image across from 1 to 2. Hope I make sense. Can you help me with it.

If this might help - I used Powerpoint to create the 2 images with a pipe symbol in between them and grouped them into a png image.