Что нового

Компьютерный форум ПМР. Обсуждение компьютерного железа.

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

Задать вопрос

Создавайте темы, задавайте вопросы и получайте ответы от нашего сообщества

Отвечать

Комментируйте, отвечайте на вопросы и станьте экспертом в своей теме

Связаться с персоналом

Наши специалисты готовы ответить на ваши вопросы

При наведении JavaScript плавно меняется изображение

NevesOma

Администратор
Регистрация
15.07.2012
Сообщения
1 028
Реакции
4
Баллы
0
Местоположение
Чобручи
Сайт
L2J-MOD.RU
1368970321_hardOK_new.png

И так,новый мануал от hardOK!
В этом мануале можно научиться делать плавную смену изображения при наведении и используя для этого JavaScript.
Теперь,первое что нужно сделать это создать к примеру файлик hardOKimages.js в котором должен присутствовать данный код:
HTML:
$(document).ready(function(e){

var elhover =$('#hardOKimage 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);
});
});
});
hardOKimage это наш элемент с нашей картинкой
Потом нам потребуется подключить JS скрипт к сайту,берем и заливаем наш файлик hardOKimages.js в папку js на хостинг
Потом между
HTML:
<head>
</head>
нужно вставить
HTML:
<script src="js/hardOKimages.js" type="text/javascript"></script>
Теперь нам нужно создать определенный стиль для картинки,между
HTML:
<head>
</head>
нам стоило-бы дописать это:
HTML:
<style type="text/css">
#images {
background-image: url('hardOKimage/hardIMG.png');
width:1050px;
height:1015px;
display:block;
}
#images .shover{
background-image: url('hardOKimage/hardIMG_IMG.png');
width:1050px;
height:1015px;
}
</style>
где hardOKimage/hardIMG.png адрес первоначальной картинки а hardOKimage/hardIMG_IMG.png это адрес картинки которая должна появиться после вашего наведения.
Теперь в удобное нам место на сайте /html, tpl/ нужно добавить это:
HTML:
<div id="hardOKimage">
<a href="index.php" title="Изображение!"></a>
</div>

Вот и все,спасибо за внимание :)
 

djon

Тутошний
Команда форума
Регистрация
23.11.2009
Сообщения
6 050
Реакции
58
Баллы
48
Местоположение
г.Тирасполь
красиво придумано
 
shape1
shape2
shape3
shape4
shape7
shape8
Верх Низ