图像顶部的可点击图像

时间:2011-12-06 05:12:13

标签: html php image

我有一个页面,我们可以在gridview(如)中看到许多图像

我希望用户能够删除它们;我想在每张图片的右上角放一个小X图像。最好的方法是什么?

我尝试使用Image Map但我无法设置图像,只能设置链接。

2 个答案:

答案 0 :(得分:4)

您必须将其放在原始图像上。这是一个简单的例子:

http://jsfiddle.net/QPr5U/1/

我制作了一个图标列表,其中每个图像都在其自己的li元素中。它可以是div或其他任何东西,只要每个图像都被另一个元素包装,并且列表在语义上是最正确的。 与每个图像一起是宽度和高度为16px的链接和十字形的背景图像。

诀窍是图像周围的元素有一个position: relative。这意味着li元素中具有位置的任何内容都相对于li的边界。 因此,如果我现在为.cross元素提供一个position: absolute,其顶部和右侧值为2px,这意味着十字形将位于列表项顶部和右侧2px处。

我做的最后一件事是给lidisplay: inline-block,使它们不跨越页面的整个宽度,而只是它们内部的内容宽度。如果你知道每张图片的宽度,你也可以给li一个固定的宽度。

希望这有帮助!

答案 1 :(得分:0)

将单个图像保留为任何div的背景图像,然后在div上设置交叉图像