osCommerce Knowledge Base

Add Mouse Over Graphic Links with Session ID Last Update: 4th October, 2005
Article ID: 271

Introduction
Mouse Over Graphic Links

Add the mm.js Include
Body onLoad Code
Actual Links

Introduction

Mouse Over Graphic Links



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_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_findObj(n, d) { //v4.01

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

  if(!x && d.getElementById) x=d.getElementById(n); 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];}

}

Add the mm.js Include to catalog/includes/header.php File



<head>

<script language="JavaScript" type="text/JavaScript" src="/includes/mm.js"></script>

</head>

NOTE: The head tags can be removed and this code will still work.

Body onLoad Code



<body onLoad="MM_preloadImages('../images/nav_checkout_over.gif','../images/nav_cart_over.gif','../images/nav_home_over.gif','../images/nav_acct_over.gif')">

Actual Links




<?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '" onMouseOver="MM_swapImage(\'nav_home\', \'\', \'../images/nav_home_over.gif\', 1)" onMouseOut="MM_swapImgRestore()">' . tep_image(DIR_WS_IMAGES . 'nav_home.gif', 'Home', null, null, 'name="nav_home"') . '</a>'; ?>

<?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT) . '" onMouseOver="MM_swapImage(\'nav_acct\', \'\', \'../images/nav_acct_over.gif\', 1)" onMouseOut="MM_swapImgRestore()">' . tep_image(DIR_WS_IMAGES . 'nav_acct.gif', 'My Account', null, null, 'name="nav_acct"') . '</a>'; ?>

<?php echo '<a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '" onMouseOver="MM_swapImage(\'nav_cart\', \'\', \'../images/nav_cart_over.gif\', 1)" onMouseOut="MM_swapImgRestore()">' . tep_image(DIR_WS_IMAGES . 'nav_cart.gif', 'My Cart', null, null, 'name="nav_cart"') . '</a>'; ?>

<?php echo '<a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING) . '" onMouseOver="MM_swapImage(\'nav_checkout\', \'\', \'../images/nav_checkout_over.gif\', 1)" onMouseOut="MM_swapImgRestore()">' . tep_image(DIR_WS_IMAGES . 'nav_checkout.gif', 'Checkout', null, null, 'name="nav_checkout"') . '</a>'; ?>

NOTE: Change the names of the graphics above to reflect your graphic names and graphic id names.