为什么<img> alt属性并不总是正确显示

Question

所以我有这个php脚本，它输出一个html表，其中包含一些文件的数据(如文件名、文件大小等)。

我有一个javascript函数，当你悬停一个属于“预览”类的标签时，它会显示图片。例如，如果文件名为: somePic.jpg，当您将鼠标悬停在表中的somePic.jpg上时，该图片将出现在鼠标旁边。

现在并不是所有这些文件都是图片，有些是.mp3，所以当你悬停它们时，javascript不能显示图片。为了处理这种情况，我在标记(由javascript函数生成)中添加了一个alt属性: alt='Preview not available for this content.‘’。

这就是我的问题，它有时有效，但有时不起作用！有时您开始悬停.mp3链接，并显示alt属性，然后您悬停图片，显示图片，然后再次悬停.mp3，alt将不再显示，而是显示“破碎的图像”图像(小红叉)。

当然，我可以解析文件名并检测它是否是mp3，然后处理这种情况，但我认为alt属性应该可以实现这一点……但它有很多缺陷...

有什么想法吗？有没有人已经面临过这个问题？

Answer 1

通常，alt用于禁用图像时，而不是作为错误条件的后盾。虽然在错误条件下显示alt文本是一个理想的特性，但标准并没有说必须：

对于无法显示图像、表单或小程序的用户代理，此属性指定替代文本。

事实上，浏览器的行为各不相同。WebKit (Safari，Chrome)只会显示一个破碎的图像图标，而不会显示alt文本；IE会尝试在带有图像图标(通常显示效果不佳)的框中呈现alt文本。

因此，您不应该依赖于错误时显示的alt文本。

确定我可以解析文件名并检测出它是否是mp3

是的，我想你必须这样做。这在一般情况下也是不可能的，因为文件名/URL扩展名可能与实际的文件类型无关。但是，如果您自己控制所有的MP3s，则可以保证所有的URL都称为...mp3。

Answer 2

您似乎混淆了alt属性和title属性。

alt属性是一个img-specific属性，用于在图像无法呈现的情况下指定要呈现的替代内容。title是一个常规属性，用于在将鼠标悬停在元素上时提供工具提示。

一些损坏的UAs cough_IE_cough将alt视为图像上的title；这是造成许多混淆的根源。

Answer 3

让PHP检测文件类型，让它只在图像上内联呈现javascript，怎么样？

您还应该查看FireBug，并查看当您将鼠标悬停在图像上时发生了什么。