A5.ru: конструктор сайтов

A5.ru: создать собственный сайт без лишних затрат и усилий!

Увеличение картинки при наведении мыши – вот такой html код мы рассмотрим в данной статье. Согласитесь, что эффект увеличения картинки, является достаточно полезной функцией  для любого сайта, в контенте которого присутствуют изображения.

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

Увеличение картинки при наведении мыши, широко используется на сайтах, работающих на основе самых разных систем управления сайтом (CMS). Для различных CMS, написаны сотни платных и бесплатных плагинов, которые реализуют эффект увеличения картинки при наведении мыши.

Широкое внедрение эффекта увеличения картинки на многих сайтах в Интернет, показывает, что данный функционал является  популярным  в  сети Интернет и при возможности, этот функционал есть смысл добавить на свой сайт.

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

  Увеличение картинки при наведении с использованием библиотеки jQuery

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

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

Особую популярность  в этом плане на современных сайтах, занимает использование библиотек javascript  Jquery.

Сама процедура подключения и использования библиотек javascript  Jquery следующая,  в контейнере head сайта добавляется ссылка на jQuery библиотеку. Файл библиотеки может находиться как на Вашем сайте, так и на внешнем ресурсе.

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

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

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

Давайте перейдем к конкретному примеру, то есть к html коду, в котором все описанное выше реализовано.

Итак, создадим в любой директории файл с расширением html, например, с именем increase-in-image.html и добавим в эту директорию любую картинку, например с именем Phone.jpg.  Теперь добавим в файл increase-in-image.html, следующий html код:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="https://www.w3.org/1999/xhtml">

  <head>

  <meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />

      <title> Плавное увеличение картинки при наведении  на jQuery </title>

</head>

<body>

<br />

   <div align="center">

       <img src="Phone.jpg" border="1" height="300" width="300" />

    </div>

</body>

</html>

 

Как мы видим, данный html код выводит на страницу браузера картинку. Теперь, чтобы для увеличения картинки  задействовать библиотеку jQuery, скопируем файл библиотеки jquery.min.js в директорию с нашей страницей (библиотеку jquery.min.js и все используемые файлы, можно скачать в архиве по ссылке в конце статьи). Теперь подключим библиотеку в контейнере head, следующим кодом :

<script type="text/javascript" src="jquery.min.js"></script>

Как мы уже отмечали с Вами выше, библиотеку jQuery мы будем вызывать через javascript скрипт, код которого тоже добавим в контейнер head:                   

<script type="text/javascript">// увеличение картинки

  $(function(){

    $('.zoom2').hover(function(){

      $(this).children('img').stop(true,true)

           .animate({width:"900px",height:"700px",left:"-300px",top:"-30px"}, 800);

    },

           function(){

     $(this).children('img').stop(true,true)

   .animate({left:"0",top:"0",width:"300px",height:"300px"}, 800);

  });

  });

  </script>

Данный скрипт, через селектор каскадных таблиц стилей .zoom2, связывает картинку Phone.jpg и библиотеку jquery.min.js.

Чтобы данная связка работала, картинку поместим в div блок с классом .zoom2:

<div class="zoom2">

   <img src="Phone.jpg" border="1" height="300" width="300" />

</div>

А сам класс . zoom2, опишем таблицей стилей, которую так же, добавим в контейнер head файла  increase-in-image.html:

<style>

div.zoom2 { width:300px; height:300px; position:relative; margin:0; left:0; right:0; }

div.zoom2 img { position:relative; cursor:pointer; left:0; top:0; width:300px; height:300px; }

div.zoom2:hover { overflow:visible; visibility:hidden; }

div.zoom2:hover img { visibility:visible; position:absolute; z-index:150; left:0; right:0; }

</style>

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

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

Увеличение картинки при наведении

Скачать архив с рабочими файлами данной статьи можно по ссылке: Рабочие файлы статьи Увеличение картинки при наведении скачать.

Автор: Виктор Милованов

 

Как создать сайт без знания HTML

Как создать сайт без знания HTML

Как создать сайт на WordPress

Как создать сайт на WordPress

CSS для начинающих

CSS для начинающих

Скачать без регистрации