Показать/скрыть изображение с помощью JavaScript

У меня есть HTML-страница с изображением, которое я установил невидимым с помощью CSS visibility: hidden. Я хочу сделать ссылку под названием "Показать изображение", чтобы при нажатии на нее изображение появлялось.

Теперь я не знаю, как сделать такую ссылку, так как обычно ссылка с <a href=...> ссылается на какую-то другую страницу. В моем случае я хочу, чтобы ссылка вызывала JavaScript для отображения изображения.

Программирование
javascript html
10-го марта 2013 в 2:52
31 просмотров
Решение

Если у вас уже есть функция 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>
Комментарии (1)

Все очень просто.

HTML:


<a id="showImage">Show image</a>

JavaScript:

document.getElementById("showImage").onclick = function() {
    document.getElementById("theImage").style.visibility = "visible";
}

CSS:

#theImage { visibility: hidden; }
railgun
Редактировал ответ 26-го июня 2017 в 3:51
Комментарии (2)

Вот рабочий пример: http://jsfiddle.net/rVBzt/ (с использованием jQuery)



<a id="toggle">click to toggle</a>

img {display: none;}

a {cursor: pointer; color: blue;}

$('#toggle').click(function() {
    $('#tiger').toggle();
});
Комментарии (0)