Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта.

Предлагаю вам способ увеличения картинки на сайте без использования каких-либо скриптов, а исключительно с помощью html.

Такой способ увеличения изображения на сайте позволит читателю быстро посмотреть картинку, ведь вашему сайту не надо будет дополнительно делать загрузку скриптов.

Увеличение изображения на сайте

1 способ – увеличение изображения на сайте при наведении курсора

Очень простой, ну наипростейший способ, честное слово. Надо добавить следующий код к свойствам картинки:

onmouseover="this.style.width='значение ширины большого изображения px'" onmouseout="this.style.width='значение ширины маленького изображения px'"

Полностью это будет выглядеть так

<img src="ссылка на изображение" style="width:значение маленького изображения px;" onmouseover="this.style.width='значение ширины большого изображения px'" onmouseout="this.style.width='значение ширины маленького изображения px'" />

увеличение изображения на сайте

<img class="aligncenter" src="http://vkpluss.ru/wp-content/uploads/2015/02/киска.jpg" style="width:328px;" onmouseover="this.style.width='1000px'" onmouseout="this.style.width='328px'" alt="увеличение изображения на сайте" />

Вот результат и код для картинки с киской.
При наведении курсора мыши картинка увеличивается.
Надеюсь, вы понимаете, что все это делается в текстовом редакторе.

2 способ – увеличение картинки на сайте при клике мыши

Способ аналогичный, просто onmouseover надо заменить onclick. К свойствам картинки добавляется следующий код:

style="width: 'значение ширины маленького изображения px;
border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px '" onmouseout="this.style.width='значение ширины маленького изображения px'" 

Полностью это будет выглядеть так

<img src="ссылка на изображение " style="width: 'значение ширины маленького изображения px;
border:2px solid black;" onclick="this.style.width=значение ширины большого изображения px '" onmouseout="this.style.width='значение ширины маленького изображения px'" />

увеличение картинки на сайте

<img class="aligncenter" src="http://vkpluss.ru/wp-content/uploads/2015/02/киска.jpg" style="width:150px;
" onclick="this.style.width='auto'" onmouseout="this.style.width='150px'" alt="увеличение картинки на сайте"/>

Вот результат и код для картинки с киской.
При клике мыши картинка увеличивается до размеров оригинального изображения или заданных вами. Для уменьшения размеров, то есть вернуть картинку в исходный размер, просто кликните в любое место страницы.

Надеюсь вам не показалось сложным использовать такие способы – с помощью html – сделать увеличение изображения на сайте.

Вообще, я считаю, многое веб-мастера не ограничиваются просто использованием какого-либо движка и применяют html-коды на своих сайтах.

Читайте также:

НадеждаСкрипты и кодыувеличение изображения на сайте,увеличение картинки на сайте
Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным количеством фотографий или каких-либо картинок. Мой блог не такой. И, как обычно, я иду по пути наименьшего затрат времени, знаний и ресурсов своего сайта. Предлагаю вам способ увеличения...

Возможно Вас также заинтересует:

Убираем с главной страницы и RSS записи рубрики
Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.   
Хлебные крошки на сайте wordpress
Хлебные крошки на сайте - что это и как сделать? 
Как сделать тень у текста за 5 минут
Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста. 
Как сделать кнопку скачать с помощью кода css
Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.
Как сделать кнопки вверх вниз для сайта
Эта статья написана в продолжение статьи о том, как сделать кнопку вверх для сайта.
Как добавить кнопки социальных сетей
В этой статье просто хочу поделиться скриптом, который устанавливается на сайт и в результате добавляются красивые кнопки социальных сетей, передвигающиеся вслед за просмотром. Вдруг кому-то ...
Как убрать автора поста wordpress
Данная статья посвящена теме как убрать автора в статье или на странице wordpress.  Причем, убирать автора вордпресс будем способом правки кода шаблона. 
Вывод php кода в блоге на WordPress
Эта тема, наверно, будет интересна для веб мастеров, которым надо в запись вставить php код.