Adding links and swapping images in Header

[haggis0929]

I've been scouring the Zen Cart posts for information on how to add links in the header. Every one I've come across has resulted in a dead end (mostly due to the post never getting finished with a positive resolution).

Here's what I'm doing...
I created a custom template and have successfully added the main header in the logowrapper in the stylesheet.css page.

I used Dreamweaver to create my swap image & link codes that I want to add into my Zen Cart, but I have NO idea what I should do next. All of these files are new to me - I'm not used to working with shopping cart software.

Is there a file (or files) where I can add my code to?

In DW, this code is created:

(On the Header itself):
<img src="../images/brock_tool_detroit_header.jpg" alt="Login" name="Image1" width="950" height="137" border="0" usemap="#Map" id="Image1" href="#">

(then in the source code):
<map name="Map">
<area shape="rect" coords="421,102,536,137" href="https://www.brocktooldetroit.com/catalog" alt="Home" onMouseOver="MM_swapImage('Image1','','../images/brock_tool_detroit_home_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
<area shape="rect" coords="556,105,672,135" href="#" onMouseOver="MM_swapImage('Image1','','../images/brock_tool_detroit_comments_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
<area shape="rect" coords="692,108,806,135" href="http://www.brocktooldetroit.com/catalog/index.php?main_page=contact_us" alt="Contact Us" onMouseOver="MM_swapImage('Image1','','../images/brock_tool_detroit_contact_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
<area shape="rect" coords="823,104,941,134" href="https://www.brocktooldetroit.com/catalog/index.php?main_page=login" alt="Login" onMouseOver="MM_swapImage('Image1','','../images/brock_tool_detroit_login_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
</map>

Any help is GREATLY appreciated. I've wasted a bunch of hours on this already, with no end in sight!

[haggis0929]

After MUCH more searching, I've got the images in & the links are working ok.

What's NOT working, still, is the rollover effects. Code posted below (in my template/common/tpl_header.php file) - I edited down to the </div> tag & left the rest of the .php file alone.

I'm using 2 images in 2 rows. Top row pic will not change (at least for now, might later). The 2nd row has a map of coordinates that should produce the swap image when rolled over. Links work, alt tags show up, but rollovers are not working at all. Any help is GREATLY appreciated. Thanks!

<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><table id="Table_01" width="950" height="150" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="../images/my_header.jpg" width="950" height="105" alt="" border="0"></td>

</tr>
<tr>
<td>
<map name="FPMap1">
<area shape="rect" coords="561,3,675,27" href="http://www.mysite.com/catalog/index.php?main_page=page&id=1&chapter=2" alt="Comments" onMouseOver="MM_swapImage('Image2','','../images/comments_over.jpg',1)" onMouseOut="MM_swapImgRestore()">
<area shape="rect" coords="696,1,808,26" href="http://www.mysite.com/catalog/index.php?main_page=contact_us" alt="Contact Us">
</map>
<img src="../images/header_bottom.jpg" width="950" height="45" alt="" border="0" usemap="#FPMap1"></td>

</tr>
</table> </div>


<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
<div id="taglineWrapper">
<?php
if (HEADER_SALES_TEXT != '') {
?>
<div id="tagline"><?php echo HEADER_SALES_TEXT;?></div>
<?php
}
?>
<?php
if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
if ($banner->RecordCount() > 0) {
?>
<div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
}
}
?>
</div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>
</div>
<br class="clearBoth" />
<!--eof-branding display-->

[CoolCarPartsOnline]

A link to your site so we can understand what exactly you are trying to do. There is different ways to do things. It can be done in CSS instead of the html codes you used. If I understand correctly you want the background image for the link to change when you hover over it. That can be done in CSS using the right div and commands. I would stay away from html if I were you as they might look different in differenet browsers.

[haggis0929]

Glamorousshoe - thanks. Here's the link - http://www.brocktooldetroit.com/catalog.

I have images I'd like to swap when you rollover "Home", "Comments", "Contact Us", and "Login" at the top.

I have the links working ok, it's just the rollovers I need to get functional now.

Thanks for your help!

[CoolCarPartsOnline]

I would of tried to help if it was CSS and php but you might want to search for a way to swap images in html try to Goolge it or wait to see if any one can help you here. But as you know this is Zen cart forum and not html.

You can achieve what you are trying to do in CSS and php. take a look at the aftermarket site in the signature.

[bobdog]

OK, this can be done.

First, you need to realize that your

brock_tool_detroit_header.jpg

and

brock_tool_detroit_header_bottom.jpg

particularly the brock_tool_detroit_header_bottom.jpg will not serve well as designed for mouseOvers.

You need to break them up in smaller image files if you want Dreamweaver to make mousovers.

Create a new file in dreamweaver just for the header. Now break up the tabs to seperate images- one for the image, the other for the mouseover. Go with the flow with Dreamweaver on the mouseovers. Forget the image map idea.

Now, you need to take a section in the <head> of your new dreamweaver file, (the part that says script language=javascript...) and copy that javascript to a new file and place it in includes/templates/MY_TEMPLATE/jscript folder.

Now take the code that handles the onMouseOver stuff and paste it into the tpl_header where you have your image map.

Rejoice in happiness as this should work.

[haggis0929]

I followed your instructions to the letter, but still no dice. I can think of 2 possible reasons, but not sure what to do if either of them is the problem...

1) Before I uploaded my images, the header was still showing in the background, so there's essentially 2 layers in the same place here. Where would I remove reference to the original header?

2) For the .js file I created (I called it rollovers.js), there must be somewhere to call that file, shouldn't there? Or are the files in the jscript folder automatically run? If I need to call to the file somewhere, where should it be???

[haggis0929]

Thought I'd come back & post the code for the headerwrapper in case it's helpful:

<div id="headerWrapper">



<!--bof-branding display-->
<div id="logoWrapper">
<div id="logo"><table width="950" border="0" cellspacing="0" cellpadding="0">
<tr valign="bottom">
<th colspan="9" scope="col"><div align="left"><img src="http://www.brocktooldetroit.com/images/brock_tool_detroit_header.jpg" width="950" height="105"></div></th>
</tr>
<tr valign="top">
<td width="421"><div align="left"><img src="http://www.brocktooldetroit.com/images/brock_tool_detroit_bottom.jpg" width="421" height="45"></div></td>
<td width="114" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"><a href="https://www.brocktooldetroit.com/catalog/" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Home','','http://www.brocktooldetroit.com/images/tools_home_over.jpg',1)"><img src="http://www.brocktooldetroit.com/images/tools_home.jpg" alt="Home" name="Home" width="114" height="45" border="0"></a></div></td>
<td width="18" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"></div></td>
<td width="114" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"><a href="http://www.brocktooldetroit.com/catalog/index.php?main_page=page&id=1&chapter=2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Comments','','http://www.brocktooldetroit.com/images/tools_comments_over.jpg',1)"><img src="http://www.brocktooldetroit.com/images/tools_comments.jpg" alt="Comments" name="Comments" width="114" height="45" border="0"></a></div></td>
<td width="18" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"></div></td>
<td width="114" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"><a href="http://www.brocktooldetroit.com/catalog/index.php?main_page=contact_us" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Contact Us','','http://www.brocktooldetroit.com/images/tools_contact_over.jpg',1)"><img src="http://www.brocktooldetroit.com/images/tools_contact_us.jpg" alt="Contact Us" name="Contact Us" width="114" height="45" border="0"></a></div></td>
<td width="18" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"></div></td>
<td width="114" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"><a href="https://www.brocktooldetroit.com/catalog/index.php?main_page=login" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Login','','http://www.brocktooldetroit.com/images/tools_login_over.jpg',1)"><img src="http://www.brocktooldetroit.com/images/tools_login.jpg" alt="Login" name="Login" width="114" height="45" border="0"></a></div></td>
<td width="19" background="http://www.brocktooldetroit.com/images/tools_nav_bg.jpg"><div align="left"></div></td>
</tr>
</table></div>



And here's the javascript file code:
// JavaScript Document
<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[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) { //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];}
}
//-->
</script>