How do I prevent alt text appearing when hovering over an image?

Question

I've tried adding title="" but my alt text still appears when I hover over the photos in FF and Safari...

Anything else I can try?

Here's my example page:

http://ianmartinphotography.com/test-site/wedding-01/

Thanks!

Answer 1

Okay! My bad--I'm using Mootools Slideshow2 http://code.google.com/p/slideshow/ The show defaults to having titles on, it converts alt text into titles. I simply changed titles from "true" to "false" in slideshow.js and the problem is solved. I feel a bit silly, I should have thought of that right away. Thanks for your attention everyone!

Answer 2

You have to affect the ALT tag, not title.

Your image tag looks like this:

<img src="photos/half-moon-bay-wedding/bride-ready-for-wedding.jpg" title="" alt="Bride ready for wedding in black and white." style="position: absolute; display: block; z-index: 0; height: 467px; width: 730px; left: 0px; top: 0px; visibility: visible; zoom: 1; opacity: 1; " height="467" width="730">

This is what cause you trouble:

title="" alt="Bride ready for wedding in black and white."

Or perhaps saying; That's what cause you an fully expected result!

Answer 3

It is not the alt attribute what causes your problem. It is the following:

<a href="#slide-0" title="Bride ready for wedding in black and white."><img src="photos/thumbnails/bride-ready-for-wedding.jpg" title="" alt="" style="display: none; position: absolute; z-index: 1; "><img src="photos/half-moon-bay-wedding/bride-ready-for-wedding.jpg" title="" alt="Bride ready for wedding in black and white." style="position: absolute; display: block; z-index: 2; height: 467px; width: 730px; left: 0px; top: 0px; visibility: visible; zoom: 1; opacity: 1; " height="467" width="730"></a>

Images are inside anchors, and the links get a title attribute which gets shown.

Answer 4

I'm assuming it's related to the jQuery your using for the "display box", perhaps read over the readme or something. However, I noticed this in your code

<img id="slide-0" src="photos/half-moon-bay-wedding/bride-ready-for-wedding.jpg" alt="Bride ready for wedding in black and white." title=" "  /></a> 

Why do you have </a>? There is no hyperlink that needs to be closed.

Update After looking over your code I found this line

var caption = $pick(img.get('alt'), img.get('title'), '');

(located in http://ianmartinphotography.com/test-site/wedding-01/js/slideshow.js) Try removing (img.get('alt'), see if that helps