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:
Code
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&&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.
