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

发布于 2024-09-03 04:18:03 字数 537 浏览 4 评论 0原文

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

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

现在并不是所有这些文件都是图片,有些是.mp3,所以当你将它们悬停时,javascript当然无法显示图片。 为了处理这种情况,我在标签(由 javascript 函数生成)中添加了一个 alt 属性:alt='预览不适用于此类内容。'

这是我的问题,有时有效,但有时无效! 有时,您开始将鼠标悬停在 .mp3 链接上,并显示 alt 属性,然后将鼠标悬停在图片上,显示图片,然后再次将鼠标悬停在 .mp3 上,不再显示 alt 属性,而是显示“损坏的图像”图像(小红叉)被显示...

当然我可以解析文件名并检测它何时是 mp3,然后处理这种情况,但我认为 alt 属性应该可以实现这一点...但它有问题.. ?

有什么想法吗 有人已经遇到过这个问题吗?

So I have this php script that output an html table with data about some files (like filename, filesize, etc...)

I have this javascript function that displays the picture when you hover a tag belonging to the class "preview". For example, if a filename is: somePic.jpg, when you hover somePic.jpg in the table, the picture will appear next to your mouse.

Now not all these files are pictures, some are .mp3, so of course when you hover them, the javascript cannot display the picture.
To deal with this case, I added in the tag (generated by the javascript function), an alt attribute: alt='Preview not available for this type of content.'

And here is my problem, sometimes it works, but sometimes it doesn't!
Sometimes you start hovering .mp3 links, and the alt attribute is displayed, then you hover a picture, the picture is displayed, then you hover an .mp3 again, and the alt isn't displayed anymore, but the "broken image" image (the little red cross) is displayed instead...

Sure I could parse the filenames and detect when it's an mp3 and then deal with the case, but I thought the alt attribute was suppose to achieve this... but it's buggy...

Any idea? Does anyone already faced this problem?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

辞旧 2024-09-10 04:18:03

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

alt 属性是 img 特定的属性,用于在图像无法呈现的情况下分配要呈现的替代内容。 title 是一个通用属性,用于在将鼠标悬停在元素上时提供工具提示。

一些损坏的 UA coughIEcoughalt 视为图像上的 title;许多混乱的根源。

It seems as if you are confusing the alt attribute and the title attribute.

The alt attribute is an img-specific attribute to assign alternative content to be rendered in the case that the image cannot be. title is a general attribute used to provide a tooltip when hovering over the element.

Some broken UAs coughIEcough treat alt as title on images; the root of much confusion.

油焖大侠 2024-09-10 04:18:03

一般来说,alt 用于图像被禁用时,而不是作为错误情况的后备。虽然在我看来,在错误情况下显示替代文本是一个理想的功能,但标准并未规定必须这样做:

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

事实上,浏览器的行为各不相同。 WebKit(Safari、Chrome)将仅显示损坏的图像图标,而不会显示替代文本; IE 尝试在带有图像图标的框中呈现替代文本(通常显示效果不佳)。

因此,您不应依赖错误时显示的替代文本。

当然我可以解析文件名并检测它何时是 mp3

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

In general alt is for when images are disabled, rather than as a backstop for error conditions. Whilst IMO it's a desirable feature that the alt text be displayed in error conditions, the standard doesn't say it has to:

For user agents that cannot display images, forms, or applets, this attribute specifies alternate text.

and indeed browser behaviour varies. WebKit (Safari, Chrome) will only display a broken image icon and never the alt text; IE tries to render the alt text inside a box with an image icon (which frequently displays poorly).

So you shouldn't rely on alt text being displayed on error.

Sure I could parse the filenames and detect when it's an mp3

Yes, I think you'll have to. Not that that's possible either in the general case since filename/URL extension may well have nothing to do with the actual file type. However if you control all the URLs yourself you may be able to guarantee that all MP3s are called ...mp3.

笑忘罢 2024-09-10 04:18:03

让 PHP 检测文件类型并让它仅在图像上内联渲染 javascript 怎么样?

您还应该查看 FireBug 并查看将鼠标悬停在图像上时发生的情况。

How about letting the PHP detect the filetype and let it render the javascript inline only on images.

You should also check out FireBug and see what is happening when you hover over the images.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文