Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

OnMouseOver Product image


Guest

Recommended Posts

I found a contrib that allows me to use a different image for onclick of product image ie.

 

<?php $prefix="large/"; echo tep_image(DIR_WS_IMAGES . $prefix . $products['products_image'], $products['products_name']); ?>

 

located in the popup_image.php

 

Is there away to also include a onmouseover two a new pic?

Link to comment
Share on other sites

I found a contrib that allows me to use a different image for onclick of product image ie.

 

<?php $prefix="large/"; echo tep_image(DIR_WS_IMAGES . $prefix . $products['products_image'], $products['products_name']); ?>

 

located in the popup_image.php

 

Is there away to also include a onmouseover two a new pic?

 

 

I guess what I'm looking for is in the product_info.php Is that where i would put a onmouseover to show new pic *gif?

Link to comment
Share on other sites

I found a contrib that allows me to use a different image for onclick of product image ie.

 

<?php $prefix="large/"; echo tep_image(DIR_WS_IMAGES . $prefix . $products['products_image'], $products['products_name']); ?>

 

located in the popup_image.php

 

Is there away to also include a onmouseover two a new pic?

 

 

Man, I have been looking all day, still can not find any info. Was wanting to have a onmouseover effect on all product images. Is this possible? any help would be great. Will keep searching.

Link to comment
Share on other sites

I found a contrib that allows me to use a different image for onclick of product image ie.

 

<?php $prefix="large/"; echo tep_image(DIR_WS_IMAGES . $prefix . $products['products_image'], $products['products_name']); ?>

 

located in the popup_image.php

 

Is there away to also include a onmouseover two a new pic?

 

Has anyone managed to do a onmouseover for all product_images?

Link to comment
Share on other sites

it shouldn't be too hard...but what do you want to do on mouseover??

 

Bobby

 

I have a shop selling portabile fire pits. I am wanting all product images to flame, show gif of flaming pit. then on mouse out go back to porduct image.

Link to comment
Share on other sites

I found a contrib that allows me to use a different image for onclick of product image ie.

 

<?php $prefix="large/"; echo tep_image(DIR_WS_IMAGES . $prefix . $products['products_image'], $products['products_name']); ?>

 

located in the popup_image.php

 

Is there away to also include a onmouseover two a new pic?

 

I was thinking i could just use a gif for the product image and in the gif tie in the on mouse over effect.

Link to comment
Share on other sites

  • 4 weeks later...

what would i add to this code to make it so my click to enlarge images actually show full size - i have been having the problem that when they enlarge the window opens with the top 1/20 of the image showing.

 

thanks for any advise - this works for having my images seperated tho :) thumb/large

Link to comment
Share on other sites

  • 4 weeks later...

What file is that code snippet located in?

 

I'm looking to be able to make my own thumbnails (in Photoshop) for the small images, and have a separate image for the "click to enlarge" image. Basically, I'm trying to remove the pixalization of the thumbnail as it is shrunk down to fit into the table. Will this code solve my problem, and if so, what do I change in it and where does it go?

 

Thanks in advance :thumbsup:

Link to comment
Share on other sites

I'm looking to be able to make my own thumbnails (in Photoshop) for the small images, and have a separate image for the "click to enlarge" image.  Basically, I'm trying to remove the pixalization of the thumbnail 

To use two different images, one in IMAGES directory, and a larger in IMAGES/BIG directory, change the <body onload resize> function in popup_image.php in the main store directory. This also checks if the BIG image exists, and if not, uses the smaller one. It also allows the image to be closed by clicking anywhere on the image.

 

change this:

------------

 

<body onload="resize();">

<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>

</body>

 

to this:

-------

 

 

<body onload="resize();">

 

<a href="java script:;" onclick="java script:top.window.close();">

 

 

<?php

$bigdir = DIR_WS_IMAGES . "big/";

$bigexists = file_exists($bigdir . $products['products_image']);

if ($bigexists)

{

echo tep_image($bigdir . $products['products_image'], $products['products_name']);

}

else

{

echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']);

};

 

?>

</body>

Link to comment
Share on other sites

Thanks COOLumbia! It worked like a charm! No more distortion! The only issue (it's pretty minor...) that I'm having is that in the pop-up window for the enlarged view, the window doesn't fit the whole image now, and it 'chops' off the very bottom of it...any ideas?

 

Thanks again! :-)

Link to comment
Share on other sites

DO you have to uplaod these two sizes of images seperatly or do you submit it through the product insertions page.

 

 

 

 

To use two different images, one in IMAGES directory, and a larger in IMAGES/BIG directory, change the <body onload resize> function in popup_image.php in the main store directory.  This also checks if the BIG image exists, and if not, uses the smaller one.  It also allows the image to be closed by clicking anywhere on the image.

 

change this:

------------

 

<body onload="resize();">

<?php echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); ?>

</body>

 

to this:

-------

<body onload="resize();">

 

<a href="java script:;" onclick="java script:top.window.close();">

<?php

      $bigdir = DIR_WS_IMAGES . "big/";

      $bigexists = file_exists($bigdir . $products['products_image']);

if ($bigexists)

{

  echo tep_image($bigdir . $products['products_image'], $products['products_name']);

}

else     

{

  echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']);

};

 

?>

</body>

Link to comment
Share on other sites

DO you have to uplaod these two sizes of images seperatly or do you submit it through the product insertions page.

I just use the Admin File Upload feature, or you can use an FTP program or your cpanel control panel.

Link to comment
Share on other sites

the window doesn't fit the whole image now, and it 'chops' off the very bottom of it...any ideas?

You're probably using FireFox. I had the same problem (not on I.E. though). I solved it by putting this in to make the FireFox window larger:

 

To change the size of popup window for non-Microsoft browsers (Firefox, netscape):

 

Change popup_image.php in the main directory by inserting this script after the <title> and <base> statements and before the </head> statement:

 

 

<title><?php echo $products['products_name']; ?></title>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

 

<script language="javascript"><!--

var i=0;

function resize() {

if (navigator.appName == 'Netscape') i=20;

if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60+i);

self.focus();

}

//--></script>

 

</head>

Link to comment
Share on other sites

You're probably using FireFox.  I had the same problem (not on I.E. though).  I solved it by putting this in to make the FireFox window larger:

 

To change the size of popup window for non-Microsoft browsers (Firefox, netscape):

 

Change popup_image.php in the main directory by inserting this script after the <title> and <base> statements and before the </head> statement:

<title><?php echo $products['products_name']; ?></title>

<base href="<?php echo (($request_type == 'SSL') ? HTTPS_SERVER : HTTP_SERVER) . DIR_WS_CATALOG; ?>">

 

<script language="javascript"><!--

var i=0;

function resize() {

  if (navigator.appName == 'Netscape') i=20;

  if (document.images[0]) window.resizeTo(document.images[0].width +30, document.images[0].height+60+i);

  self.focus();

}

//--></script>

 

</head>

 

 

Actually, it occurs in ie, Firefox and Safari for Mac as well...even after I added that script. :-"

 

I wonder if my client will even care...I hate being a perfectionist!! :rolleyes:

Link to comment
Share on other sites

  • 2 weeks later...

Well Hello everyone ive been reading and finding info on this forum for a week or so and think its great .

thanks coolumbia for the heads up in the code change

but :(always that evil but)

in the code:

<a href="javascript:;" onclick="javascript:top.window.close();">
<?php
     $bigdir = DIR_WS_IMAGES . "big/";
     $bigexists = file_exists($bigdir . $products['products_image']);
if ($bigexists)
{
 echo tep_image($bigdir . $products['products_image'], $products['products_name']);
}
else      
{
 echo tep_image(DIR_WS_IMAGES . $products['products_image'], $products['products_name']); 
};

?>

where the code is defining $bigdir

$bigdir = DIR_WS_IMAGES . "big/";

instead of my images being in catalog/images they are each in their own subcategory folder ex catalog/images/windchimes and like-wise i set up my big folder to be in catalog/images/windchimes/big

ok so here is the grand question:

how do i tell it to look to see what subcategory it is in

my site works fine with the images being in their own subcategories and such

but i have looked over the code and very new to php and am not sure

how to make it look for the subcategory name

$bigdir = DIR_WS_IMAGES ."this is where the subcategory should be". "big/";

i have searched for an answer to how i would reference this sub category or folder

but havent found an answer

i would figure this is going to be a variable like DIR_WS_IMAGES that needs to change according to the picture it is showing.

thanks for any help

Link to comment
Share on other sites

Archived

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

×
×
  • Create New...