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 using php is a little more involved. Mouse over graphics make the site look nice but the session id is carried in the tep_href function. To make this easier create a new text file in the catalog/includes folder called mm.js. The javascript code include (mm.js), the body onLoad code, and the php links have been added to the catalog/includes/header.php so all pages in the store will be able to show this function.
Mouse Over Graphic Links
First, make the mouseovers in an html file so you get the javascript code and the body onLoad information. We will use a code that was made for a site as an example. Make a file called mm.js or another name if you choose and put the generated javascript code in it like this:
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
Add this code to the catalog/includes/header.php file right before the body tag which will add the included mm.js file with the javascript code in it like this:
<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
Add the generated body onLoad code from the html file you made to the body tag in the header.php file like this example:
<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
The actual link using php will be added like this example:
<?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.