Подключите значок табуляции к изображению

Question

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

Щелкнув затем вызвать небольшую Java-скрипт, чтобы отобразить содержимое сНа #Metadata

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

сНу #Metadata отображается содержит кнопку «закрыть», на дисплее в #Metadata.

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

Эти две функции выше работают нормально.

Проблема заключается в том, чтобы «перехватить» этот значок табуляции изображениям в xhtml. На странице изображения различаются по количеству и размерам, поэтому позиционирование с использованием значений пикселей в CSS не является решением.

Я предполагаю, что эта проблема решена - я просто не знаю о решении.

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

Спасибо за ответы.

Answer 1

Можете ли вы поместить изображения в контейнер div? Таким образом вы можете просто добавить абсолютно позиционированную «вкладку», установленную под изображением.

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