我们正在制作一个图像轮播,它会显示可点击的缩略图,点击这些缩略图会显示实际图像。因此,我们需要两个url出现在Html中。由于img标签中没有定义“actualImageUrl”属性,我们发现我们可以像这样建立缩略图网址:/thumb.png?altUrl=actualImageUrl.png
。服务器不关心actualImageUrl查询字符串参数,我们可以使用javascript来解析scr属性并找出actualImage Url。
W3C的有效性如何?
答案 0 :(得分:2)
更改src
属性的网址完全有效 - 但您可以使用data-
属性 - 新建HTML5(虽然该doctype不是使用它们的要求),其目的正是如此这,来自规格:
自定义数据属性旨在将自定义数据存储为页面或应用程序的私有数据,而没有更合适的属性或元素。
w3 specs for custom attributes
注意 - 您可以test validation here
答案 1 :(得分:1)
任何有效的src
属性值,在XHTML中意为“有效”(正式的东西)。在这样的值中使用查询部分并在客户端脚本中使用它也是正确的。
但它可能不必要地复杂化。在使用客户端JavaScript时,可以将URL包含在JavaScript数组或对象中,而不是将它们放在HTML标记中的任何位置。例如,您可以将具有缩略图图像URL的对象用作属性名称,将完整图像URL用作相应的值,例如
var fullImage = { 'thumb.png': 'actualImageUrl.png', ... }
然后,当您点击缩略图时,您将使用此对象获取完整图像URL。
对于更强大的解决方案,即使禁用JavaScript也可以使用,您需要生成代码服务器端,在a
个元素周围生成img
个元素。