Авторизация
Подписчики
0
Плавная смена изображения при наведении JavaScript.
Описание
После данного урока вы сможете добавлять к вам на сайте красивое дополнение "Плавное смена изображения при наведение".
В данном уроке я покажу как сделать плавную смену изображения при наведения используя JavaScript.
Первым делом создаем файл pictures.js с содержанием:
$(document).ready(function(e){
var elhover =$('#images a')
$(elhover)
.append('<div class="fake-hover"></div>').each(function() {
var $shover = $('> .fake-hover', this).css('opacity', '0');
$(this).hover(function () {
$shover.stop().fadeTo(400, 1);
}, function () {
$shover.stop().fadeTo(400, 0);
});
});
});
Где #images наш элемент с картинкой.
Дальше нам надо подключить JS скрипт к сайту. Заливаем наш pictures.js в папку js на хостинг.
И между тегами:
<head> </head>
Вставляем
<script src="js/pictures.js" type="text/javascript"></script>
Теперь создаем стиль для нашей картинки.
Между тегами:
<head> </head>
Дописываем:
<style type="text/css">
#images {
background-image: url('images/pictures1.png');
width:150px;
height:150px;
display:block;
}
#images .shover{
background-image: url('images/pictures2.png');
width:150px;
height:150px;
}
</style>
Где images/pictures1.png адрес первоначальной картинки, а images/pictures2.png адрес картинки которая появится при наведение.
И осталось последние в нужном месте на сайте (html, tpl) добавляем:
<div id="images"> <a href="index.php" title="Картинка"></a> </div>
Рекомендуемые комментарии
Комментариев нет