Тест S5 Box

Вот примерно так работает модуль в реале...

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

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

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

Данный скрипт может добавить вашему сайту привлекательности. Вот например если навести курсор на изображение карты сайта в 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 указывают какой размер картинки показывать. После наведения курсора изображение увеличится до своего реального размера.


 

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

Комментарии   

 
Даниил
0 #1 Даниил 12.08.2013 15:17
Все бы хорошо, только увеличенное изображение не перекрывает иконки и текст на странице. Знаете как отрегулировать скрипт?
 
cs-nsk

Последние комментарии

Теги ...

Опрос: iOS или Android ?

Какой ОС вы чаще пользуетесь?

iOS - 0%
Android - 60%
Windows Mobile - 20%
Tizen - 0%
Другая. - 20%

Всего голосов: 5
Голосование в этом опросе закончено в: 01 Янв 2017 - 00:00
Яндекс.Метрика Анализ сайта Рейтинг@Mail.ru