Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Images change on mouse over


Recommended Posts

On 10/30/2019 at 8:46 PM, Kurre said:

I need it to do it automatically for every product..

I made some changes to the file tpl_cm_i_card_products.php:

Quote

    while ($card_products = tep_db_fetch_array($card_products_query)) {
?>
      <div class="card mb-2 is-product" data-is-special="<?php echo (int)$card_products['is_special']; ?>" data-product-price="<?php echo $currencies->display_raw($card_products['final_price'], tep_get_tax_rate($card_products['products_tax_class_id'])); ?>" data-product-manufacturer="<?php echo max(0, (int)$card_products['manufacturers_id']); ?>">

<?php
    $img1 = 'images/' . $card_products['products_image'];

        // Get one more product image from DB
        $pic_query = tep_db_query("select image from products_images where products_id = '" . (int)$card_products['products_id'] . "'");
    if (tep_db_num_rows($pic_query) > 0) {
        $pic = tep_db_fetch_array($pic_query);
        $img2 = 'images/' . $pic['image'];
        $img_string = '<img src="' . $img1 . '" onmouseover="this.src=\'' . $img2 . '\'" onmouseout="this.src=\'' . $img1 . '\'" width="'. SMALL_IMAGE_WIDTH . '" height="' . SMALL_IMAGE_HEIGHT . '" alternative="' . htmlspecialchars($card_products['products_name']) . '" class="card-img-top">';
?>
    <!-- flip flop the two images -->
        <a href="<?php echo tep_href_link('product_info.php', 'products_id=' . (int)$card_products['products_id']); ?>"><?php echo $img_string; ?></a>

<?php
    } else {
?>
    <!-- display single image -->
        <a href="<?php echo tep_href_link('product_info.php', 'products_id=' . (int)$card_products['products_id']); ?>"><?php echo tep_image('images/' . $card_products['products_image'], htmlspecialchars($card_products['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, '', true, 'card-img-top'); ?></a>

<?php
    }
?>

        <div class="card-body">   

This flip-flops the two images for every product when the user mouseover and mouseout over the images. Tested on Phoenix 1.0.3.0.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...