Кликабельное изображение поверх изображения

Question

У меня есть страница, где мы можем увидеть номер изображения, в виде сетки (например)

Я хочу, чтобы пользователь мог их удалить; Я хочу поместить маленькое X-изображение в верхний правый угол каждого изображения. Каков наилучший способ сделать это?

Я пытался с картой изображений, но я не могу установить изображение, только ссылку.

Answer 1

Вам нужно будет расположить его поверх исходного изображения. Вот быстрый пример:

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

Я составил список иконок, где каждое изображение находится в своем собственном элементе li. Это может быть div или что-то еще, если каждое изображение обернуто другим элементом, и список является семантически наиболее правильным. Вместе с каждым изображением есть ссылка шириной и высотой 16 пикселей и фоновое изображение креста.

Хитрость в том, что элемент вокруг изображения имеет position: relative. Это означает, что все, что находится внутри этого элемента li, имеет положение относительно границ li. Так что, если я сейчас назначу элемент .cross position: absolute с верхним и правым значением 2px, это означает, что крест будет расположен на 2px от верхнего и правого элемента списка.

Последнее, что я сделал, это дал li элементы display: inline-block, чтобы они не охватывали всю ширину страницы, а только ширину содержимого внутри них. Если вы знаете, какова будет ширина каждого изображения, вы также можете просто задать li фиксированную ширину.

Надеюсь, это поможет!

Answer 2

сохранить отдельные изображения в качестве фонового изображения любого div, а затем установить перекрестное изображение на этом div