Скрипт — увеличение изображения при наведении мышки

Скрипт для увеличения изображения на сайте по наведению курсора на изображениеВсем приветик!

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

Данный скрипт может добавить вашему сайту привлекательности. Вот например если навести курсор на изображение карты сайта в header оно увеличится =) .

Еще добавлю, что этот скрипт подойдет любому сайту, не только Joomla.

Для начала скачайте файлы скрипта и залейте их в какую нибудь папку на сайте:

  1. imagesize.css
  2. imagesize.js

Подгружаем скрипты в index.php, в <head> </head>

<link rel=«stylesheet» href=«Путь к файлу /imagesize.css» type=«text/css» />

и

<script type=«text/javascript» src=«ПУТЬ К ФАЙЛУ/imagesize.js»></script>

Теперь самое интересное — Вставка изображения в любое место сайта

Чтобы вставить изображение, которое будет увеличиваться по наведению курсора, необходимо заключить вызов изображения в DIV контейнер в таком виде:

<div> <img class=«expando» border=«0» src=«Путь к файлу /blue_sky.jpg» width=«150» height=«110»> </div>
Расшифруем:
class=»expando» — зарегистрированный клас для изображения;

border=»0″
— толщина обводки изображения;

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


 

Лично мне очень понравился данный скрипт и он нашел свое применение на моем сайте. Надеюсь и вам он понравится.

Вы можете оставить комментарий, или ссылку на Ваш сайт.

Оставить комментарий