spooks Posted November 20, 2009 Share Posted November 20, 2009 (edited) Pure CSS Image Swap On Hover For osC Buttons This simple mod will allow you to have a mouseover image for any of your osC buttons, its pure css, no javascript, all you have to do is create your hover button pics. Features: 1.A very simple add-on, only one file to edit. 2.Mouseover effect is automatically applied if a button has a hover image. 3.Tested & works in all major browser engines. 4.Pure css. 5.Will work with any varient of osC v2.2. 6.If hover effect is not applied the standard osC function is used. 7.Only one file to edit & only one change to that! 8.Will work with any language. Tested on PHP 4 & 5, SQL 4 & 5, osC 2.2 ms2, rc1 & rc2a and is register_globals off compatible. Contribution will be found here Enjoy . Edited November 20, 2009 by spooks multimixer 1 Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
multimixer Posted November 20, 2009 Share Posted November 20, 2009 Great Sam, thank you :) I can't wait to try it out PS. I wonder why the installation is in a .doc file? Quote My community profile | Template system for osCommerce - New: Responsive | Feedback channel Link to comment Share on other sites More sharing options...
spooks Posted November 20, 2009 Author Share Posted November 20, 2009 PS. I wonder why the installation is in a .doc file? It's just the way I write em , I don't like to mess around too much, sometimes it takes longer to put a install package together than it does to write the code!! Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
stragami Posted November 20, 2009 Share Posted November 20, 2009 (edited) Sam, thx from germany only one word GREAT! rgds alfred p.s. installed but did not work at my side. Edited November 20, 2009 by stragami Quote Link to comment Share on other sites More sharing options...
stragami Posted November 20, 2009 Share Posted November 20, 2009 it is so simple... only copy files into to correct directory and than it works perfect :-" Quote Link to comment Share on other sites More sharing options...
spooks Posted November 20, 2009 Author Share Posted November 20, 2009 it is so simple... only copy files into to correct directory and than it works perfect Thanks Yes I did'nt state in the doc, you must place your hover images in include/languages/your language/images/buttons with your existing button images. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
spooks Posted November 22, 2009 Author Share Posted November 22, 2009 Uploaded new version 1.1 1.Modified so only one style element is added per page. 2.Added code to pre-load hover images, so there is no 'flash' the first time a button is hovered over. Enjoy. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted January 2, 2010 Share Posted January 2, 2010 Hello Any idea how to merge with STS / Outputs a button in the selected language function tep_image_submit($image, $alt = '', $parameters = '') { global $language; // START STS v4.4: global $sts; $src = $sts->image_button($image,$language); if ($src!='') $image_submit = '<input type="image" src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string ($alt) . '"'; else // END STS v4.4 $image_submit = '<input type="image" src="' . tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image) . '" border="0" alt="' . tep_output_string($alt) . '"'; if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "'; if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters; $image_submit .= '>'; return $image_submit; } //// //// // Output a function button in the selected language function tep_image_button($image, $alt = '', $parameters = '') { global $language; // START STS v4.4: global $sts; $src = $sts->image_button($image, $language, true); // 3rd parameter to tell tep_image that file check has been alre ady done if ($src!='') { // Take image from template folder if exists. return tep_image ($src); } // END STS v4.4 return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters); } //// // Output a separator either through whitespace, or with an image function tep_draw_separator($image = 'pixel_black.gif', $width = '100%', $height = '1') { return tep_image_original(DIR_WS_IMAGES . $image, '', $width, $height, true); } Do I need to add $hover parameter in sts or something like this Thank You in advance Quote Link to comment Share on other sites More sharing options...
spooks Posted January 3, 2010 Author Share Posted January 3, 2010 Any idea how to merge with STS Try this code: // Outputs a button in the selected language function tep_image_submit($image, $alt = '', $parameters = '') { global $language, $button_class; // START STS v4.4: global $sts; $src = $sts->image_button($image,$language); if ($src!='') $image_src = tep_output_string($src); else // END STS v4.4 $image_src = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image); $iefix = '<a href="javascript:void(0)">'; //set to $iefix = ''; if your using an xhtml doctype if (file_exists($image_src)) { list($width, $height) = getimagesize($image_src); $idx = strrpos($image,'.'); $id = substr ($image,0,$idx); $hover_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $id . "_over" . substr ($image, $idx)); $hover = file_exists($hover_image); } $image_submit = '<input type="image" src="' . $image_src . '" border="0" alt="' . tep_output_string($alt) . '"'; if ($hover) $image_submit = $iefix . '<img alt="" src="' . $hover_image . '" style="display:none" /><input type="submit" value="" class="' . $id . '"'; if (tep_not_null($alt)) $image_submit .= ' title=" ' . tep_output_string($alt) . ' "'; if (tep_not_null($parameters)) $image_submit .= ' ' . $parameters; $image_submit .= '>'; if ($hover && $iefix) $image_submit .= '</a>'; if ($hover) $button_class .= '.' . $id . ' { border: none; background: url("' . $image_src . '") no-repeat top left; width:' . $width . 'px; height:' . $height . 'px; cursor:pointer;} input.' . $id . ':hover, a:hover input.' . $id . ' { border: none; background: url("' . $hover_image . '") no-repeat top left; } '; return $image_submit; } //// //// // Output a function button in the selected language function tep_image_button($image, $alt = '', $parameters = '') { global $language, $button_class; // START STS v4.4: global $sts; $src = $sts->image_button($image, $language, true); // 3rd parameter to tell tep_image that file check has been already done if ($src!='') $image_src = tep_output_string($src); else // END STS v4.4 $image_src = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image); if (file_exists($image_src)) { list($width, $height) = getimagesize($image_src); $idx = strrpos($image,'.'); $id = substr ($image,0,$idx); $hover_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $id . "_over" . substr ($image, $idx)); $hover = file_exists($hover_image); $button = '<img alt="" src="' . $hover_image . '" style="display:none" /><img src="' . DIR_WS_IMAGES . 'pixel_trans.gif' . '" class="' . $id . '" alt="' . tep_output_string($alt) . '"'; if (tep_not_null($alt)) $button .= ' title=" ' . tep_output_string($alt) . ' "'; if (tep_not_null($parameters)) $button .= ' ' . $parameters; $button .= '/>'; } if ($hover) { $button_class .= '.' . $id . ' { border: none; background: url("' . $image_src . '") no-repeat top left; width:' . $width . 'px; height:' . $height . 'px; cursor:pointer;} a:hover img.' . $id . ' { border: none; background: url("' . $hover_image . '") no-repeat top left; } '; return $button; } else { return tep_image(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image, $alt, '', '', $parameters); } } Not tested, let me know how you get on. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted January 10, 2010 Share Posted January 10, 2010 Hello Sam Thank You for your help, and of course your contribution - I'm using 3 of them The code you have posted didn't work for me (there was error in my error log)so I remove everything and start it again. Meanwhile I realize two things 1. Error was not from your contribution - it was famous bug in breadcrumb 2. There was no need to merge 2 files - sts parameters to change default image folder for templates - i don't use it, I have different theme folders So at the end everything is work fine, thank You This week I'll try to get your fancybox multiply image addon as STS tag... Just download product listing enhancement - I have no patience to play with it Quote Link to comment Share on other sites More sharing options...
sa03543 Posted February 6, 2010 Share Posted February 6, 2010 Hello Sam Thank You for your help, and of course your contribution - I'm using 3 of them The code you have posted didn't work for me (there was error in my error log)so I remove everything and start it again. Meanwhile I realize two things 1. Error was not from your contribution - it was famous bug in breadcrumb 2. There was no need to merge 2 files - sts parameters to change default image folder for templates - i don't use it, I have different theme folders So at the end everything is work fine, thank You This week I'll try to get your fancybox multiply image addon as STS tag... Just download product listing enhancement - I have no patience to play with it I met the same problem as you. I'm using STS too? So the code given by Author din't work for STS. How you solve this problem? Can let me? Thanks very much. Quote Link to comment Share on other sites More sharing options...
spooks Posted February 6, 2010 Author Share Posted February 6, 2010 I met the same problem as you. I'm using STS too? So the code given by Author din't work for STS. How you solve this problem? Can let me? Thanks very much. Could you try the snippit i posted b4, the error addicted had was not due to this, as she said, she also stated she ended up using the original code!! If you still have any issues, could you give full details. Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
sa03543 Posted February 6, 2010 Share Posted February 6, 2010 Did you mean i just replace what you gave? I did that but can't... :'( :'( Quote Link to comment Share on other sites More sharing options...
spooks Posted February 6, 2010 Author Share Posted February 6, 2010 Did you mean i just replace what you gave? I did that but can't... cant what?? what happens if u simply use the original functions given in the add-on? Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
sa03543 Posted February 7, 2010 Share Posted February 7, 2010 I post some pictures to you become Quote Link to comment Share on other sites More sharing options...
spooks Posted February 7, 2010 Author Share Posted February 7, 2010 which code r u using & have u created the mousover images? if u dont give full info its impossible to tell what issues are, stop giving one word posts!! Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted February 7, 2010 Share Posted February 7, 2010 I try merged code today I have the same efect, if there is an rollover image created. If there is not, button is shown correctly. <img alt="" src="includes/languages/bulgarian/images/buttons/button_reviews_over.gif" style="display:none" /><img src="images/pixel_trans.gif" class="button_reviews" alt="Коментари" title=" Коментари "/></a><span class="new_product_desc"> <a href="javascript:void(0)"><img alt="" src="includes/languages/bulgarian/images/buttons/button_in_cart_over.gif" style="display:none" /><input type="submit" value="" class="button_in_cart" title=" Добави в количката "></a> <a href="http://xxx.com/ask_a_question.php?products_id=12319&manufacturers_id=133"><img src="includes/languages/bulgarian/images/buttons/ask.gif" border="0" alt="IMAGE_BUTTON_ASK_QUESTION" title=" IMAGE_BUTTON_ASK_QUESTION "> This is a result I'm wondering about this "style="display:none", is it the way it should be ? Quote Link to comment Share on other sites More sharing options...
spooks Posted February 7, 2010 Author Share Posted February 7, 2010 The code in this add-on replaces code in html_output.php, it is not designed to go elsewhere Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted February 7, 2010 Share Posted February 7, 2010 (edited) The code in this add-on replaces code in html_output.php, it is not designed to go elsewhere Yes, It is in html_output.php, the one I have posted is view source of the page - product_info.php, Edited February 7, 2010 by addicted Quote Link to comment Share on other sites More sharing options...
spooks Posted February 7, 2010 Author Share Posted February 7, 2010 Yes, It is in html_output.php, the one I have posted is view source of the page - product_info.php, Oh, Ok, but the code is replacement, if u have merged then why. Did u make addition to footer.php Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted February 8, 2010 Share Posted February 8, 2010 Oh, Ok, but the code is replacement, if u have merged then why. Did u make addition to footer.php Yes I did it I'm searching where else STS has modified button wrapper Quote Link to comment Share on other sites More sharing options...
spooks Posted February 8, 2010 Author Share Posted February 8, 2010 (edited) Yes I did it I'm searching where else STS has modified button wrapper if it helps, the generated source for a add to cart should be: <a href="javascript:void(0)"><img alt="" src="includes/languages/english/images/buttons/button_in_cart_over.gif" style="display:none" /><input type="submit" value="" class="button_in_cart" title=" Add to Cart "></a> with the following style info appearing at the bottom of the page: <style type="text/css">.button_in_cart { border: none; background: url("includes/languages/english/images/buttons/button_in_cart.gif") no-repeat top left; width:120px; height:22px; cursor:pointer;} input.button_in_cart:hover, a:hover input.button_in_cart { border: none; background: url("includes/languages/english/images/buttons/button_in_cart_over.gif") no-repeat top left; } </style> Edited February 8, 2010 by spooks Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. Link to comment Share on other sites More sharing options...
addicted Posted February 8, 2010 Share Posted February 8, 2010 (edited) Hello Sam Bottom part is missing in my page here is my footer.php <?php^M /*^M $Id: footer.php 1739 2007-12-20 00:52:16Z hpdl $^M ^M osCommerce, Open Source E-Commerce Solutions^M http://www.oscommerce.com^M ^M Copyright (c) 2003 osCommerce^M ^M Released under the GNU General Public License^M */^M // START STS 4.5^M if ($sts->display_template_output) {^M // Get content here, in case column_right is not called. if (!isset($sts->template['content'])) $sts->restart_capture ('content');^M } else {^M //END STS^M ^M require(DIR_WS_INCLUDES . 'counter.php');^M ?>^M <table border="0" width="100%" cellspacing="0" cellpadding="1">^M <tr class="footer">^M <td class="footer"> <?php echo strftime(DATE_FORMAT_LONG); ?> </td>^M <td align="right" class="footer"> <?php echo $counter_now . ' ' . FOOTER_TEXT_REQUESTS_SINCE . ' ' . $counter_startda te_formatted; ?> </td>^M </tr>^M </table>^M <br>^M <table border="0" width="100%" cellspacing="0" cellpadding="0">^M <tr>^M <td align="center" class="smallText"><?php echo FOOTER_TEXT_BODY; ?></td>^M </tr>^M </table>^M <?php^M if ($banner = tep_banner_exists('dynamic', '468x50')) {^M ?>^M <br>^M <table border="0" width="100%" cellspacing="0" cellpadding="0">^M <tr>^M <td align="center"><?php echo tep_display_banner('static', $banner); ?></td> </tr>^M </table>^M <?php^M }^M // START STS 4.1^M }^M // END STS 4.1^M echo '<style type="text/css">' . $button_class . '</style>' ?> ~ I tried to place echo '<style type="text/css">' . $button_class . '</style>' before clossing STS condition // START STS 4.1^M }^M // END STS 4.1^M but I'm not in php language and I got parse error, looks like it must be in sts if conditioning Edited February 8, 2010 by addicted Quote Link to comment Share on other sites More sharing options...
addicted Posted February 8, 2010 Share Posted February 8, 2010 bwt I'm male :) 36 from Bulgaria :) Quote Link to comment Share on other sites More sharing options...
spooks Posted February 8, 2010 Author Share Posted February 8, 2010 try adding the code immediatly after // START STS 4.5 I trust u don't actually have all those ^M there, some sort of code translation somewhere! Quote Sam Remember, What you think I ment may not be what I thought I ment when I said it. Contributions: Auto Backup your Database, Easy way Multi Images with Fancy Pop-ups, Easy way Products in columns with multi buy etc etc Disable any Category or Product, Easy way Secure & Improve your account pages et al. 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.