图像顶部的可点击图像

Question

我有一个页面，我们可以看到一些图像，在gridview（如）

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

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

Answer 1

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

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

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

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

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

希望这可以帮助！

Answer 2

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