У меня есть HTML-страница с изображением, которое я установил невидимым с помощью CSS visibility: hidden
. Я хочу сделать ссылку под названием "Показать изображение", чтобы при нажатии на нее изображение появлялось.
Теперь я не знаю, как сделать такую ссылку, так как обычно ссылка с <a href=...>
ссылается на какую-то другую страницу. В моем случае я хочу, чтобы ссылка вызывала JavaScript для отображения изображения.
Если у вас уже есть функция JavaScript под названием showImage
, определенная для показа изображения, вы можете сделать ссылку таким образом:
<a href="javascript:showImage()">show image</a>
Если вам нужна помощь в определении функции, я бы попробовал:
function showImage() {
var img = document.getElementById('myImageId');
img.style.visibility = 'visible';
}
Или, что еще лучше,
function setImageVisible(id, visible) {
var img = document.getElementById(id);
img.style.visibility = (visible ? 'visible' : 'hidden');
}
Тогда ваши ссылки будут:
<a href="javascript:setImageVisible('myImageId', true)">show image</a>
<a href="javascript:setImageVisible('myImageId', false)">hide image</a>
Все очень просто.
HTML:
<img id="theImage" src="yourImage.png">
<a id="showImage">Show image</a>
JavaScript:
document.getElementById("showImage").onclick = function() {
document.getElementById("theImage").style.visibility = "visible";
}
CSS:
#theImage { visibility: hidden; }
Вот рабочий пример:
(с использованием jQuery)<img id="tiger" src="https://twimg0-a.akamaihd.net/profile_images/2642324404/46d743534606515238a9a12cfb4b264a.jpeg">
<a id="toggle">click to toggle</a>
img {display: none;}
a {cursor: pointer; color: blue;}
$('#toggle').click(function() {
$('#tiger').toggle();
});