Help on changing header links to to GIF rollover images

[TimP]

I want to change the header links "My Account" "Cart Contents" and "Checkout" to GIF rollover images. This also needs to be the case for the "Log Off" link when someone is logged in.

 

i have looked at header.php and the HeaderNavigation class line but I can't get this going, if someone knows how to do this can you post this code for this line.

 

regards

 

tim

[Jason Jacobs]

Tim,

The site I'm working on wanted that as well. Not only did he want rollovers, he also wanted to have the page's tab be a different color than the rest when you were on that page. :)

 

What I did was take the text links out of that header bar, but save the code for them. Then make your rollovers just like normal, but use the links that the text links used.

 

For example, my account tab looks like this:

echo "<a href="" . tep_href_link(FILENAME_ACCOUNT, '', 'NONSSL') . ""  onmouseover="turnOn('maintab4a');return true" onmouseout="turnOff('maintab4a');return true">" . tep_image(DIR_WS_IMAGES . 'maintab4a.gif', HEADER_TITLE_MY_ACCOUNT, 111, 36, 'name="maintab4a"') . '</a>';

 

Everything is standard rollover code, except the links and images are generated by their OSC functions. The only file I changed was header.php (well, I added an include with my rollover script in it, but that doesn't affect any OSC page).

 

If you want to see them in action, PM me and I'll send you the link. I hope this helps!

 

-j

[nebnq]

Hi I am having problems with seeting up the mouse over to utilise the tep refs, it works fine with the hard coded links

 

<SCRIPT LANGUAGE = "JavaScript">

<!--

if (document.images) { // Active Images

img1on = new Image();

img1on.src = "images/header/nav_shopfront.gif";

 

img1off = new Image();

img1off.src = "images/header/nav_home.gif";

 

}

 

// Function to 'activate' images.

 

function imgOn(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "on.src");

}

}

 

// Function to 'deactivate' images.

 

function imgOff(imgName) {

if (document.images) {

document[imgName].src = eval(imgName + "off.src");

}

}

 

// -->

</SCRIPT>

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

<tr class="headerNavigation">

<td><a href="http://www.xxxxx.com" onmouseover="imgOn('img1')" onmouseout="imgOff('img1')"><IMG SRC="images/header/nav_logoff.gif" border ="0" name ="img1"></a><?php echo '<a href="' . tep_href_link(FILENAME_DEFAULT) . '">' . tep_image(DIR_WS_IMAGES . 'header/nav_shopfront.gif', HEADER_TITLE_CATALOG) . '</a>'; ?></td>

<td align="right" ><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header/nav_logoff.gif', HEADER_TITLE_LOGOFF) . '</a>'; ?><?php } ?><?php echo '<a href="' . tep_href_link(FILENAME_ACCOUNT, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header/nav_account.gif', HEADER_TITLE_MY_ACCOUNT) . '</a><a href="' . tep_href_link(FILENAME_SHOPPING_CART) . '">' . tep_image(DIR_WS_IMAGES . 'header/nav_cart.gif', HEADER_TITLE_CART_CONTENTS) . '</a><a href="' . tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL') . '">' . tep_image(DIR_WS_IMAGES . 'header/nav_checkout.gif', HEADER_TITLE_CHECKOUT) . '</a>'; ?></a></td>

</tr>

</table>

[nebnq]

Hi

This is how I got it to work in my header if someone else has the same problem .

 

<script language="JavaScript" type="text/JavaScript">

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

 

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[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<table border="0" width="100%" cellspacing="0" cellpadding="0" bgcolor="#ffffff">

<tr class="headerNavigation">

<td><a href="http://www.xxxxx.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image4','','images/header/nav_home_a.gif',4)"><img src="images/header/nav_home_b.gif" name="Image4" border="0" alt="Return to HOME page"></a><a href="<?php echo tep_href_link(FILENAME_DEFAULT, '', 'NONSSL'); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image5','','images/header/nav_shopfront_a.gif',5)"><img src="images/header/nav_shopfront_b.gif" name="Image5" border="0" alt="Shopfront"></a></td>

<td align="right" ><?php if (tep_session_is_registered('customer_id')) { ?><a href="<?php echo tep_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image6','','images/header/nav_logoff_a.gif',6)"><img src="images/header/nav_logoff_b.gif" name="Image6" border="0" alt="Logoff"></a><?php } ?><a href="<?php echo tep_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/header/nav_account_a.gif',1)"><img src="images/header/nav_account_b.gif" name="Image1" border="0" alt="Account"></a><a href="<?php echo tep_href_link(FILENAME_SHOPPING_CART, '', 'SSL'); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/header/nav_viewcart_a.gif',2)"><img src="images/header/nav_viewcart_b.gif" name="Image2" border="0" alt="View Cart"></a><a href="<?php echo tep_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/header/nav_checkout_a.gif',1)"><img src="images/header/nav_checkout_b.gif" name="Image3" border="0" alt="Checkout"></a></td>

</tr>

</table>