Извлечение определенного текста из ссылки, абзаца, заголовка или тега alt и его повторное отображение на той же странице, но в другом месте. - PullRequest
Новая
       7

Извлечение определенного текста из ссылки, абзаца, заголовка или тега alt и его повторное отображение на той же странице, но в другом месте.

0 голосов
/ 20 ноября 2010

Я пытаюсь продублировать / показать текст Java Bean в другой части (под изображением) на той же странице (посетите страницу http://www.miracleflooring.ca/cork.html, чтобы увидеть, как это работает). Прямо сейчас у меня есть информационный заголовок и цена, когда вы наводите курсор на миниатюру, когда мышь отсутствует, информация скрывается.

Мой клиент попросил меня показать заголовок и цену под каждым изображением (каждый div с предметом класса), и я хочу найти способ сделать это без необходимости заново делать вещи вручную для каждого предмета. Есть ли способ сделать это с помощью css / javascript / php (надеюсь, я четко понимаю, что мне нужно делать). 

<div class="item">
     <a href="#"><img src="imgs/products/cork/java-bean.jpg" alt="Java Bean" width="132" height="132" /></a>
     <div class="caption">
          <a href="imgs/products/cork/java-bean.jpg" rel="prettyPhoto[cork]" title="Java Bean">Java Bean</a>
          <p class="price">$4.99 sq-ft</p>
     </div>
</div>

Я знаю, что некоторый код кажется излишним, но это было сделано таким образом, и для его изменения потребуется много работы.

Я понятия не имею, как это сделать, и я все еще не уверен, каков наилучший способ сделать это, но любая помощь очень ценится!

РЕДАКТИРОВАТЬ: Я видел, как karim79 отвечает на что-то, что может помочь, но не уверен, что это то, что мне нужно (как это реализовать тоже) извлекать текст из тега

1 Ответ

0 голосов
/ 20 ноября 2010

Попробуйте это в своем CSS: 

.item {position: relative; margin-bottom: 30px;}
.item .caption {position: absolute; bottom: -20px;}

Это должно подойти достаточно близко, чтобы подстроить его дальше. Поле «margin-bottom» расширит пространство, доступное под каждым элементом, а большее отрицательное «bottom» переместит текст заголовка ниже.

...