Javascript Change Image Issues

bedardh · #1 04-20-2008, 11:37 AM

Hi - I'm wondering if someone can help me with this. It's driving me nuts! My original programmer and designer put together a great site wrapper where whenever you passed over the category names, it would show a pic above it.

You can see it in action here:
http://www.girlsnightoutdesigns.com/jewelry_collection.php

Just pass over The Jewelry Collection, Cigar Box Purses, etc ... and you will see what I'm talking about.

However, I can't get this to work within X-Cart. (This page is static and outside of my X-Cart generated pages.) I've tried many different ways to modify head.tpl and customer/home.tpl, pulling the javascript from the original page, etc., and haven't been able to get it working. I'm self taught at all of this and I'm guessing Javascript is going to be my next lesson!

I've learned so much just by searching these forums, but haven't been able to find the answer to this. I'd be happy to provide any other info needed.

If anyone has any ideas, I'd appreciate it!

Thanks so much!

inebriate · #2 04-20-2008, 05:36 PM

did you put the {litera}{/literal} tags around your javascript in your smarty template?

bedardh · #3 04-20-2008, 06:16 PM

Hi - Thanks for the reply. Yes, I had put the {literal} tags in. It still didn't help. No image change. Any other suggestions? I'm all ears!!

kube · #4 04-20-2008, 06:44 PM

What happens when you add the changeImages() function within the head? Any errors?

bedardh · #5 04-20-2008, 07:06 PM

I've tried putting that part in the <head> of customer/home.tpl. Is that what you mean? I tried that and it just doesn't do anything. No errors, but no image change either.

Or in the actual head.tpl? I tried that, too. Same thing. No error, but no image change.

kube · #6 04-20-2008, 07:37 PM

Try adding this to the HEAD...

Code:

<script type="text/javascript">
<!--
{literal}

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) {

		nav_pic_nav_jewelrycollection_over	= newImage("girlsnight/images/nav_pic-nav_jewelry_over.gif");

		nav_pic_nav_cigarboxes_over			= newImage("girlsnight/images/nav_pic-nav_cigarboxes_over.gif");

		nav_pic_nav_unwearables_over		= newImage("girlsnight/images/nav_pic-nav_unwearables_over.gif");

		nav_pic_nav_customdesigns_over		= newImage("girlsnight/images/nav_pic-nav_custom_over.gif");

		preloadFlag = true;

	}

}
{/literal}
// -->
</script>

bedardh · #7 04-20-2008, 08:00 PM

Thanks for getting back so quick. I just tried that and it didn't do anything either. (Tried putting it once in head.tpl and the <head> tag of the customer/home.tpl.) In both cases, it didn't seem to do anything. No change.

Man, this is frustrating!

I wonder why it wouldn't be doing anything at all. Maybe I am not putting the code in the right place? Would it helped if I posted the code here? Which would be helpful ... the head.tpl or the customer/home.tpl?

kube · #8 04-20-2008, 08:10 PM

It should work for your home page. The problem is that I can see that there are 2 differents sets of code running around for the same function...

This is the mouseover on your home page...

Code:

onmouseover="changeImages('nav_pic', '/girlsnight/images/nav_pic-nav_jewelry_over.gif'); return true;" onmouseout="changeImages('nav_pic', '/girlsnight/images/nav_pic.gif'); return true;"

and this is for your jewelry and about pages...

Code:

onmouseover="changeImages('nav_pic', 'img/nav_pic-nav_jewelry_over.gif'); return true;" onmouseout="changeImages('nav_pic', 'img/nav_pic.gif'); return true;"

Notice that they have different image locations (one is img/ and the other is girlsnight/images/), this should also be reflected within the script in the HEAD part as well.

Did you paste the code in between the head tags inside skin1/customer/home.tpl?

bedardh · #9 04-20-2008, 08:23 PM

Ah, that's what you get when different people work on your pages! I am still going through and cleaning up. (The images are actually in both directories, too.)

So, I put the code you gave me in the HEAD of the customer/home.tpl. I went back to the head.tpl and made sure that the actual "onmouseover" chunk of code had the right pic directory as well. Still no change.

(Wait, should all of that be in the home.tpl? Should I move that related code in the head.tpl to the body section of home.tpl? I vaguely recall trying that earlier, but didn't think that worked either.)

I appreciate all your help and any other suggestions you may have!!

kube · #10 04-20-2008, 08:33 PM

After adding the code, are you clearing xcart's own cache, then refreshing the page and viewing the source from the browser (View > Source) to see if it is there?