mouseover-effect for image buttons

[felix_natter]

This tip shows you how to create a mouseover image effect for osC image buttons.

 

You will have to edit includes/functions/html_output.php and for each image button

that you wish to add a mouseover image, add an image with "hl" (from "highlight")

appended to the name. For example, to add a mouseover image for

includes/languages/german/images/buttons/button_back.gif, add the image

includes/languages/german/images/buttons/button_back_hl.gif.

 

You will have to add code to tep_image_button in includes/functions/html_output.php,

line 137:

    // add mouseover-effect
   $normal_image = DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image;
   $idx = strrpos ($normal_image, ".");
   if ($idx === false)
     exit ("Invalid image: $image");
   $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
   if (file_exists ($highlight_image))
     $parameters .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

 

so that it reads:

////
// Output a function button in the selected language
 function tep_image_button($image, $alt = '', $parameters = '') {
   global $language;

   // add mouseover-effect
   $normal_image = DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image;
   $idx = strrpos ($normal_image, ".");
   if ($idx === false)
     exit ("Invalid image: $image");
   $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
   if (file_exists ($highlight_image))
     $parameters .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

   return tep_image($normal_image, $alt, '', '', $parameters);
 }

 

This works with recent Mozilla and IE but I can not guarantee that this works with old browsers (images are not preloaded, maybe other problems).

[felix_natter]

here is a correction: the first line should use tep_output_string:

$normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);

 

Additionally you need to modify tep_image_submit in includes/functions/html_output.php, line

126 to add (almost) the same code:

    // add mouseover-effect
   $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
   $idx = strrpos ($normal_image, ".");
   if ($idx === false)
     exit ("Invalid image: $image");
   $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
   if (file_exists ($highlight_image))
     $image_submit .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

 

so that it reads:

////
// The HTML form submit button wrapper function
// Outputs a button in the selected language
 function tep_image_submit($image, $alt = '', $parameters = '') {
   global $language;

   $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;

   // add mouseover-effect
   $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
   $idx = strrpos ($normal_image, ".");
   if ($idx === false)
     exit ("Invalid image: $image");
   $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
   if (file_exists ($highlight_image))
     $image_submit .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

   $image_submit .= '>';

   return $image_submit;
 }

[Gersh_ny]

very useful it works great for all the images that are linked to "tep_image_submit", can you figure out rollover for "tep_image_button" as well?

[felix_natter]

very useful it works great for all the images that are linked to "tep_image_submit", can you figure out rollover for "tep_image_button" as well?

Please read the first post in this thread: it describes how to modify tep_image_button(). In the second post,

I wrote about a small fix for the code added to tep_image_button() (use tep_output_string) and added

the code for tep_image_submit().

 

Should I add a reply that includes everything for better legibility?

[Gersh_ny]

Hi felix_natter,

Yes I think you should combine both and make them into a contribution it is a nice and simple roll over modification. And thanx for the reply i added it to tep_image_button and it workd very nicely.

[felix_natter]

Hi felix_natter,

Yes I think you should combine both and make them into a contribution it is a nice and simple roll over modification. And thanx for the reply i added it to tep_image_button and it workd very nicely.

Well, I think these changes are very easy to apply (even for non-programmers) so I think it would be better to add this to the knowledge-base (in Tips and Tricks or Design and Layout).

[felix_natter]

For better legibility here is the complete tip with the corrections included:

 

This tip shows you how to create a mouseover image effect for osC image buttons.

 

You will have to edit includes/functions/html_output.php and for each image button

that you wish to add a mouseover image, add an image with "hl" (from "highlight")

appended to the name. For example, to add a mouseover image for

includes/languages/german/images/buttons/button_back.gif, add the image

includes/languages/german/images/buttons/button_back_hl.gif (this also works for

other images-types).

 

You will have to add code to tep_image_button in includes/functions/html_output.php,

line 137:

   // add mouseover-effect
  $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
  $idx = strrpos ($normal_image, ".");
  if ($idx === false)
    exit ("Invalid image: $image");
  $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
  if (file_exists ($highlight_image))
    $parameters .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

 

so that it reads:

////
// Output a function button in the selected language
function tep_image_button($image, $alt = '', $parameters = '') {
  global $language;

  // add mouseover-effect
  $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
  $idx = strrpos ($normal_image, ".");
  if ($idx === false)
    exit ("Invalid image: $image");
  $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
  if (file_exists ($highlight_image))
    $parameters .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

  return tep_image($normal_image, $alt, '', '', $parameters);
}

 

Additionally you need to modify tep_image_submit in includes/functions/html_output.php, line

126 to add (almost) the same code:

   // add mouseover-effect
  $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
  $idx = strrpos ($normal_image, ".");
  if ($idx === false)
    exit ("Invalid image: $image");
  $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
  if (file_exists ($highlight_image))
    $image_submit .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

 

so that it reads:

////
// The HTML form submit button wrapper function
// Outputs a button in the selected language
function tep_image_submit($image, $alt = '', $parameters = '') {
  global $language;

  $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;

  // add mouseover-effect
  $normal_image = tep_output_string(DIR_WS_LANGUAGES . $language . '/images/buttons/' . $image);
  $idx = strrpos ($normal_image, ".");
  if ($idx === false)
    exit ("Invalid image: $image");
  $highlight_image = substr($normal_image, 0, $idx) . "_hl" . substr ($normal_image, $idx);
  if (file_exists ($highlight_image))
    $image_submit .= " onMouseOver=\"this.src='$highlight_image'\" onMouseOut=\"this.src='$normal_image'\"";

  $image_submit .= '>';

  return $image_submit;
}

 

This works with recent Mozilla and IE but I can not guarantee that this works with old browsers (images are not preloaded, maybe other problems).

[Gersh_ny]

I see you decided to make it a contribution after all. It doesn?t depend on the amount of code even small changes could be a contribution, so great job Felix :rolleyes:

[Gui]

HI Felix and others,

 

When I place the above code in the html_output.php I get the following error when loading the site:

 

Parse error: parse error, unexpected T_GLOBAL in /home/jaquariu/public_html/testwinkel/includes/functions/html_output.php on line 134

 

OSC 2.2

Php 4.3.7

 

I double checked if I put the correct code with the correct image --> button or submit

This is okay.

 

Any suggestions?

 

Guy

[felix_natter]

HI Felix and others,

 

When I place the above code in the html_output.php I get the following error when loading the site:

 

Parse error: parse error, unexpected T_GLOBAL in /home/jaquariu/public_html/testwinkel/includes/functions/html_output.php on line 134

 

OSC 2.2

Php 4.3.7

 

I double checked if I put the correct code with the correct image --> button or submit

This is okay.

 

Any suggestions?

 

Guy

<{POST_SNAPBACK}>

 

Can you please post line 134 with the 10 previous and 10 following lines?

(or send the complete html_output.php to [email protected])

[COOLumbia]

Has anyone gotten this to work? I see that there have been no posts since October 2004. Anyone have a website where this has been successfully implemented?

[Guest]

Has anyone gotten this to work?  I see that there have been no posts since October 2004.  Anyone have a website where this has been successfully implemented?

<{POST_SNAPBACK}>

 

Yes this works fine.

[kimr]

What about Dynamic Drop-down Menu?

 

Any suggestion or ideas?