VirtueMart Forum

VirtueMart 1.1.x [ Old version - no longer supported ] => Products, Prices, Tax and Categories VM 1.1 => Topic started by: StrakOntwerp on May 24, 2011, 16:53:57 pm

Title: Image change on mouseover
Post by: StrakOntwerp 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!
Title: Re: Image change on mouseover
Post by: PRO 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 ?>'">
Title: Re: Image change on mouseover
Post by: StrakOntwerp 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?
Title: Re: Image change on mouseover
Post by: PRO 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

Title: Re: Image change on mouseover
Post by: StrakOntwerp on May 25, 2011, 23:12:11 pm
THX ALOT! I Think this will work.
Title: Re: Image change on mouseover
Post by: StrakOntwerp 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?
 
Title: Re: Image change on mouseover
Post by: PRO 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
Title: Re: Image change on mouseover
Post by: StrakOntwerp on August 01, 2011, 12:28:02 pm
Now I got it working, thanks to you!

http://www.shifus.nl/index.php?page=shop.browse&category_id=1&option=com_virtuemart&Itemid=61
Title: Re: Image change on mouseover
Post by: ray_pal 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
Title: Re: Image change on mouseover
Post by: hackingnatt 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
Title: Re: Image change on mouseover
Post by: PRO on September 07, 2011, 14:24:58 pm
the browse template you are using

http://forum.virtuemart.net/index.php?topic=52411.msg169936#msg169936

Title: Re: Image change on mouseover
Post by: hackingnatt 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 ?>'">
Title: Re: Image change on mouseover
Post by: hackingnatt on September 21, 2011, 11:16:01 am
Hi everyone!

pls reply me. I need it urgent

thx
Title: Re: Image change on mouseover
Post by: hackingnatt 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
Title: Re: Image change on mouseover
Post by: PRO 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.
Title: Re: Image change on mouseover
Post by: hackingnatt on October 25, 2011, 12:57:17 pm
I hav some error.

it didn;t work in Mozilla 4 and above.

but i didn't test in Mozilla 3.

pls suggest me.

other issue - how can i use Additional image's thumb image.

thx
Title: Re: Image change on mouseover
Post by: mbit on November 04, 2011, 22:44:24 pm
the additional images doesnt load :/
Title: Re: Image change on mouseover
Post by: mbit on November 05, 2011, 02:03:40 am
<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
i am trying to make this work for the additional images - hover on additional thumbs show up on the main image palce. something like what amazon uses. but the
Code: [Select]
<?php echo $this->vmlistAdditionalImages$product_id$images ?> keeps me away from accomplish it.

i give an id to the main image
Code: [Select]

<img src= "<?php echo $mosConfig_live_site;?>/components/com_virtuemart/shop_image/product/<?php echo $product_full_image?>" class="fullvmimage" id="mainImage" >

and i am trying to connect this with the additional images
Code: [Select]
<a href="#" onmouseover="document.getElementById('mainImage').src='here must be placed the full additional image path'"onmouseout="document.getElementById('mainImage').src='<?php echo $mosConfig_live_site;?>/components/com_virtuemart/shop_image/product/<?php echo $product_full_image?>'">AAA<?php echo $this->vmlistAdditionalImages$product_id$images ?>
</a>
any ideas how to handle the vmlistAdditionalImages ?? i am stuck :/