我编写了一个用于显示图像的自定义灯箱。单击图像并打开灯箱后,我想要显示该图像的说明。我试图以最干净,最有效和最恰当的方式存储描述,但我无法决定应该做什么。
我考虑过使用自定义数据属性,但我发现了这个:
“自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据,而没有更合适的属性或元素。”
所以data-picinfo或其他一些自定义数据字段似乎可能不合适?或者它是否完全合适,因为我的灯箱应用程序将访问必要的数据字段以显示正确的信息?
<img src="exampleimage.jpg" width="140" height="105" name="cool-image" data-picinfo="this was a beautiful day hiking the mountains"/>
完成我想要做的事情的最佳和最恰当的方法是什么?
答案 0 :(得分:1)
我会使用'alt'属性进行图像描述。 Alt文本不仅可以确保图像标记符合W3C的可访问性标准,而且还可以用于您正在尝试完成的任务。
示例:
<img src="exampleimage.jpg" width="140" height="105" name="cool-image" alt="this was a beautiful day hiking the mountains" />
此时您可以存储该描述以便稍后在javascript变量中显示,如下所示:
var imgDescription = document.getElementsByTagName('img')[0].getAttribute("alt");
希望有所帮助!
答案 1 :(得分:0)
根据您的需要,我认为没有更简洁的方法可以做到这一点,而您的灯箱需要从其他属性获取描述,例如data-title
<img src="exampleimage.jpg" width="140" height="105" name="cool-image" data-title="this was a beautiful day hiking the mountains" />
这有何帮助:)
答案 2 :(得分:0)
在技术方面,title
属性最接近“描述”。但真正重要的是你在那里有什么样的信息,你打算如何使用它,以及它是否对你的特殊用途有用。
还有辩论的,很少使用的longdesc
属性应该提供“长描述”的链接,但主要是为了可访问性目的(特别是对于根本看不到图像的人),它不包含在HTML5 CR中。