Mouse over product images

for osCommerce Online Merchant v2.3

Manual Installation (osC(MS2 and RC2)): IT IS STRONGLY SUGGESTED TO MAKE A BACK-UP OF THESE FILES FIRST Use Contributions at your own risk. Before beginning the manual install you need to: Upload two new files, They are (and located in): 1. catalog/js/jquery.js 2. catalog/js/main.js 3. Add new css locate in catalog/stylesheet.css /* Mouse Over Images CSS Start */ #screenshot{ position:absolute; border:-2px solid #ccc; background:#333333; padding:5px; display:none; color:#ffffff; } /* */ /* Mouse Over Images CSS End */ 4. Edit catalog/index.php and catalog/advance_search_result.php Find <link rel="stylesheet" type="text/css" href="stylesheet.css"> Add this after <!-- Image Mouse over start --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <!-- Image Mouse over end --> 4. catalog/includes/modules/new_products.php Find this: while ($new_products = tep_db_fetch_array($new_products_query)) { Add after: $image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $new_products['products_image']; Find again: <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id']))); Replace with: <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '" rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], '', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products ['products_name'] . '</a><br>' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products ['products_tax_class_id']))); 5. catalog/imcludes/modules/product_listing.php Find: case 'PRODUCT_LIST_IMAGE': if (isset($HTTP_GET_VARS['manufacturers_id'])) { $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing ['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; } else { $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;'; } break; Replace with: case 'PRODUCT_LIST_IMAGE': if (isset($HTTP_GET_VARS['manufacturers_id'])) { $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing ['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; } else { // Mouse over image Start $image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $listing['products_image']; $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '" rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], '', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;'; // Mouse over image End ////////////////////////////////////// Manual Installation (osCommerce 2.3.1 Version): Before beginning the manual install you need to: Upload two new files, They are (and located in): 1. catalog/js/jquery.js 2. catalog/js/main.js 3. Add new css locate in catalog/stylesheet.css /* Mouse Over Images CSS Start */ #screenshot{ position:absolute; border:-2px solid #ccc; background:#333333; padding:5px; display:none; color:#ffffff; } /* */ /* Mouse Over Images CSS End */ 4. Edit catalog/includes/template_top.php Find <link rel="stylesheet" type="text/css" href="stylesheet.css"> Add this after <!-- Image Mouse over start --> <script src="js/jquery.js" type="text/javascript"></script> <script src="js/main.js" type="text/javascript"></script> <!-- Image Mouse over end --> 4. catalog/includes/modules/new_products.php Find this: while ($new_products = tep_db_fetch_array($new_products_query)) { Add after: $image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $new_products['products_image']; Find again: $new_prods_content .= '<td width="33%" align="center" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $new_products['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products ['products_id']) . '">' . $new_products['products_name'] . '</a><br />' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</td>'; Replace with: $new_prods_content .= '<td width="33%" align="center" valign="top"><a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '" rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $new_products ['products_image'], $new_products['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a><br /><a href="' . tep_href_link (FILENAME_PRODUCT_INFO, 'products_id=' . $new_products['products_id']) . '">' . $new_products['products_name'] . '</a><br />' . $currencies->display_price($new_products['products_price'], tep_get_tax_rate($new_products['products_tax_class_id'])) . '</td>'; 5. catalog/imcludes/modules/product_listing.php Find: case 'PRODUCT_LIST_IMAGE': if (isset($HTTP_GET_VARS['manufacturers_id'])) { $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing ['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; } else { $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;'; } break; Replace with: case 'PRODUCT_LIST_IMAGE': if (isset($HTTP_GET_VARS['manufacturers_id'])) { $lc_text = '<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'manufacturers_id=' . $HTTP_GET_VARS['manufacturers_id'] . '&products_id=' . $listing['products_id']) . '">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing ['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>'; } else { // Mouse over image Start $image_pathe = HTTP_SERVER.DIR_WS_HTTP_CATALOG.DIR_WS_IMAGES . $listing['products_image']; $lc_text = '&nbsp;<a href="' . tep_href_link(FILENAME_PRODUCT_INFO, 'products_id=' . $listing['products_id']) . '" rel="'. $image_pathe .'" class="screenshot">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], '', SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a>&nbsp;'; // Mouse over image End ////////////////////////////////////// You are done. Thank you. More Details: http://www.arnlweb.com/mouse-over-product-images-for-oscommerce/

Files