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. (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
src=clearPixel.gif name="+imgName+" border=0 width=8 height=10>" 


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');


//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

There are Comments. Add yours.

TIP: Want to include a code block in your comment? Use <pre> or <code> tags around the desired text. Ex: <code>insert code</code>

REGISTER or login:

Forgot Password?
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
Sort by: OldestNewest

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:

Disclaimer: Our Tips Exchange is a forum for you to share technical advice and expertise with your peers and to learn from other enterprise IT professionals. TechTarget provides the infrastructure to facilitate this sharing of information. However, we cannot guarantee the accuracy or validity of the material submitted. You agree that your use of the Ask The Expert services and your reliance on any questions, answers, information or other materials received through this Web site is at your own risk.