Pure CSS Image Swap On Hover For osC Buttons

spooks · November 20, 2009

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 · 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?

spooks · 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!!

stragami · November 20, 2009

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

stragami · November 20, 2009

it is so simple... only copy files into to correct directory and than it works perfect :-"

spooks · 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.

spooks · 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.

addicted · 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

spooks · 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.

addicted · 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

sa03543 · 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.

spooks · 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.

sa03543 · February 6, 2010

Did you mean i just replace what you gave? I did that but can't... :'( :'(

spooks · 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?

sa03543 · February 7, 2010

I post some pictures to you

become

spooks · 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!!

addicted · 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.

This is a result

I'm wondering about this "style="display:none", is it the way it should be ?

spooks · February 7, 2010

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

addicted · February 7, 2010

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

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

addicted · 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

spooks · February 8, 2010

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

addicted · February 8, 2010

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

addicted · February 8, 2010

bwt I'm male :)

36 from Bulgaria :)

spooks · 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!

Pure CSS Image Swap On Hover For osC Buttons

Recommended Posts

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Share this post

Link to post

Share on other sites

Create an account or sign in to comment

Create an account

Sign in