0

Как сделать так,чтобы при нажатии на изображение,на этой же странице высвечивался блок с описанием этого изображения?

0

2 ответа 2

3

Это можно сделать на чистом CSS, если не принципиально, чтобы описание сохранялось до тех пор, пока на картинку не нажмут еще раз. Через CSS:focus - фокус выполняет указанные условия до тех пор, пока элемент активен. Как только кликнут где-нибудь в другом месте - пропадет.

ДЕМО

<button class="HINT"><img src="..."></button>

<div class="BUBU">Описание всякого</div>

Добавлена кнопка <button>, потому что она поддерживает фокус, а картинка - нет. К описанию изначально приписывается невидимость:

.BUBU { display: none; }

А при клике на кнопку-картинку, добавляется видимость и дальнейший стиль:

.HINT:focus + .BUBU {display: inline-block;
                     position: absolute;
                     margin-top: 50px;
                     margin-left: 20px;
                     background-color: rgb(235, 160, 15);
                     padding: 5px;
                     border: 3px solid #800000;
                     box-shadow: 0 0 0 2px white,0 0 0 3px #800000;
                     cursor: pointer;}

Абсолютная позиция позволяет свободно играть с margin и перемещать табличку куда надо, не задевая другие элементы на странице. А последние пять строчек добавлены чисто ради красоты, не обязательны.

Ну и, тоже для красоты, не обязательная стрелочка:

.BUBU:before {content: "◄"; 
              color: #f36700; 
              position: absolute;
              font-size: 50px;
              margin-left: -50px;
              margin-top: -20px;}

Точно также можно сделать всплывающее описание при наведении мышки. Код всё тот же, только заменить :focus на :hover

P.s. в CSS плюсик .КЛАСС + .ВТОРОЙ между классами означает "выдели тот класс .ВТОРОЙ, который находится непосредственно после .КЛАСС"

0
<style>
    .hidden {
        display: none;
    }
</style>    

<img src="/img.jpg" descSelector="#somedesc" onclick="toggledescription(this)" />
<div id="somedesc" class="hidden">Image description</div>

<script>
    function toggledescription(el) {
        var selector = el.getAttribute('descSelector');
        $(selector).toggleClass('hidden');
    }
</script>

Жуквери не забудь подключить

1
  • почему в консоли пишет welcome.html:59 Uncaught ReferenceError: toggledescription is not defined at HTMLImageElement.onclick (welcome.html:59) onclick @ welcome.html:59? Commented 4 окт. 2018 в 13:30

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.