Mouseover effect is not working with the template. any ideas

[turfsk8r]

I created my header in photoshop and imageready.

I added this code to the header.


<script type="text/javascript">
<!--
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) {
nonstickmediahosting_over = newImage("http://www.nonstickmedia.net/images/nonstickmediahosting-over.gif");
Tabout_over = newImage("http://www.nonstickmedia.net/images/Tabout-over.gif");
Thosting_over = newImage("http://www.nonstickmedia.net/images/Thosting-over.gif");
Tservices_over = newImage("http://www.nonstickmedia.net/images/Tservices-over.gif");
Tsupport_over = newImage("http://www.nonstickmedia.net/images/Tsupport-over.gif");
Tcontact_over = newImage("http://www.nonstickmedia.net/images/Tcontact-over.gif");
About_Us_over = newImage("http://www.nonstickmedia.net/images/About-Us-over.gif");
Hosting_over = newImage("http://www.nonstickmedia.net/images/Hosting-over.gif");
Services_over = newImage("http://www.nonstickmedia.net/images/Services-over.gif");
Support_over = newImage("http://www.nonstickmedia.net/images/Support-over.gif");
Contacts_over = newImage("http://www.nonstickmedia.net/images/Contacts-over.gif");
preloadFlag = true;
}
}

</SCRIPT>

This is the code for one of my mouseovers.


<a href="http://www.nonstickmedia.net/"
onmouseover="window.status='Nonstick Media'; changeImages('nonstickmediahosting', 'http://www.nonstickmedia.net/images/nonstickmediahosting-over.gif'); return true;"
onmouseout="window.status=''; changeImages('nonstickmediahosting', 'http://www.nonstickmedia.net/images/nonstickmediahosting.gif'); return true;"
onmousedown="changeImages('nonstickmediahosting', 'http://www.nonstickmedia.net/images/nonstickmediahosting-over.gif'); return true;"
onmouseup="changeImages('nonstickmediahosting', 'http://www.nonstickmedia.net/images/nonstickmediahosting-over.gif'); return true;">
http://www.nonstickmedia.net/images/nonstickmediahosting.gif</a>

[Matt]

As {} are the template tags, using these in the javascript will cause errors. What you need to do is put your javascript code in a seperate js file and then include it like so:


<script language="javascript" type="text/javascript" src="path/to/jsfile.js"></script>

[turfsk8r]

Thanks

[Vectoral]

Or just use {literal} and {/literal}

[MACscr]

Its a good idea that he runs that type of javascript in another file anyway so it gets cached. Will be about a K less the user will have to download on every page view.

Sine this is just rollover's though, unless it has a fancy transition affect, I would highly recommend using just CSS instead of javascript. If interested, google "css rollover images"