Jump to content
Sign in to follow this  
slattman

Pop Up Mouseover Images

Recommended Posts

/*

Pop Up Mouseover Images v1.0

Created by Brad Slattman 2007

http://phaseonemedia.com

*/

 

Hello there...

This mod is capable of allowing you to add a mouesover pop up image for all of your stores images.

I have simply used a script for the popup description...

 

Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)

Copyright 2002 by Sharon Paine

Visit http://www.dynamicdrive.com for this script

 

and made some little modifications to allow you to popup images on your store

 

here is a link to the contribution- http://www.oscommerce.com/community/contri...ch,pop+up+image

 

If you need any help, feel free to ask me :D

Share this post


Link to post
Share on other sites

I am very interested in using this contrib, but...

 

I have image magic installed and I am not exactly sure which code to replace on the html_output since its been modified by image magic.

 

I also have a question about the product info page. I have the morepics contrib, will it work with all the pics on my page?

 

Thanks in advance!

Share this post


Link to post
Share on other sites

I use mre pic and image magick also

Ithink we guys that use imagemagic , we got trouble with javascript function taht work on image url rather than tep_image that image magic have modified

Ididnt test the popup mouse over function on theis contribution but i really thinks the way it has been programmed give idea on how to put onmouseover javascript function inside the tep_image instead of in the hmtl code.

I m gonna test the contribtuion right now. :thumbsup:

 

By the way slattman, do you think you could give a hand on aother code i try to make work, it s simple and work for the moment but then witouht using tep image so i cannot enjoy the work done by image magick:

 

I ve got my big picutre and 6 other thumbnails below it, when i mouseover the thumbnails ,the big picutre become the picture of the thumbnails in big size.

 

If you think you can see , the code is like 5 lignes i post it to you :'(


MS2

Share this post


Link to post
Share on other sites

Hi,

 

great staff, but just a little problem. Is not working properly in the Firefox.

 

Try this link in the IE and in the Firefox

 

 

http://www.airoka.com/index_catalog.php?cPath=37

 

i think that problem is somewhere here:

 

<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>

 

and one more thing:

 

it is working in the IE but on one page keeps giving me a javascript eror and when i look at the code it shows this:

 

Array226 not defined

 

and when i look at that line in View source code it looks like this (marked in red):

 

messages[226] = new Array('images/products/C-1.jpg',' ',"#FFFFFF");

messages[227] = new Array('images/products/C-2.jpg',' ',"#FFFFFF");

messages[228] = new Array('images/products/C-3.jpg',' ',"#FFFFFF");

messages[229] = new Array('images/products/C-5.jpg',' ',"#FFFFFF");

messages[230] = new Array('images/products/C-6.jpg',' ',"#FFFFFF");

messages[231] = new Array('images/products/C-7.jpg',' ',"#FFFFFF");

messages[232] = new Array('images/products/C-8.jpg',' ',"#FFFFFF");

messages[233] = new Array('images/products/C-9.jpg',' ',"#FFFFFF");

messages[234] = new Array('images/products/C-10.jpg',' ',"#FFFFFF");

messages[235] = new Array('images/products/C-11.jpg',' ',"#FFFFFF");

messages[236] = new Array('images/products/C-12.jpg',' ',"#FFFFFF");

messages[237] = new Array('images/products/C-13.jpg',' ',"#FFFFFF");

messages[238] = new Array('images/products/C-14.jpg',' ',"#FFFFFF");

messages[239] = new Array('images/products/C-15.jpg',' ',"#FFFFFF");

messages[240] = new Array('images/products/C-16.jpg',' ',"#FFFFFF");

messages[241] = new Array('images/products/C-17.jpg',' ',"#FFFFFF");

messages[242] = new Array('images/products/C-18.jpg',' ',"#FFFFFF");

messages[243] = new Array('images/products/C-19.jpg',' ',"#FFFFFF");

messages[244] = new Array('images/products/C-20.jpg',' ',"#FFFFFF");

messages[245] = new Array('images/products/C-21.jpg',' ',"#FFFFFF");

messages[246] = new Array('images/products/C-22.jpg',' ',"#FFFFFF");

messages[247] = new Array('images/products/C-23.jpg',' ',"#FFFFFF");

messages[248] = new Array('images/products/C-24.jpg',' ',"#FFFFFF");

if (document.images) {

var theImgs = new Array();

theImgs[Array226] = new Image();

theImgs[Array226].src = messages[Array226][0];

theImgs[227] = new Image();

theImgs[227].src = messages[227][0];

 

and that code comes from here that to me looks ok:

<?

if ($_REQUEST['products_id']) {

$image=mysql_fetch_object(tep_db_query("select * from products where products_id='".$_REQUEST['products_id']."'"));

?>

messages[<?=$_REQUEST['products_id'];?>] = new Array('<?=DIR_WS_IMAGES . $image->products_image;?>',' ','#FFFFFF');

if (document.images) {

var theImgs = new Array();

theImgs[<?=$_REQUEST['products_id'];?>] = new Image();

theImgs[<?=$_REQUEST['products_id'];?>].src = messages[<?=$_REQUEST['products_id'];?>][0];

}

<?

}

elseif ($_REQUEST['cPath']) {

$cPath = $_REQUEST['cPath'];

if (ereg("_", $cPath)) {

$cPath = explode("_", $cPath);

$cPath = $cPath[count($cPath)-1];

}

$products=tep_db_query("select * from products_to_categories where categories_id='$cPath'");

while ($product=mysql_fetch_object($products)) {

$image=mysql_fetch_object(tep_db_query("select * from products where products_id='$product->products_id'"));

?>

messages[<?=$product->products_id;?>] = new Array('<?=DIR_WS_IMAGES . $image->products_image;?>',' ',"#FFFFFF");

<?

$ids.=$product->products_id."|";

}

$ids=substr($ids, 0, strlen($ids)-1);

?>

if (document.images) {

var theImgs = new Array();

<?

$ids=explode("|", $ids);

foreach ($ids as $l => $id) {

?>

theImgs[<?=$id;?>] = new Image();

theImgs[<?=$id;?>].src = messages[<?=$id;?>][0];

<?

}

?>

}

<?

}

 

?>

 

any idea?

 

Thanks :thumbsup:

Share this post


Link to post
Share on other sites

i'm trying to setup this mod on a base osc install w/ base template.

 

I've got everything in order except the very last step

 

find this

tep_image( DIR_WS_IMAGES . $new_image, addslashes($product_info['products_name']), $image_width, $image_height, 'hspace="5" vspace="5"')

 

I cannot find that piece of code in product_info.php

 

also there is a fix for category images

 

I'm supposed to be looking for

 

$products=tep_db_query("select * from products_to_categories where categories_id='$cPath'");
while ($product=mysql_fetch_object($products)) {
	$image=mysql_fetch_object(tep_db_query("select * from products where products_id='$product->products_id'"));
	?>
		messages[<?=$product->products_id;?>] = new Array('<?=DIR_WS_IMAGES . $image->products_image;?>',' ',"#FFFFFF");
	<?
	$ids.=$product->products_id."|";
}
$ids=substr($ids, 0, strlen($ids)-1);
?>
	if (document.images) {
		var theImgs = new Array();
		<?
			$ids=explode("|", $ids);
			foreach ($ids as $l => $id) {
				?>
					  theImgs[<?=$id;?>] = new Image();
					theImgs[<?=$id;?>].src = messages[<?=$id;?>][0];
				<?
			}
		?>
	}
<?
}

 

and I do not find it anywhere in product_info

 

thanks

Share this post


Link to post
Share on other sites

any news about this contribution? the instructions for install it are so bad....

Edited by Aperol

Share this post


Link to post
Share on other sites

The problem with javascript is that more and more people are disabling it in their browser (including me) due to the potential security risks if you accidently navigate to a malicious site.

 

You can achieve hover-up images with simple CSS code

 

You can see the result here:

 

http://www.apnea.co.uk/product_info.php?cP...products_id=825

 

Just hover over the image and you'll see the full-size image miraculously appear


* * * * * * * * * * * * * * * * * * * * *

Porpoises are most happy when wet!

\ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _

Share this post


Link to post
Share on other sites
The problem with javascript is that more and more people are disabling it in their browser (including me) due to the potential security risks if you accidently navigate to a malicious site.

 

You can achieve hover-up images with simple CSS code

 

You can see the result here:

 

http://www.apnea.co.uk/product_info.php?cP...products_id=825

 

Just hover over the image and you'll see the full-size image miraculously appear

 

Hi,

 

Where can we find these codes?

Share this post


Link to post
Share on other sites

This is exactly what I am looking for. I've tried to install it - looks quite simple, but I'm not sure which file this part of the directions refers to:

 

2) add this before your </head> tag

<script language="javascript" src="popupmod.js"></script>

 

3) add this before your </body> tag

<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>

 

Do I add this to catalog/index.php or somewhere else?

 

Thanks in advance,

K. Schlegel

 

/*

Pop Up Mouseover Images v1.0

Created by Brad Slattman 2007

http://phaseonemedia.com

*/

 

Hello there...

This mod is capable of allowing you to add a mouesover pop up image for all of your stores images.

I have simply used a script for the popup description...

 

Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)

Copyright 2002 by Sharon Paine

Visit http://www.dynamicdrive.com for this script

 

and made some little modifications to allow you to popup images on your store

 

here is a link to the contribution- http://www.oscommerce.com/community/contri...ch,pop+up+image

 

If you need any help, feel free to ask me :D

Share this post


Link to post
Share on other sites

Yes I agree, it looks as though they would be alittle more specific as to where we need to place the code!!!

Share this post


Link to post
Share on other sites
I'm using STS, how can i hack this plugin?

 

I am using STS too, couldn't get this one to work but found a much simpler solution. It also works with products listing columns contrib.

 

This goes before the </head> tag of your index.php.html or whichever template you are using for your index page in STS (if not using STS just put it in the regular index.php file):

<script language="javascript" src="includes/popup.js"></script>
<script language="javascript" src="includes/utility.js"></script>

 

Here is popup.js:

// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
// ********************************
// application-specific functions *
// ********************************

// store variables to control where the popup will appear relative to the cursor position
// positive numbers are below and to the right of the cursor, negative numbers are above and to the left
var xOffset = 30;
var yOffset = -30;

function showPopup (targetObjectId, eventObj) {
if(eventObj) {
// hide any currently-visible popups
hideCurrentPopup();
// stop event from bubbling up any farther
eventObj.cancelBubble = true;
// move popup div to current cursor position 
// (add scrollTop to account for scrolling for IE)
var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0);
var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0);
moveObject(targetObjectId, newXCoordinate, newYCoordinate);
// and make it visible
if( changeObjectVisibility(targetObjectId, 'visible') ) {
	// if we successfully showed the popup
	// store its Id on a globally-accessible object
	window.currentlyVisiblePopup = targetObjectId;
	return true;
} else {
	// we couldn't show the popup, boo hoo!
	return false;
}
} else {
// there was no event object, so we won't be able to position anything, so give up
return false;
}
} // showPopup

function hideCurrentPopup() {
// note: we've stored the currently-visible popup on the global object window.currentlyVisiblePopup
if(window.currentlyVisiblePopup) {
changeObjectVisibility(window.currentlyVisiblePopup, 'hidden');
window.currentlyVisiblePopup = false;
}
} // hideCurrentPopup



// ***********************
// hacks and workarounds *
// ***********************

// initialize hacks whenever the page loads
window.onload = initializeHacks;

// setup an event handler to hide popups for generic clicks on the document
document.onclick = hideCurrentPopup;

function initializeHacks() {
// this ugly little hack resizes a blank div to make sure you can click
// anywhere in the window for Mac MSIE 5
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
window.onresize = explorerMacResizeFix;
}
resizeBlankDiv();
// this next function creates a placeholder object for older browsers
createFakeEventObj();
}

function createFakeEventObj() {
// create a fake event object for older browsers to avoid errors in function call
// when we need to pass the event object to functions
if (!window.event) {
window.event = false;
}
} // createFakeEventObj

function resizeBlankDiv() {
// resize blank placeholder div so IE 5 on mac will get all clicks in window
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
getStyleObject('blankDiv').width = document.body.clientWidth - 20;
getStyleObject('blankDiv').height = document.body.clientHeight - 20;
}
}

function explorerMacResizeFix () {
location.reload(false);
}

 

Here is utility.js:

// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
//
// ************************
// layer utility routines *
// ************************

function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
// we couldn't find the object, so we can't change its visibility
return false;
}
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.left = newXCoordinate;
styleObject.top = newYCoordinate;
return true;
} else {
// we couldn't find the object, so we can't very well move it
return false;
}
} // moveObject

 

Find this code in /includes/modules/product_listing.php:

else {
		  $lc_text = ' <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> ';
		}

Replace with:

else {
			 $lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '"  class=popupLink onmouseover="return !showPopup(\'' . $listing['products_id'] . '\', event);" onmouseout="hideCurrentPopup()">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> <DIV onclick=\'event.cancelBubble = true;\' class=popup id=' . $listing['products_id'] . '><table width="50%" border="0" cellspacing="0" cellpadding="0"><tr><td>' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name']) . '</td></tr></table></DIV>';
		}

Note: if your original product_listing.php code snippet uses this syntax: $listing[$x]['products_id'] then you'll need to make sure the changed code reflects this structure, just put [$x] in front of every $listing call in that snippet.

 

Last but not least, the CSS to go in your stylesheet.css:

.popup
{
visibility:hidden;
position: absolute;
left:-100px;
}


Installed Modules:

Dynamenu, InfoBox Admin, Master Products v.1.2, Header Tags Controller, Multiple Products Manager, Quick Edit in Admin, Secure Admin, Ultimate SEO URL's, EZ Secure Order, Easy Populate v.2.76d MS2, AuthorizeNet_AIM, ChangeFinal Breadcrumb Title, FedEx Labels, Fedex Direct 2.06, How Did you Hear 1.5, Login a la Amazon, UPS XML 1.2.4, USPS Labels, USPS Methods API MS2

Share this post


Link to post
Share on other sites

Hi,

 

This module was almost exactly what I was looking for, with one or two minor mods. Thanks!

 

However, I have a small problem with it.

In the popupmod.js get_messages() method there is a call to xmlHttp.open("GET",url,true); On some browsers I keep getting a permission denied problem and the popup does not work.

 

I changed the URL to contain the absolute URL to the popupmod.php script to minimise any browser cross domain issues.

 

Does anyone know how to get around this issue???

 

Thanks

 

Glen

Share this post


Link to post
Share on other sites

Just a note about popup hack from Apple posted above. If you are using category column listing addon, you need to modify product_listing_col.php instead of original product_listing.php. Also you need to add [$x] after every instance of $listing in modified portion of the code.

 

One problem with this Apple popup is that it always positioning popup to the right and bottom of the thumbnail image and it increases the size of the page and some pop ups extend beyond the visible browser window, so you need to scroll to see them. I'd like them to be always positioned within the browser window. So if thumbnail is on the right, popup is to the left. If on the bottom - then popup is up.

Share this post


Link to post
Share on other sites
The problem with javascript is that more and more people are disabling it in their browser (including me) due to the potential security risks if you accidently navigate to a malicious site.

 

You can achieve hover-up images with simple CSS code

 

You can see the result here:

 

http://www.apnea.co.uk/product_info.php?cP...products_id=825

 

Just hover over the image and you'll see the full-size image miraculously appear

Thanks for sharing.


The Coopco Underwear Shop

 

If you live to be 100 years of age, that means you have lived for 36,525 days. Don't waste another, there aren't many left.

Share this post


Link to post
Share on other sites
The problem with javascript is that more and more people are disabling it in their browser (including me) due to the potential security risks if you accidently navigate to a malicious site.

 

You can achieve hover-up images with simple CSS code

 

You can see the result here:http://www.apnea.co.uk/product_info.php?cP...products_id=825

 

Just hover over the image and you'll see the full-size image miraculously appear

 

What Porpoise1954 wrote makes a bunch of sense but, for the many aspiring shop admins, it would help to get this CSS code interpreted into some easy steps. I'm an intermediate noob and, using Firefox's WebTools, was able to view the code of the stylesheet.css used in the nifty site he referred to. Now, what's next?

 

The relevant code bits seem to be:

/* Code for Product Info Popup images */

.thumbnail{

position: relative;

z-index: 0;

}

 

.thumbnail:hover{

background-color: transparent;

z-index: 50;

}

 

.thumbnail span{ /*CSS for enlarged image*/

position: absolute;

background-color: #ffeeaa;

padding: 10px;

border: 1px dashed red;

visibility: hidden;

color: #034B82;

font-size: 16px;

font-style: oblique;

font-weight: bold;

text-decoration: none;

margin-top: -150px;

margin-left: -500px;;

margin-right: 10px;

margin-bottom: 10px;

width: 450px;

text-align: center;

}

 

.thumbnail span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 5px;

/*width: 365px;

height: 365px;*/

}

 

.thumbnail:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

margin-right: 10px;

margin-bottom: 10px;

/*position where enlarged image should offset horizontally */

 

}

 

/* Code for Product Listing Popup images */

.thumbnail2{

position: relative;

z-index: 0;

}

 

.thumbnail2:hover{

background-color: transparent;

z-index: 0;

}

 

.thumbnail2 span{ /*CSS for enlarged image*/

position: absolute;

background-color: #ffeeaa;

padding: 10px;

border: 1px dashed red;

visibility: hidden;

color: #034B82;

font-size: 16px;

font-style: oblique;

font-weight: bold;

text-decoration: none;

margin-top: -100px;

margin-left: 0px;;

margin-right: 10px;

margin-bottom: 10px;

width: 450px;

text-align: center;

}

 

.thumbnail2 span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 5px;

/*width: 365px;

height: 365px;*/

}

 

.thumbnail2:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

margin-right: 10px;

margin-bottom: 10px;

/*position where enlarged image should offset horizontally */

 

}

 

 

/* Code for Easy Coupons Info Popup */

.easyInfo{

position: relative;

z-index: 0;

}

 

.easyInfo:hover{

background-color: transparent;

z-index: 50;

}

 

.easyInfo span{ /*CSS for enlarged image*/

position: absolute;

background-color: #FFD860;

padding: 10px;

border: 1px dashed red;

visibility: hidden;

color: #034B82;

font-size: 16px;

font-style: oblique;

font-weight: bold;

text-decoration: none;

margin-top: -380px;

margin-left: -500px;;

margin-right: 10px;

margin-bottom: 10px;

width: 650px;

text-align: center;

}

 

.easyInfo span img{ /*CSS for enlarged image*/

border-width: 0;

padding: 5px;

}

 

.easyInfo:hover span{ /*CSS for enlarged image on hover*/

visibility: visible;

margin-right: 10px;

margin-bottom: 10px;

/*position where enlarged image should offset horizontally */

 

}

So which OSCommerce file(s) would need to be modified to get the desirable effect of enlarged images on mouseover using css?

Share this post


Link to post
Share on other sites

I am using STS too, couldn't get this one to work but found a much simpler solution. It also works with products listing columns contrib.

 

This goes before the </head> tag of your index.php.html or whichever template you are using for your index page in STS (if not using STS just put it in the regular index.php file):

<script language="javascript" src="includes/popup.js"></script>
<script language="javascript" src="includes/utility.js"></script>

 

Here is popup.js:

// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
// ********************************
// application-specific functions *
// ********************************

// store variables to control where the popup will appear relative to the cursor position
// positive numbers are below and to the right of the cursor, negative numbers are above and to the left
var xOffset = 30;
var yOffset = -30;

function showPopup (targetObjectId, eventObj) {
if(eventObj) {
// hide any currently-visible popups
hideCurrentPopup();
// stop event from bubbling up any farther
eventObj.cancelBubble = true;
// move popup div to current cursor position 
// (add scrollTop to account for scrolling for IE)
var newXCoordinate = (eventObj.pageX)?eventObj.pageX + xOffset:eventObj.x + xOffset + ((document.body.scrollLeft)?document.body.scrollLeft:0);
var newYCoordinate = (eventObj.pageY)?eventObj.pageY + yOffset:eventObj.y + yOffset + ((document.body.scrollTop)?document.body.scrollTop:0);
moveObject(targetObjectId, newXCoordinate, newYCoordinate);
// and make it visible
if( changeObjectVisibility(targetObjectId, 'visible') ) {
	// if we successfully showed the popup
	// store its Id on a globally-accessible object
	window.currentlyVisiblePopup = targetObjectId;
	return true;
} else {
	// we couldn't show the popup, boo hoo!
	return false;
}
} else {
// there was no event object, so we won't be able to position anything, so give up
return false;
}
} // showPopup

function hideCurrentPopup() {
// note: we've stored the currently-visible popup on the global object window.currentlyVisiblePopup
if(window.currentlyVisiblePopup) {
changeObjectVisibility(window.currentlyVisiblePopup, 'hidden');
window.currentlyVisiblePopup = false;
}
} // hideCurrentPopup



// ***********************
// hacks and workarounds *
// ***********************

// initialize hacks whenever the page loads
window.onload = initializeHacks;

// setup an event handler to hide popups for generic clicks on the document
document.onclick = hideCurrentPopup;

function initializeHacks() {
// this ugly little hack resizes a blank div to make sure you can click
// anywhere in the window for Mac MSIE 5
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
window.onresize = explorerMacResizeFix;
}
resizeBlankDiv();
// this next function creates a placeholder object for older browsers
createFakeEventObj();
}

function createFakeEventObj() {
// create a fake event object for older browsers to avoid errors in function call
// when we need to pass the event object to functions
if (!window.event) {
window.event = false;
}
} // createFakeEventObj

function resizeBlankDiv() {
// resize blank placeholder div so IE 5 on mac will get all clicks in window
if ((navigator.appVersion.indexOf('MSIE 5') != -1) 
&& (navigator.platform.indexOf('Mac') != -1)
&& getStyleObject('blankDiv')) {
getStyleObject('blankDiv').width = document.body.clientWidth - 20;
getStyleObject('blankDiv').height = document.body.clientHeight - 20;
}
}

function explorerMacResizeFix () {
location.reload(false);
}

 

Here is utility.js:

// Copyright © 2000 by Apple Computer, Inc., All Rights Reserved.
//
// You may incorporate this Apple sample code into your own code
// without restriction. This Apple sample code has been provided "AS IS"
// and the responsibility for its operation is yours. You may redistribute
// this code, but you are not permitted to redistribute it as
// "Apple sample code" after having made changes.
//
// ************************
// layer utility routines *
// ************************

function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its id
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject

function changeObjectVisibility(objectId, newVisibility) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.visibility = newVisibility;
return true;
} else {
// we couldn't find the object, so we can't change its visibility
return false;
}
} // changeObjectVisibility

function moveObject(objectId, newXCoordinate, newYCoordinate) {
// get a reference to the cross-browser style object and make sure the object exists
var styleObject = getStyleObject(objectId);
if(styleObject) {
styleObject.left = newXCoordinate;
styleObject.top = newYCoordinate;
return true;
} else {
// we couldn't find the object, so we can't very well move it
return false;
}
} // moveObject

 

Find this code in /includes/modules/product_listing.php:

else {
		  $lc_text = ' <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> ';
		}

Replace with:

else {
			 $lc_text = ' <a href="' . tep_href_link(FILENAME_PRODUCT_INFO, ($cPath ? 'cPath=' . $cPath . '&' : '') . 'products_id=' . $listing['products_id']) . '"  class=popupLink onmouseover="return !showPopup(\'' . $listing['products_id'] . '\', event);" onmouseout="hideCurrentPopup()">' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT) . '</a> <DIV onclick=\'event.cancelBubble = true;\' class=popup id=' . $listing['products_id'] . '><table width="50%" border="0" cellspacing="0" cellpadding="0"><tr><td>' . tep_image(DIR_WS_IMAGES . $listing['products_image'], $listing['products_name']) . '</td></tr></table></DIV>';
		}

Note: if your original product_listing.php code snippet uses this syntax: $listing[$x]['products_id'] then you'll need to make sure the changed code reflects this structure, just put [$x] in front of every $listing call in that snippet.

 

Last but not least, the CSS to go in your stylesheet.css:

.popup
{
visibility:hidden;
position: absolute;
left:-100px;
}

 

Mike, I was searching exactly this in product listing when hover over the image to show the image!!! i tried to do it myself but i messed...

Only one thing that i can't find is why in the page i have 2 instances of images, one that works on hover and one that doesn't work. I'd like to not showing the image that don't show the picture when hover. how could i delete this image and have in the page only one image that show the image when the mouse goes over!??

 

Many Thanks!!

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×