How to change image hover alt text from default product name?

[awarner20]

Hi all,

 

I've searched the forums and the contribs, but have not found the answer I'm looking for. When you hover your mouse over a product image, the little window that comes up displays the product name. I would like this to instead display the product description. I tried typing the alt text html in the Product Name field and also pasting the description there too...neither worked as I had hoped.

 

Does anyone know of a way to accomplish this goal?

 

Thanks for any insight you can offer:)

[supernoc]

Hi all,

 

I've searched the forums and the contribs, but have not found the answer I'm looking for. When you hover your mouse over a product image, the little window that comes up displays the product name. I would like this to instead display the product description. I tried typing the alt text html in the Product Name field and also pasting the description there too...neither worked as I had hoped.

 

Does anyone know of a way to accomplish this goal?

 

Thanks for any insight you can offer:)

 

In includes/admin/functions/html_output.php, the line of code to key in on is

  
 $image .= ' border="0" alt="' . tep_output_string($alt) . '"';

 

Where you are changing the .tep_output_string($alt) to a variable containing information you want...

Hopefully this gets you closer..

[awarner20]

In includes/admin/functions/html_output.php, the line of code to key in on is

  
 $image .= ' border="0" alt="' . tep_output_string($alt) . '"';

 

Where you are changing the .tep_output_string($alt) to a variable containing information you want...

Hopefully this gets you closer..

 

 

Thanks Supernoc,

 

Am I right in thinking that the variable I'll be putting in here will be something to do with the product description? Please excuse my ignorance, I do thank you for your help, but I guess I need to do some more research to find out exactly what variabe to put in there so all the hover will contain the descriptions for the individual products....

 

Adam

[supernoc]

Thanks Supernoc,

 

Am I right in thinking that the variable I'll be putting in here will be something to do with the product description? Please excuse my ignorance, I do thank you for your help, but I guess I need to do some more research to find out exactly what variabe to put in there so all the hover will contain the descriptions for the individual products....

 

Adam

 

It is somewhat different based on your environment. The function that actually writes the html code, with the alt attributes is "function tep_image" in the html_output.php file. That function is called from various places in oscommerce such as product_info.php. My previous post is an example with imagemagic contribution.

 

The key concepts are:

1. ensure you are passing the product description to the tep_image function

2. ensure the tep_image function processes the information sent to it.

 

I do not have a default oscommerce setup in front of me, but if I remember correctly the tep_image function in a default environment sets the alt text to null.

 

If you would be so kind as to paste the contents of your html_output.php... or pm me, I can take a closer look.

[awarner20]

It is somewhat different based on your environment. The function that actually writes the html code, with the alt attributes is "function tep_image" in the html_output.php file. That function is called from various places in oscommerce such as product_info.php. My previous post is an example with imagemagic contribution.

 

The key concepts are:

1. ensure you are passing the product description to the tep_image function

2. ensure the tep_image function processes the information sent to it.

 

I do not have a default oscommerce setup in front of me, but if I remember correctly the tep_image function in a default environment sets the alt text to null.

 

If you would be so kind as to paste the contents of your html_output.php... or pm me, I can take a closer look.

 

This was in catalog/includes/functions/html_output.php

<?php
/*
 $Id: html_output.php,v 1.56 2003/07/09 01:15:48 hpdl Exp $

 osCommerce, Open Source E-Commerce Solutions
 http://www.oscommerce.com

 Copyright (c) 2003 osCommerce

 Released under the GNU General Public License
*/

////
// The HTML href link wrapper function
 function tep_href_link($page = '', $parameters = '', $connection = 'NONSSL', $add_session_id = true, $search_engine_safe = true) {
global $request_type, $session_started, $SID;

if (!tep_not_null($page)) {
  die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine the page link!<br><br>');
}

if ($connection == 'NONSSL') {
  $link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;
} elseif ($connection == 'SSL') {
  if (ENABLE_SSL == true) {
	$link = HTTPS_SERVER . DIR_WS_HTTPS_CATALOG;
  } else {
	$link = HTTP_SERVER . DIR_WS_HTTP_CATALOG;
  }
} else {
  die('</td></tr></table></td></tr></table><br><br><font color="#ff0000"><b>Error!</b></font><br><br><b>Unable to determine connection method on a link!<br><br>Known methods: NONSSL SSL</b><br><br>');
}

if (tep_not_null($parameters)) {
  $link .= $page . '?' . tep_output_string($parameters);
  $separator = '&';
} else {
  $link .= $page;
  $separator = '?';
}

while ( (substr($link, -1) == '&') || (substr($link, -1) == '?') ) $link = substr($link, 0, -1);

// Add the session ID when moving from different HTTP and HTTPS servers, or when SID is defined
if ( ($add_session_id == true) && ($session_started == true) && (SESSION_FORCE_COOKIE_USE == 'False') ) {
  if (tep_not_null($SID)) {
	$_sid = $SID;
  } elseif ( ( ($request_type == 'NONSSL') && ($connection == 'SSL') && (ENABLE_SSL == true) ) || ( ($request_type == 'SSL') && ($connection == 'NONSSL') ) ) {
	if (HTTP_COOKIE_DOMAIN != HTTPS_COOKIE_DOMAIN) {
	  $_sid = tep_session_name() . '=' . tep_session_id();
	}
  }
}

if ( (SEARCH_ENGINE_FRIENDLY_URLS == 'true') && ($search_engine_safe == true) ) {
  while (strstr($link, '&&')) $link = str_replace('&&', '&', $link);

  $link = str_replace('?', '/', $link);
  $link = str_replace('&', '/', $link);
  $link = str_replace('=', '/', $link);

  $separator = '?';
}

if (isset($_sid)) {
  $link .= $separator . tep_output_string($_sid);
}

return $link;
 }

////
// The HTML image wrapper function
 function tep_image($src, $alt = '', $width = '', $height = '', $parameters = '') {
if ( (empty($src) || ($src == DIR_WS_IMAGES)) && (IMAGE_REQUIRED == 'false') ) {
  return false;
}

// alt is added to the img tag even if it is null to prevent browsers from outputting
// the image filename as default
$image = '<img src="' . tep_output_string($src) . '" border="0" alt="' . tep_output_string($alt) . '"';

if (tep_not_null($alt)) {
  $image .= ' title=" ' . tep_output_string($alt) . ' "';
}

if ( (CONFIG_CALCULATE_IMAGE_SIZE == 'true') && (empty($width) || empty($height)) ) {
  if ($image_size = @getimagesize($src)) {
	if (empty($width) && tep_not_null($height)) {
	  $ratio = $height / $image_size[1];
	  $width = intval($image_size[0] * $ratio);
	} elseif (tep_not_null($width) && empty($height)) {
	  $ratio = $width / $image_size[0];
	  $height = intval($image_size[1] * $ratio);
	} elseif (empty($width) && empty($height)) {
	  $width = $image_size[0];
	  $height = $image_size[1];
	}
  } elseif (IMAGE_REQUIRED == 'false') {
	return false;
  }
}

if (tep_not_null($width) && tep_not_null($height)) {
  $image .= ' width="' . tep_output_string($width) . '" height="' . tep_output_string($height) . '"';
}

if (tep_not_null($parameters)) $image .= ' ' . $parameters;

$image .= '>';

return $image;
 }

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

$image_submit .= '>';

return $image_submit;
 }

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

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(DIR_WS_IMAGES . $image, '', $width, $height);
 }

////
// Output a form
 function tep_draw_form($name, $action, $method = 'post', $parameters = '') {
$form = '<form name="' . tep_output_string($name) . '" action="' . tep_output_string($action) . '" method="' . tep_output_string($method) . '"';

if (tep_not_null($parameters)) $form .= ' ' . $parameters;

$form .= '>';

return $form;
 }

////
// Output a form input field
 function tep_draw_input_field($name, $value = '', $parameters = '', $type = 'text', $reinsert_value = true) {
$field = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
  $field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';
} elseif (tep_not_null($value)) {
  $field .= ' value="' . tep_output_string($value) . '"';
}

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

return $field;
 }

////
// Output a form password field
 function tep_draw_password_field($name, $value = '', $parameters = 'maxlength="40"') {
return tep_draw_input_field($name, $value, $parameters, 'password', false);
 }

////
// Output a selection field - alias function for tep_draw_checkbox_field() and tep_draw_radio_field()
 function tep_draw_selection_field($name, $type, $value = '', $checked = false, $parameters = '') {
$selection = '<input type="' . tep_output_string($type) . '" name="' . tep_output_string($name) . '"';

if (tep_not_null($value)) $selection .= ' value="' . tep_output_string($value) . '"';

if ( ($checked == true) || ( isset($GLOBALS[$name]) && is_string($GLOBALS[$name]) && ( ($GLOBALS[$name] == 'on') || (isset($value) && (stripslashes($GLOBALS[$name]) == $value)) ) ) ) {
  $selection .= ' CHECKED';
}

if (tep_not_null($parameters)) $selection .= ' ' . $parameters;

$selection .= '>';

return $selection;
 }

////
// Output a form checkbox field
 function tep_draw_checkbox_field($name, $value = '', $checked = false, $parameters = '') {
return tep_draw_selection_field($name, 'checkbox', $value, $checked, $parameters);
 }

////
// Output a form radio field
 function tep_draw_radio_field($name, $value = '', $checked = false, $parameters = '') {
return tep_draw_selection_field($name, 'radio', $value, $checked, $parameters);
 }

////
// Output a form textarea field
 function tep_draw_textarea_field($name, $wrap, $width, $height, $text = '', $parameters = '', $reinsert_value = true) {
$field = '<textarea name="' . tep_output_string($name) . '" wrap="' . tep_output_string($wrap) . '" cols="' . tep_output_string($width) . '" rows="' . tep_output_string($height) . '"';

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

if ( (isset($GLOBALS[$name])) && ($reinsert_value == true) ) {
  $field .= tep_output_string_protected(stripslashes($GLOBALS[$name]));
} elseif (tep_not_null($text)) {
  $field .= tep_output_string_protected($text);
}

$field .= '</textarea>';

return $field;
 }

////
// Output a form hidden field
 function tep_draw_hidden_field($name, $value = '', $parameters = '') {
$field = '<input type="hidden" name="' . tep_output_string($name) . '"';

if (tep_not_null($value)) {
  $field .= ' value="' . tep_output_string($value) . '"';
} elseif (isset($GLOBALS[$name])) {
  $field .= ' value="' . tep_output_string(stripslashes($GLOBALS[$name])) . '"';
}

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

return $field;
 }

////
// Hide form elements
 function tep_hide_session_id() {
global $session_started, $SID;

if (($session_started == true) && tep_not_null($SID)) {
  return tep_draw_hidden_field(tep_session_name(), tep_session_id());
}
 }

////
// Output a form pull down menu
 function tep_draw_pull_down_menu($name, $values, $default = '', $parameters = '', $required = false) {
$field = '<select name="' . tep_output_string($name) . '"';

if (tep_not_null($parameters)) $field .= ' ' . $parameters;

$field .= '>';

if (empty($default) && isset($GLOBALS[$name])) $default = stripslashes($GLOBALS[$name]);

for ($i=0, $n=sizeof($values); $i<$n; $i++) {
  $field .= '<option value="' . tep_output_string($values[$i]['id']) . '"';
  if ($default == $values[$i]['id']) {
	$field .= ' SELECTED';
  }

  $field .= '>' . tep_output_string($values[$i]['text'], array('"' => '"', '\'' => ''', '<' => '<', '>' => '>')) . '</option>';
}
$field .= '</select>';

if ($required == true) $field .= TEXT_FIELD_REQUIRED;

return $field;
 }

////
// Creates a pull-down list of countries
 function tep_get_country_list($name, $selected = '', $parameters = '') {
$countries_array = array(array('id' => '223', 'text' => 'United States'));
$countries = tep_get_countries();

for ($i=0, $n=sizeof($countries); $i<$n; $i++) {
  $countries_array[] = array('id' => $countries[$i]['countries_id'], 'text' => $countries[$i]['countries_name']);
}

return tep_draw_pull_down_menu($name, $countries_array, $selected, $parameters);
 }
?>

 

Your statement here made me think a bit

I do not have a default oscommerce setup in front of me, but if I remember correctly the tep_image function in a default environment sets the alt text to null.

 

Right now my products show the product name when hovering over the image.

 

Thanks so much for taking a look...I really appreciate it!

[oasisp]

i am trying to do same insted of title on image alt tag need to show title + description. let me know thx

[♥ecartz]

i am trying to do same insted of title on image alt tag need to show title + description. let me know thx

In product_info.php, find

tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']), SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"')

and try changing both instances to

tep_image(DIR_WS_IMAGES . $product_info['products_image'], addslashes($product_info['products_name']).': '.$product_info['products_description'], SMALL_IMAGE_WIDTH, SMALL_IMAGE_HEIGHT, 'hspace="5" vspace="5"')