Jump to content
  • Checkout
  • Login
  • Get in touch

osCommerce

The e-commerce.

Pure CSS Image Swap On Hover For osC Buttons


spooks

Recommended Posts

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 biggrin.gif

 

 

 

.

Edited by spooks

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

PS. I wonder why the installation is in a .doc file?

 

 

It's just the way I write em wink.gif , 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!! laugh.gif

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

it is so simple... only copy files into to correct directory and than it works perfect whistling.gif

 

 

Thanks biggrin.gif 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. smile.gif

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

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. biggrin.gif

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

  • 1 month later...

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

Link to comment
Share on other sites

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. smile.gif

 

 

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

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

Link to comment
Share on other sites

  • 4 weeks later...

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.

Link to comment
Share on other sites

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!! wink.gif

 

If you still have any issues, could you give full details.

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

Did you mean i just replace what you gave? I did that but can't... crying.gifcrying.gif

 

 

cant what??

 

what happens if u simply use the original functions given in the add-on?

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

 

 

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!! wink.gif

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

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 ?

Link to comment
Share on other sites

 

 

The code in this add-on replaces code in html_output.php, it is not designed to go elsewhere

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

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

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

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 by spooks

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

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 by addicted
Link to comment
Share on other sites

 

 

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!

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Unfortunately, your content contains terms that we do not allow. Please edit your content to remove the highlighted words below.
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...