аватар |

Статьи / 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>


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



Распечатать
Похожие статьи
06 февраля 2013 19:07 Кнопка распечатать страницу JavaScript print()
04 февраля 2013 13:56 Конфликт событий onLoad и window.onload
31 января 2013 13:58 Как добавить сайт в закладки избранное? JavaScript
18 сентября 2013 12:28 Исчезающий текст в поле input и textarea на JavaScript
16 апреля 2013 12:45 Текущая дата (день, месяц, год) скрипт JS


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