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;
}
}
// -->
</script>
<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
<dbpath>/<imagename>?OpenImageResource&ImgIndex=0
or
<dbpath>/<imagename>?OpenImageResource&ImgIndex=1

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.
{cursor: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

Show-n-Tell Thursday