Using a rollover image for hovered view links

Using CSS we can create a style that makes a hovered link appear different for IE, but not for NS 4.

Using CSS we can create a style that makes a hovered link appear different for IE, but not for NS 4. (NS6 does, be who actually considers that a browser yet. When NS gets their act together, we'll design for version 6.) To give our end users the most consistent look and feel, I use image rollovers to represent the current doc. It's clean, consistent and attractive. Here's how to do it:

The explanation below is somewhat long. If you have questions about this code, you can email me: aschottmuller@imation.com

In order to use a rollover image, the image has to have a unique id. The code below uses the document's UNID prefixed with an "i" to represent the unique name of the image.

Key Tips for Image Names:
-Cannot contain special characters or spaces
-Cannot begin with a number
-Must be unique on the page for the mouse-over to work properly

PASTE THIS CODE INTO THE VIEW COLUMN:(*Customize the linktext.)

linktext := yourFieldName;

imgName:= "i"+@Text(@DocumentUniqueID);

anchor:= "<a class=viewLink href="0/"+@Text(@DocumentUniqueID)
+"?OpenDocument" onMouseOut="MM_swapImgRestore()" onMouseOver
="MM_swapImage('"+imgName+"','','ArrowRed.gif',1)"><img
src=clearPixel.gif name="+imgName+" border=0 width=8 height=10>" 
+linktext+"</a>";

"["+anchor+"]"

If you use this tip for multi-db search results, compute the dbpath + UNID for the image name. (Less spaces and special characters.)

In order to roll-over an image, the images must be the same size. In the circumstance above, I roll-over from a clear pixel to a red arrow. The mouse-over script is from Dreamweaver. To use the code above, you'll need to paste the following code into JSHeader of the $$ViewTemplate you are displaying.

If the mouse-over image is not already being used on the page, be sure to pre-load it. To do so...

PASTE THE FOLLOWING CODE INTO onLoad: MM_preloadImages('ArrowRed.gif');

PASTE INTO JSHeader:

//Begin Dreamweaver Rollover Scripts
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image;
d.MM_p[j++].src=a[i];}} } function MM_findObj(n, d) { //v3.0 var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&∥ent.frames.length) { d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);} if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x; } function MM_swapImage() { //v3.0 var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;
for(i=0;i<(a.length-2);i+=3) if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x;
if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];} } //End Dreamweaver Rollover Scripts

You're all set. For you CSS users, I recommend not changing the link color on the hover. If you must use a style, go from underlined to not underlined, to keep it simple and consistent across browsers.

This was last published in April 2002

Dig Deeper on Domino Resources - Part 5

Start the conversation

Send me notifications when other members comment.

By submitting you agree to receive email from TechTarget and its partners. If you reside outside of the United States, you consent to having your personal data transferred to and processed in the United States. Privacy

Please create a username to comment.

-ADS BY GOOGLE

SearchWindowsServer

Search400

  • iSeries tutorials

    Search400.com's tutorials provide in-depth information on the iSeries. Our iSeries tutorials address areas you need to know about...

  • V6R1 upgrade planning checklist

    When upgrading to V6R1, make sure your software will be supported, your programs will function and the correct PTFs have been ...

  • Connecting multiple iSeries systems through DDM

    Working with databases over multiple iSeries systems can be simple when remotely connecting logical partitions with distributed ...

SearchEnterpriseLinux

SearchDataCenter

SearchExchange

SearchContentManagement

Close