How to Add Alt Text to Images in a Sidebox?

[ScriptJunkie]

[FONT=Verdana] Hi everyone,

I'm posting my question in this section of the forum because it has more to do with adding alt text to images that don't have pre-written defines than it has to do with the Mod itself.

I did find another thread on the forum that addressed this, but it was related to images that are also links, so it was a simple matter of adding the alt="text goes here" code to the link.

Since the images in question are not links, that won't work for me either. The images in question are in the credit card accept sidebox. See that here: www.empowermentsanctuary.com/marketplace/

[/FONT] [FONT=Verdana]Here's my question:[/FONT][FONT=Verdana]

What do I need to add to this line of text

[/FONT] [FONT=Verdana] '<img id="ccMC" class="cc_img" src="images/cc_logos/logo_ccMC.gif" />' . "\n" .[/FONT][FONT=Verdana]

found in the file [/FONT] [FONT=Verdana]includes/templates/MY_TEMPLATE/sideboxes/tpl_cc_accept.php[/FONT][FONT=Verdana]

in order to get the text "MasterCard" to show up on mouse-over in the credit card accept sidebox? (I actually need to do this for all the images, but I just need the one example to get me started).

I know it involves adding the php equivalent to an html alt tag, but I don't know the syntax for adding it to a php file.

I've looked at the code for other sideboxes for an example, but they use define language for the alt text, so I can't follow that as an 'example map'.

I need to know how to add an alt tag in PHP for files that don't have any define language for graphics.[/FONT]

[FONT=Verdana]I need to be able to do the same thing for the payment method images on the payment method section of the step 2 of 3 checkout page (the payment info page).[/FONT]

[FONT=Verdana]Since the images from this page come from a different file than those that are in the sidebox, I assume I'll need to make the changes to both [/FONT][FONT=Verdana]tpl_cc_accept.php file and the [/FONT][FONT=Verdana]tpl_checkout_payment_default.php files.

Is that correct?[/FONT]

[FONT=Verdana] Thanks in advance for the help![/FONT]

[Kim]

<img id="ccMC" class="cc_img" src="images/cc_logos/logo_ccMC.gif" />

that is still just an image search - add the alt="my text here" to like this -

<img id="ccMC" class="cc_img" src="images/cc_logos/logo_ccMC.gif" alt="my text here" />

[ScriptJunkie]

Wow! Thanks for the fast response Kim!!

It didn't work though

Here's the code:

$content = '';
$content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n";
$content .= '<img id="ccVisa" class="cc_img" src="images/cc_logos/logo_ccVisa.gif" alt="Visa" />' . "\n" .
'<img id="ccMC" class="cc_img" src="images/cc_logos/logo_ccMC.gif" alt="MasterCard" />' . "\n" .
'<img id="ccAmex" class="cc_img" src="images/cc_logos/logo_ccAmex.gif" alt="American Express" />' . "\n" .
'<img id="ccDiscover" class="cc_img" src="images/cc_logos/logo_ccDiscover.gif" alt="Discover Card" />' . "\n" .
'<img id="ccPaypal" class="cc_img" src="images/cc_logos/PayPal_mark_37x23.gif" alt="PayPal" />' . "\n".
'<img id="PayPalVerified" class="cc_img" src="images/cc_logos/ppslv2.gif" alt="We are a PayPal Verified Vendor" />' . "\n";
$content .= '</div>' . "\n";
?>

I can't see what I did wrong here?

[Kim]

Yes it did ...

<div id="navColumnOneWrapper" style="width: 165px"><!--// bof: ccaccept //-->
<div class="leftBoxContainer" id="ccaccept" style="width: 165px">
<h3 class="leftBoxHeading" id="ccacceptHeading">We Accept ...</h3>
<div id="ccacceptContent" class="sideBoxContent">
<img id="ccVisa" class="cc_img" src="images/cc_logos/logo_ccVisa.gif" alt="Visa" />
<img id="ccMC" class="cc_img" src="images/cc_logos/logo_ccMC.gif" alt="MasterCard" />
<img id="ccAmex" class="cc_img" src="images/cc_logos/logo_ccAmex.gif" alt="American Express" />
<img id="ccDiscover" class="cc_img" src="images/cc_logos/logo_ccDiscover.gif" alt="Discover Card" />
<img id="ccPaypal" class="cc_img" src="images/cc_logos/PayPal_mark_37x23.gif" alt="PayPal" />
<img id="PayPalVerified" class="cc_img" src="images/cc_logos/ppslv2.gif" alt="We are a PayPal Verified Vendor" />
</div>
</div>

[ScriptJunkie]

Maybe it's me?

I see the same code you do when I look at the site with Firebug, but when I mouse over the images, no Alt Text appears on my screen.

I closed the window, cleared by cache & cookies, closed the browser and relaunched, and I still don't have any Alt Text on mouseover.

The reason this is important is because my business partner is blind. Alt Text allows her to "see" the images.

Suggestions?

Do these images need to be links in order to have the Alt Text appear on mouseover?/

If so, how would I need to edit that line of code to convert the images to links?

[Kim]

FF doesn't "do" alt text - if you want little "popups" then you need title tags -

Exactly what are you trying to accomplish?

[ScriptJunkie]

Ahhh ok. When I switched over to IE, I see the text just fine. I didn't realize FF doesn't do alt text on mouseover for non-link images.

In terms of what I'm trying to accomplish, I just want to make sure every image on the site is accessible to screen readers so my business partner and other visually impaired folks can 'see' them.

[Kim]

The core program should put alt tags on all of the foreground images, if you run across any that don't please let us know.

[ScriptJunkie]

Ya, I've noticed that and it's awesome!! It's just the occasional non-product images I add that need the extra coding. There aren't many of them thankfully.

Knowing that this was a FF thing was a nice piece of info. Going forward, I can test my Alt Text on IE for any images I add.

Thanks so much for your help!