You are here:  » Image text hoovering over an image


Image text hoovering over an image

Submitted by MikeyC on Thu, 2012-11-29 21:09 in

Hi David,

How do i add text for the images (merchant logo's, and product images in search results and product page)when hoovering over an image to display that particular merchant name or product name ?

Submitted by support on Fri, 2012-11-30 12:00

Hi Mikey,

It looks like both alt and title tags are required for mouse-over text support in all browsers, so that's easy to add.

Firstly for the main product image, look for the following code around line 7 (or similar for wherever the $mainProduct image is displayed in your template)

<img width='180' src='<?php print $mainProduct["image_url"]; ?>' alt='<?php print htmlentities($mainProduct["name"],ENT_QUOTES,$config_charset); ?>' />

...and REPLACE with:

<img width='180' src='<?php print $mainProduct["image_url"]; ?>' alt='<?php print htmlentities($mainProduct["name"],ENT_QUOTES,$config_charset); ?>' title='<?php print htmlentities($mainProduct["name"],ENT_QUOTES,$config_charset); ?>'/>

For merchant logos in the price comparison table, edit html/prices.php look for the following code _within_ line 11:

<img src='".$config_baseHREF."logos/".$product["merchant"]."' border='0' />

...and REPLACE with:

<img src='".$config_baseHREF."logos/".$product["merchant"]."' border='0' alt='".$product["merchant"]."' title='".$product["merchant"]."' />

And for product images in search results, edit html/searchresults.php and look for the following code within line 10:

<img border='0' width='80' src='<?php print $product["image_url"]; ?>' alt='<?php print htmlentities($product["name"],ENT_QUOTES,$config_charset); ?>' />

...and REPLACE with:

<img border='0' width='80' src='<?php print $product["image_url"]; ?>' alt='<?php print htmlentities($product["name"],ENT_QUOTES,$config_charset); ?>' title='<?php print htmlentities($product["name"],ENT_QUOTES,$config_charset); ?>' />

Merchant logos aren't include in search results by default but if you're not sure how to add the alt and title tags to merchants logos in search results let me know the code you're currently using and I'll describe the change for you...

Hope this helps!

Cheers,
David.
--
PriceTapestry.com

Submitted by MikeyC on Sat, 2012-12-01 10:31

Thanks David, worked out great !

Submitted by MikeyC on Sat, 2012-12-01 11:10

Very Neat, i can even add the description from the product on the featured page when i hover with my mouse over an image.

Submitted by MikeyC on Sun, 2012-12-02 11:56

How do i add this to the merchant page ? I tried it by adding it to atoz.php on line 49, but all my links in the categories.php and brands.php went awol on the frontend pages. Merchants page looked good though. :-)
Do i adjust the merchants.php file for this ?
I want to display the merchant logo, with the merchant text when hoovering over it, and also the merchant text link.

Submitted by support on Sun, 2012-12-02 12:07

Hi Mikey,

In html/atoz.php original code at line 49:

    print "<img src='".$item["logo"]."' border='0' />";

...REPLACE with:

    print "<img src='".$item["logo"]."' border='0' alt='".htmlspecialchars($item["name"])."' title='".htmlspecialchars($item["name"])."' />";

Cheers,
David.
--
PriceTapestry.com

Submitted by MikeyC on Sun, 2012-12-02 12:30

Thanks, it worked.
To be able to add the text link i replaced the else statement with "print "<p>";
(Just posting this if someone else wants to implement this mod.)