Появилась задача сделать увеличивающиеся в размерах изображения при наведении курсора мыши.
Скачиваем и распаковываем архив. Файлы jquery-1.6.1.min.js и zoomi.js
Скопируйте файлы в удобную для Вас папку на сервере. Откройте файл index Вашего сайта или страницы на которой нужен эффект и сделаете ссылки на файлы которые вы скопировали. Приблизительно так
<script type="text/javascript" src="/jquery-1.6.1.min.js"></script> <script type="text/javascript" src="/js/zoomi.js"></script>
Теперь что бы скрипт с работал можно использовать 2 способа:
1. Присвоить тегу img атрибуты class=»zoomi» и alt=»url» — Скрипт будет увеличивать изображение с классом zoomi и брать картинку по адресу alt=»image2.jpg».
Пример:
<img class="zoomi" src="image1.jpg" alt="image2.jpg">
2. Этот способ на мой взгляд более практичный достаточно присвоить класс zoomi и установить размеры width и height меньше чем размер самой картинки.
Пример:
<img class="zoomi" src="image.jpg" width="180">
По существу первый способ можно использовать для подмены одной картинки на другую. Как применять данный скрип решать Вам. Все зависит от Вашей фантазии.