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
Requires Free Membership to View
Register today to access targeted resources from our editorial writers and independent industry experts focused on Lotus Domino, Notes, Workplace and other related technologies.
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&&parent.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 first published in April 2002