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.

This Content Component encountered an error

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 first published in April 2002

Dig deeper on Domino Resources - Part 5

0 comments

Oldest 

Forgot Password?

No problem! Submit your e-mail address below. We'll send you an email containing your password.

Your password has been sent to:

-ADS BY GOOGLE

SearchWinIT

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

SearchVirtualDataCentre.co.UK

Close