Author Topic: Image change on mouseover  (Read 12675 times)

StrakOntwerp

  • Beginner
  • *
  • Posts: 6
Image change on mouseover
« on: May 24, 2011, 16:53:57 pm »
I have a small problem with my webshop. I'd like that the product images change on mouseover. (like on this website: http://www.davidandthomas.nl/shop/index.php) I have tried everything but I cant get it working. Any help would be great!

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10337
  • VirtueMart Version: 3+
Re: Image change on mouseover
« Reply #1 on: May 24, 2011, 22:04:34 pm »
You can swap with the full image. BUT the full image needs to be the same size.

<img src="<?php echo $product_thumb_image ?>"
onmouseover="this.src='<?php echo $product_full_image ?>'"
onmouseout="this.src='<?php echo $product_thumb_image ?>'">
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

StrakOntwerp

  • Beginner
  • *
  • Posts: 6
Re: Image change on mouseover
« Reply #2 on: May 25, 2011, 17:32:19 pm »
Thank you BanquetTablesPro! At least I have on option now. Too bad it has to be the full image though... There really isnt another option / extension?

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10337
  • VirtueMart Version: 3+
Re: Image change on mouseover
« Reply #3 on: May 25, 2011, 17:46:23 pm »
You Could use image names like "productsku.jpg"

<img src="<?php echo $product_thumb_image ?>"
onmouseover="this.src='components/com_virtuemart/shop_image/product/<?php echo $product_sku ?>.jpg'"
onmouseout="this.src='<?php echo $product_thumb_image ?>'">

THEN, upload the files as additional images. (additional images keep the same file name when they are uploaded as long as they are unique)

OR, just FTP the files over to the product folder.

You can also use <? php echo $product_id ?> and use productid.jpg

J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

StrakOntwerp

  • Beginner
  • *
  • Posts: 6
Re: Image change on mouseover
« Reply #4 on: May 25, 2011, 23:12:11 pm »
THX ALOT! I Think this will work.

StrakOntwerp

  • Beginner
  • *
  • Posts: 6
Re: Image change on mouseover
« Reply #5 on: August 01, 2011, 00:30:29 am »
I still can't get it to work.

This is what the php file looks like at the moment:

<div class="browseProductContainer">

   <div class="browseProductContent">

        <h3 class="browseProductTitle"><a title="<?php echo $product_name ?>" href="<?php echo $product_flypage ?>">
        <?php echo $product_name ?></a>
        </h3>       
   
   <div class="browseProductImageContainer">
       
<a href="<?php echo $product_flypage ?>">
             <a class="readon" href="<?php echo $product_flypage ?>" title="<?php echo $product_name ?>">
              <img width="185" height="245" border="0" title="<?php echo $product_name ?>" alt="<?php echo $product_name ?>" class="browseProductImage" src="<?php echo $product_thumb_image ?>"
onmouseover="this.src='<?php echo $product_full_image ?>'"
onmouseout="this.src='<?php echo $product_thumb_image ?>'"></a>
       
    </div>
   
        <div class="browseProductDescription">
        <div style="margin: 15px 0 5px;"><?php echo $product_s_desc ?>&nbsp;</div>
      <p></p>
        </div>   
        <div class="browsePriceContainer">
        <?php echo $product_price ?>
        </div>       
       
    </div>
   
</div>
 

For some reason I can't see my thumbail now. The mouseover works though. Could you please tell me how to change this file to get it to work?
 

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10337
  • VirtueMart Version: 3+
Re: Image change on mouseover
« Reply #6 on: August 01, 2011, 02:36:37 am »
Components/com_virtuemart/shop_image/products/<?php echo $product_thumb_image? >


http://virtuemart.net/documentation/Developer_Manual/Modifying_the_Layout.html#Templates
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

StrakOntwerp

  • Beginner
  • *
  • Posts: 6
Re: Image change on mouseover
« Reply #7 on: August 01, 2011, 12:28:02 pm »

ray_pal

  • Beginner
  • *
  • Posts: 1
Re: Image change on mouseover
« Reply #8 on: September 02, 2011, 12:54:02 pm »
can you please help me with the final code you used to implement the mouseover function.
thank you

hackingnatt

  • Beginner
  • *
  • Posts: 9
Re: Image change on mouseover
« Reply #9 on: September 07, 2011, 09:03:01 am »
where do i need to add this code? pls suggest the PHP file name and path to edit.
pls give us also the full code.
thx

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10337
  • VirtueMart Version: 3+
Re: Image change on mouseover
« Reply #10 on: September 07, 2011, 14:24:58 pm »
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)

hackingnatt

  • Beginner
  • *
  • Posts: 9
Re: Image change on mouseover
« Reply #11 on: September 19, 2011, 06:43:09 am »
Hi sorry! i hav to ask again.

i used browse_1 template. i found only this code

Code: [Select]
<div class="browseProductImageContainer">
        <script type="text/javascript">//<![CDATA[
        document.write('<a href="javascript:void window.open(\'<?php echo $product_full_image ?>\', \'win2\', \'status=no,toolbar=no,scrollbars=yes,titlebar=no,menubar=no,resizable=yes,width=<?php echo $full_image_width ?>,height=<?php echo $full_image_height ?>,directories=no,location=no\');">');
        document.write( '<?php echo ps_product::image_tagurldecode($product_thumb_image), 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?></a>' );
        //]]>
        </script>
        <noscript>
            <a href="<?php echo $product_full_image ?>" target="_blank" title="<?php echo $product_name ?>">
            <?php echo ps_product::image_tagurldecode($product_thumb_image), 'class="browseProductImage" border="0" title="'.$product_name.'" alt="'.$product_name .'"' ?>
            </a>
        </noscript>
        </div>
       
where can i put below codes to change mouseover

Code: [Select]
<img src="<?php echo $product_thumb_image ?>"
onmouseover="this.src='<?php echo $product_full_image ?>'"
onmouseout="this.src='<?php echo $product_thumb_image ?>'">

hackingnatt

  • Beginner
  • *
  • Posts: 9
Re: Image change on mouseover
« Reply #12 on: September 21, 2011, 11:16:01 am »
Hi everyone!

pls reply me. I need it urgent

thx

hackingnatt

  • Beginner
  • *
  • Posts: 9
Re: Image change on mouseover
« Reply #13 on: September 23, 2011, 10:03:39 am »
I known where i should edit the file.

i put this code
Code: [Select]
<img src="<?php echo $product_thumb_image ?>"
onmouseover="this.src='<?php echo $product_full_image ?>'"
onmouseout="this.src='<?php echo $product_thumb_image ?>'">

but not shown the picture. i checked with firebug, i found the photo link is not full link.

how can i do to get full link i used 'urldecode' but it's not OK.

Code: [Select]
<img src="<?php echo urldecode($product_thumb_image?>"
onmouseover="this.src='<?php echo $product_full_image ?>'"
onmouseout="this.src='<?php echo urldecode($product_thumb_image?>'">

pls suggest.

thx

PRO

  • Global Moderator
  • Super Hero
  • *
  • Posts: 10337
  • VirtueMart Version: 3+
Re: Image change on mouseover
« Reply #14 on: September 23, 2011, 14:31:09 pm »
The full images are in

components/com_virtuemart/shop_image/

The resized are in

components/com_virtuemart/shop_image/resized/

So, just add the code to the img src. Whatever is missing.
J3.9+ VM 3.4.2
Slowest Page Speed Score (88) (Category)
Fastest Page Speed Score (94-96) (productdetails)