Hello.
 
I'm experimenting with the free shopping cart and plan to purchase a copy of the Standard Shop soon. I was wondering if anyone here had any idea as to how to go about implementing rollover effects on images in the Product List page.
 
This is what is desired:
 
On the product listing page, upon hovering (rolling over mouse) on any of the image products, I would like a larger image of the same product to pop up and trail. Now I have done so much as to alter the code in the relevant section of the "block_products_list" so that it looks like this:
 
<!-- CODE
<<img class="productImg" name="image_{form_id}" src="{src}" {width} {height} border="0" vspace="10" hspace="10" alt="{alt}" onmouseover="showtrail('200',
'200', '{src}');" onmouseout="hidetrail();" /></a>
-->
 
I've applied the necessary changes and have placed the functions in the appropriate header files and all seems to work well. The one thing I am having a problem with, is changing the SRC value in the showtrail function above. The SRC dynamic value is obtained for the small image, and so long as it remains SRC, the image that pops up and trails when the mouse goes over the picture is the small image that is used in the products list to begin with. I need to be able to replace the SRC in the showtrail function to another dynamic value that will show the larger (perhaps even super size) image when the mouse is hovered onto any of the products images in the products list page.
 
As I have already said, it is working like a charm with the small image trailing on mouseover, the question is, how can i get a large / supersize image to show when mouse is rolled over.. I.E what do I REPLACE SRC with...? or is there another way to go about this?
 
Your feedback is much appreciated. I look forward to hearing from anyone with any help.
 
Cheers.

For this I think you have to modified a little block_products_list.php code to add large or super-sized image.
 
1. Add super_image into sql query if you like to use to this string
$sql .= " i.tiny_image, i.tiny_image_alt, i.small_image, i.small_image_alt, i.big_image, i.big_image_alt, i.super_image, ";
 
2. Set a new tags for template inside cycle
do { } while
like:
$t->set_var("big_image", $db->f("big_image"));
$t->set_var("super_image", $db->f("super_image"));
 
3. Update your template code to one of the value above
onmouseover="showtrail('200', '200', '{big_image}');"

Hello Monk,
 
Thanks for your reply. I was testing out various ways and editing the block_products_list.php code and eventually came across your way of doing it, which is adding sql queries to get the big and super images from the DB, which was not being done to begin with.
 
To make a long story short, the queries are working fine, and I am not getting rollover images to appear on the products list page when the mouse hovers over a certain product image.
 
Funnily, however, there is some confusion apparently. If i put the mouse over the first product image, I get no big image. The rollover block appears with no image loaded. If i rollover the mouse on the 2nd product, I get the rollover block (trail) with the big image of the first product in it... and so it goes for the rest of the products in the list where each rollover image shows the big image of the previous product and obviously enough, the first product image, havign nothing before it, shows no rollover image at all...
 
I am messing around with it still, but I would appreciate anyone with any ideas to pitch them in... Would be grateful. Thanks.

Oops there was a typo in the above (the last message I've added to this post...) It says in the second paragraph that I am NOT... what was intended to be said was.. I am NOW getting... etc...
 
That is to say that, Monk, what you recommended worked, but as stated in paragraph 3, the images that are being called up seem to be confused! Heh... Just thought I would clarify that typo.

Also, worth mentioning, I did not understand what you meant by:
2. Set a new tags for template inside cycle
do { } while...
 
What I did was simply add the .sql queries and scrolled down in the block_products_list.php just below the small_image definition / functions and pasted the set_vars... And by just doing that, as I have mentioned above already, I was able to get the {big_image} to work just fine in the templates/block_products_list.html... But again, as I explained above, the images being called are always off by one item... The 2nd item gets the rollover big_image for the 1st item, the 2nd for the 3rd, the 3rd for the fourth...
 
Damn I hate it when I get stuck... Any help would be appreciated. THANKS!

Probably I know where can be the problem, try to move set vars definitions just before small image definition like:
 
$t->set_var("big_image", $db->f("big_image"));
$t->set_var("super_image", $db->f("super_image"));
$small_image = $db->f($image_field);

im am trying it now, will let you know how it goes... However, I wonder why that could be the problem.. hmm...

WOW! It worked! Man you are amazing MONK.. :) I appreciate all your help buddy. WHEW... I thought I'd never get to it! Tell me, monk, you have a viart shopping site? And have you done anything like ROllover Images or anything nice with the templates?

Just created a profile, hate being called a Guest. Heh... Also, gave me the chance to show off my pic ;)

I just planning to build some, but have quite a good experience of building different ecommerce functions and working with template functions where you need to place set_var conditions always before parsing some block and that's all
 
It's nice to see you now as registered user, much better

HI Guys,
I was wondering if you would be willing to share your knowledge or code on how you achieved the mouseover & mouseout event, I have been trying to do something like that without much success due to lack of knowledge, I am reading and studying to catch up but time is tight.
See link:
http://domain1776749.sites.fasthosts.com/product_details.php?category_id=57&item_id=4
 
Ideally, what I would like to achieve is not use the separate images section but use the mouseover event on the tiny images, if all else fails I can use the onClick event with a pop-up window but I don't think it would be nice compared to mouseover etc.
 
I hope you don't mind me asking.
 
Thanks
Msquared