Как сделать изображение ссылкой и расположить на изображении еще определенное колл-во ссылок?

Question

[Дмитрий Вяткин]

<div class="">
                    <a href="" class="">
                        <div class="">
                           
                        </div>
                        <img class="img-responsive" src="http://placehold.it/292x292">
                        <div class="text-bottom text-center">
                            Отзывы|Стоимость
                        </div>
                    </a>
                </div>

Как в данном случае Отзывы и Стоимость сделать ссылками?

Answer 1

[Андрей Федоров]

<div class="" onclick="javascript:location.replace('[ваш путь]');">

а отзывы и стоимость сделайте обычными ссылками

Answer 2

[Кирилл]

изображение ссылкой
<a href=#><img src></a>
и с помощью тега map можно сделать на изображении ссылки

Answer 3

[Max]

если есть возможность изменить верстку - сделать два блока, в каждый закинуть задником картинку и сделать отступ padding:146px или стандартно picture / img , ссылку целиком на блок. <- плюс к адаптивности.
Если надо чтобы смотрелись рядом, все margin'ы убираем и текст в первом случае справа, во втором слева.

Если делать на изображении две ссылки - пользователь не поймет.

мой вариант:

<div class="row">
  <a href="...">
    <div class="item item-1">
       <img src="...">
       <!-- вариант 1--> 
      lorem ipsum
      <!-- вариант 2 -->
       <p class="item-text">some text</p>
    </div>
  </a>
  <a href="...">
    <div class="item item-2">
       <img src="...">
       <!-- вариант 1--> 
      lorem ipsum
      <!-- вариант 2 -->
       <p class="item-text">some text</p>
    </div>
  </a>
</div>

Answer 4

[Dark Hole]

Неясно, зачем нужно ставить href на а. достаточно Отзывы|Покупки

Comments

[Max]

тут вопрос про ссылку на картинку, а неясного много, верстка к примеру:)