Javascript Rollovers In Header

[giant_robot]

Hello,
I've been trying to change up the header as shown in this link:

http://www.wildsociety.com/banner/banner.html

The file consists of slices and javascript code. I've tried inserting the code in tpl_header.php, just don't know where within the page. I've tried creating a jscript_header.js file in my jscript folder according to this tutorial:

http://www.zen-cart.com/wiki/index.p...verride_How-To

Nothing has worked so far. I'm pretty new this whole thing and even web design. I've managed to customize my zen cart site to great extent, but changing my header has completely stumped me. Can any one of you experts lend a helping hand?

Much appreciated

John
WildSociety.com

[giant_robot]

The code for the header that I've created in Imageready is pasted within

<div id="logoWrapper">

<table id="Table_01" width="876" height="231" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="7">
<img src="../images/banner/images/banner_01.jpg" width="875" height="143" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="143" alt=""></td>
</tr>
<tr>
<td rowspan="3">
<img src="../images/banner/images/banner_02.jpg" width="12" height="88" alt=""></td>
<td rowspan="2">
<a href="http://www.wildsociety.com/wordpress"
onmouseover="changeImages('banner_03', 'images/banner_03-over.jpg'); return true;"
onmouseout="changeImages('banner_03', 'images/banner_03.jpg'); return true;"
onmousedown="changeImages('banner_03', 'images/banner_03-over.jpg'); return true;"
onmouseup="changeImages('banner_03', 'images/banner_03-over.jpg'); return true;">
<img name="banner_03" src="../images/banner/images/banner_03.jpg" width="90" height="71" border="0" alt=""></a></td>
<td rowspan="3">
<img src="../images/banner/images/banner_04.jpg" width="10" height="88" alt=""></td>
<td>
<a href="http://www.videopress.com"
onmouseover="changeImages('banner_05', 'images/banner_05-over.jpg'); return true;"
onmouseout="changeImages('banner_05', 'images/banner_05.jpg'); return true;"
onmousedown="changeImages('banner_05', 'images/banner_05-over.jpg'); return true;"
onmouseup="changeImages('banner_05', 'images/banner_05-over.jpg'); return true;">
<img name="banner_05" src="../images/banner/images/banner_05.jpg" width="129" height="67" border="0" alt=""></a></td>
<td rowspan="3">
<img src="../images/banner/images/banner_06.jpg" width="28" height="88" alt=""></td>
<td>
<a href="http://twitter.com/wildsociety"
onmouseover="changeImages('banner_07', 'images/banner_07-over.jpg'); return true;"
onmouseout="changeImages('banner_07', 'images/banner_07.jpg'); return true;"
onmousedown="changeImages('banner_07', 'images/banner_07-over.jpg'); return true;"
onmouseup="changeImages('banner_07', 'images/banner_07-over.jpg'); return true;">
<img name="banner_07" src="../images/banner/images/banner_07.jpg" width="151" height="67" border="0" alt=""></a></td>
<td rowspan="3">
<img src="../images/banner/images/banner_08.jpg" width="455" height="88" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="67" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="../images/banner/images/banner_09.jpg" width="129" height="21" alt=""></td>
<td rowspan="2">
<img src="../images/banner/images/banner_10.jpg" width="151" height="21" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="4" alt=""></td>
</tr>
<tr>
<td>
<img src="../images/banner/images/banner_11.jpg" width="90" height="17" alt=""></td>
<td>
<img src="images/spacer.gif" width="1" height="17" alt=""></td>
</tr>
</table>

<div id="logo"><?php // echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?></div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>

This is the javascript code in jscript_header.js

// JavaScript Document

function newImage(arg) {
if (document.images) {
rslt = new Image();
rslt.src = arg;
return rslt;
}
}

function changeImages() {
if (document.images && (preloadFlag == true)) {
for (var i=0; i<changeImages.arguments.length; i+=2) {
document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
}
}
}

var preloadFlag = false;
function preloadImages() {
if (document.images) {
banner_03_over = newImage("images/banner_03-over.jpg");
banner_05_over = newImage("images/banner_05-over.jpg");
banner_07_over = newImage("images/banner_07-over.jpg");
preloadFlag = true;
}
}

// -->

<!-- End Preload Script -->

Does this script need to be placed somewhere and is it correct.

<script language="javascript" src="includes/templates/wildsociety/jscript/jscript_header.js"></script>

All I'm getting is a blank header on my page.

Thanks

[giant_robot]

I've read from a thread on using image slices that a php_includes code can be inserted into the tpl_header.php file to link it directly to the .html file generated by imageready. (take breath)

Does anyone know how that's done or if that can be done? I'm still unable to get the header to show up.

I've tried to insert the table code from the .html file after <div id=logowrapper> and <div id=logo> but it didn't work. I'm using dreamweaver and in the design view, it shows it's there and sometimes when I refresh the browser window, it briefly flashes the slice outlines of the header.

No idea what to do and I'm very unfamiliar with php.

Can someone help with this?

Thanks

[giant_robot]

Sorry for filling up this thread with my own posts, but I'm stuck. Is what I'm asking for beyond the scope of zen cart customization?

John

[giant_robot]

This whole javascript and imageready slices problem was a serious headache. I've decided to simply redo the header in flash and follow the advice in this thread:

http://www.zen-cart.com/forum/showth...t=flash+header

Worked perfectly!