Hover Popup Images

[Guest]

Does anyone have any code for hover popup images for multiple column product listings.

 

I have searched the forums, and contributions, and can't find the right combination. They are either for product_info, new_products, featured_product, star_product and/or need 3 images/Additional images underneath them.

 

Any help would be appreciated. At this point I don't really care if it's CSS or JAVA (although I know I should).

 

I have done a view source on a few sites and see the resolved code for onmouseover, etc. but don't know the PHP to put in the native module.

 

Thanks!

[Guest]

Does anyone have any code for hover popup images for multiple column product listings.

 

I have searched the forums, and contributions, and can't find the right combination. They are either for product_info, new_products, featured_product, star_product and/or need 3 images/Additional images underneath them.

 

Any help would be appreciated. At this point I don't really care if it's CSS or JAVA (although I know I should).

 

I have done a view source on a few sites and see the resolved code for onmouseover, etc. but don't know the PHP to put in the native module.

 

Thanks!

 

I figured this out.

Take the javascript in this contribution: http://addons.oscommerce.com/info/5332

Put it in the bottom of product_col_listing.php

 

in product_col_listing.php, under "case 'PRODUCT_LIST_IMAGE':"

 

replace:

$lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing[$x]['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing[$x]['products_image'], $listing[$x]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';

 

with:

 

$lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing[$x]['products_id']) . '" onmouseover="doTooltip(event,\'images/' .$listing[$x]['products_image'].'\')" onmouseout="hideTip()">' . tep_image(DIR_WS_IMAGES . $listing[$x]['products_image'], $listing[$x]['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> ';

 

This will show the original image you loaded for each product before it is resized.

This code is NOT for 3 images or Additional Images. The code for that is in the contribution.

 

It seems to work on IE and FIREFOX, so far. If it breaks, I'll post.

 

Of course, the downside is that if someone has JAVA turned off, this will have no effect.

 

Thanks!