将标签图标挂在图像上

时间:2012-02-12 21:25:08

标签: javascript html css tabs image

我想在图库中显示的图像的底部边框放置某种标签。此选项卡应与图像边框相邻,没有一个像素空间。

然后单击此选项卡将触发一个小的java脚本以显示div #Metadata

的内容
function showMetadata()
{document.getElementById("Metadata").style.display="block";}

显示的div #Metadata包含一个“关闭”#Metadata显示的按钮。

function hideMetadata()
{document.getElementById("Metadata").style.display="none";}

上述两个功能正常。

我遇到的问题是将该标签图标“挂钩”到xhtml中的图像。每页图像的数量和大小各不相同,因此使用CSS中的像素值进行定位不是解决方案。

我认为这个问题已经解决了 - 我只是不知道解决方案。

也可能有一种聪明的方式,例如。使用jquery。

感谢您的回复。

1 个答案:

答案 0 :(得分:1)

你能把图像放在div容器中吗?这样你就可以在图像下面添加一个绝对定位的“标签”。

http://jsfiddle.net/86hWH/1/