аватар |

Статьи / 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)
30 сентября 2013 12:27 Асинхронная загрузка изображений на сервер (скрытый IFRAME)
17 сентября 2013 11:52 Как сделать смену (ротацию) изображений на Java Script?
26 августа 2013 11:08 Как запретить копирование текста с сайта?
18 сентября 2013 12:28 Исчезающий текст в поле input и textarea на JavaScript


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