аватар |

Статьи / JavaScript /

Как открыть изображение в новом окне?

Вы наверное сталкивались с проблемой открытия больших изображений? В рамках сайта это не всегда удобно, так как либо необходимо использовать скрипт галереи, либо перекрывать изображением контент. Указанный в статье скрипт позволяет при нажатии на изображении открыть его в новом окне в полном размере. Это удобно при просмотре больших изображений: карт, макетов и тд.

Попробуйте кликнуть по изображению в демонстрации.

Демонстрация Скачать исходники


Код JavaScript (вставлять между тегами <head> и </head>):

<script type="text/javascript">
  function openImageWindow(src) {
    var image = new Image();
    image.src = src;
    var width = image.width;
    var height = image.height;
    window.open(src,"Image","width=" + width + ",height=" + height);
  }
</script>


Код HTML (вставлять между тегами &lt;body&gt; и &lt;/body&gt;):

<div>
 <img src = 'images/javascript/foto4.jpg' alt = 'Фото' width = '200' onclick = 'openImageWindow(this.src);' />
</div>


Удачи и успехов!
 



Распечатать
Похожие статьи
22 июля 2015 14:08 Как снять выбор (check) с радио-кнопки (radio button)
18 сентября 2013 12:28 Исчезающий текст в поле input и textarea на JavaScript
22 апреля 2013 14:41 Как запретить скачивание изображений с сайта?
10 февраля 2015 19:10 Как сжать или закодировать JavaScript? Онлайн сервисы
04 февраля 2013 13:56 Конфликт событий onLoad и window.onload


Комментарии к статье (vk.com)