Как привязать ссылку только к внешней картинке?

Question

[alex5e]

Необходимо наложить иконку поверх изображения.

#img-upload {width:100%; overflow:hidden;}
#img-upload a {position:relative; float:left; margin:5px;}
#img-upload a span { display:none; background-image:url(/../themes/classic/images/trash_icon.png); background-repeat:no-repeat; width:48px; height:48px; position:absolute; right:-15px; top:15px;}
#img-upload img { border: solid 1px #999; padding:5px;} 
#img-upload a:hover span { display:block;}

<a href="/../themes/classic/images/town_icon.png">
<span></span>
<img class="img-polaroid" width="100" height="113" style="margin-top:5px;margin-left: 3px;" src="http://localhost/upload/temp/53234487ec064_g9gjWDDQ.jpg" rel="lightbox">
</a>

Подскажите, пожалуйста, как изменить код, чтобы ссылка действовала только на иконку, а не на все изображение?

Answer 1

[Alexander Mischuk]

jsfiddle.net/Y6aL6

Comments

[alex5e]

не помогло.. иконка просто не отображается.. (даже при наведении)

[Юрий Лобанов]

@s77lanselot77s да как же это - перейдите на фиддл - все работает. @Mischuk сделал то, что я поленился.

[Alexander Mischuk]

@s77lanselot77s используйте нормальный доктайп

[alex5e]

Заработало. А как сделать, чтобы при расположении нескольких изображений по горизонтали, иконки не сливались у крайнего левого?

[alex5e]

Видимо иконки цепляются не к краю картинки,а к краю div. Как это исправить?

Answer 2

[Юрий Лобанов]

jsfiddle.net/iiil/Y6aL6/5
Сделайте такую разметку, если хотите использовать несколько картинок.

Comments

[alex5e]

Спасибо огромное за помощь)

[Юрий Лобанов]

@s77lanselot77s виноват, а Вы не хотите ответ @Mischuk отметить решением? Он ведь на Ваш вопрос пример писал, а не я.

Answer 3

[Юрий Лобанов]

jsfiddle.net/iiil/S7DYZ/1
Вот Ваш код - объясните, чего хотите. У Вас все, стили и разметка совершенно не отвечают Вашему запросу. Надо переделать и то, и другое.