Как сделать так,чтобы при нажатии на изображение,на этой же странице высвечивался блок с описанием этого изображения?
2 ответа
Это можно сделать на чистом 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 плюсик .КЛАСС + .ВТОРОЙ
между классами означает "выдели тот класс .ВТОРОЙ, который находится непосредственно после .КЛАСС"
<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>
Жуквери не забудь подключить
-
почему в консоли пишет welcome.html:59 Uncaught ReferenceError: toggledescription is not defined at HTMLImageElement.onclick (welcome.html:59) onclick @ welcome.html:59? Commented 4 окт. 2018 в 13:30