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;">
			[img=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"