slattman Posted January 1, 2007 Share Posted January 1, 2007 /* 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 Quote Link to comment Share on other sites More sharing options...
Rachael w. Posted January 14, 2007 Share Posted January 14, 2007 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! Quote Link to comment Share on other sites More sharing options...
azer Posted June 12, 2007 Share Posted June 12, 2007 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 :'( Quote MS2 Link to comment Share on other sites More sharing options...
ivagarfitt Posted June 18, 2007 Share Posted June 18, 2007 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: Quote Link to comment Share on other sites More sharing options...
Guest Posted September 12, 2007 Share Posted September 12, 2007 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 Quote Link to comment Share on other sites More sharing options...
Guest Posted September 22, 2007 Share Posted September 22, 2007 (edited) any news about this contribution? the instructions for install it are so bad.... Edited September 22, 2007 by Aperol Quote Link to comment Share on other sites More sharing options...
porpoise1954 Posted September 25, 2007 Share Posted September 25, 2007 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 Quote * * * * * * * * * * * * * * * * * * * * * Porpoises are most happy when wet! \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ \ _ Link to comment Share on other sites More sharing options...
cleverflo Posted November 15, 2007 Share Posted November 15, 2007 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? Quote Link to comment Share on other sites More sharing options...
schlegk Posted May 2, 2008 Share Posted May 2, 2008 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 Quote Link to comment Share on other sites More sharing options...
webreg Posted May 5, 2008 Share Posted May 5, 2008 how about this http://www.markys.com/caviar/customer/home.php?cat=283 when you mouse over will be display large image, where can i download that code, Thanks Quote Link to comment Share on other sites More sharing options...
Guest Posted May 8, 2008 Share Posted May 8, 2008 Yes I agree, it looks as though they would be alittle more specific as to where we need to place the code!!! Quote Link to comment Share on other sites More sharing options...
saosangmo Posted May 11, 2008 Share Posted May 11, 2008 I'm using STS, how can i hack this plugin? Quote bien cong ty Crane in Vietnam bien quang cao Link to comment Share on other sites More sharing options...
mthierfelder Posted May 23, 2008 Share Posted May 23, 2008 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; } Quote 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 Link to comment Share on other sites More sharing options...
trendstar Posted June 5, 2008 Share Posted June 5, 2008 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 Quote Link to comment Share on other sites More sharing options...
Syeager Posted September 2, 2008 Share Posted September 2, 2008 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. Quote Link to comment Share on other sites More sharing options...
Guest Posted September 3, 2008 Share Posted September 3, 2008 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. Quote Link to comment Share on other sites More sharing options...
majorpayne Posted September 15, 2008 Share Posted September 15, 2008 Hi, Where can we find these codes? I agree where do i find the CSS code! Quote Link to comment Share on other sites More sharing options...
stony Posted November 10, 2008 Share Posted November 10, 2008 i been testing this pop up and i cannot use it ..there is some error on java Quote Link to comment Share on other sites More sharing options...
urbanmari Posted February 1, 2009 Share Posted February 1, 2009 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? Quote Link to comment Share on other sites More sharing options...
gioyfa Posted May 8, 2010 Share Posted May 8, 2010 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!! Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.