Скрипт увеличивающейся при наведении картинки

Скрипт увеличивающейся при наведении картинки

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

Рассмотрим решение данной задачи с помощью JavaScript-скрипта и библиотеки jQuery.

<html>
 <head>
  <script src="jquery.js"></script>
 </head>
 <body>
  <img src='small.png' onmouseover='bigImage(this, "big.png");' align="left"/>
  <p>Какой-то текст, показывающий, что увеличенное изображение не ломает верстку, а размещается поверх содержимого страницы.</p>

  <div id="big" style="display: none; top: 0px; left: 0px; position: absolute; z-index: 1000;"></div>
  <script>
  function bigImage(obj, fname)
  {
   $("#big").css("left", $(obj).offset().left);
   $("#big").css("top", $(obj).offset().top);
   $("#big").html("<img src='"+fname+"' onmouseout='bigImageHide();'/><br/>");
   $("#big").show();
  }

  function bigImageHide()
  {
   $("#big").hide();
  }
  </script>
 </body>
</html>

Исходная картинка small.png загружается традиционно средствами HTML, но к ней мы добавим событие onmouseover (срабатывающее при наведении мышки), которое будет вызывать написанную нами функцию bigImage();

Для вывода увеличенной картинки на экран, создадим контейнер big, задав ему абсолютное позиционирование поверх других элементов сайта (z-index: 1000).

В функцию bigImage() передаются два параметра - информация о текущем элементе и название увеличенной картинки.

Функция bigImage() задает координаты контейнера big такими же, как и у уменьшенной картинки, после чего в контейнер размещается HTML-код увеличенного изображения. Увеличенное изображение содержит событие onmouseout (срабатывает, когда мышка ушла с объекта), по которому вызывается функция bigImageHide() - скрывающая с экрана контейнер big.

Полезный совет по использованию примера скрипта увеличения картинки:

  • Если вам надо передать ссылку, просто передавайте её третьим параметром в функции bigImage(). В саму функцию bigImage() также следует внести изменения, добавив в HTML-выдачу соответствующий тег <A> с параметром ссылки.

Скачать архив с примером скрипта увеличивающийся при наведении картинки, 54 Кб.

Опубликовать в Мой Мир
Опубликовать в Одноклассники
Опубликовать в Google Plus
Опубликовать в LiveJournal

4 thoughts on “Скрипт увеличивающейся при наведении картинки

  1. попробовал использовать код, ничего не получилось.Что из этих записей 'small.png' "big.png" "+fname+" надо менять в своем случае и на что?

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *