Смена фона страницы при наведении на картинку.

7 Дек
2011


Решил поделиться маленьким но очень удобным в некоторых случаях JS скриптом, написанном на jQuery. Все что делает скрипт — меняет фон страницы, при наведении на картинку.

Сам скрипт JS:

 var bgC="#f1eace";
$(function(){
$(".hoverElement").hover(
function(){
// Меняем фон заданного блока на изображение
$(".bodyClass").css({'background-color':'','background-image':"url("+$(this).attr("href")+")"});
// Делаем элементы, при наведении на которые срабатывает скрипт, полупрозрачными, чтобы измененный фон было лучше видно.
$(".hoverElement").css('opacity',"0.7" );
},
function(){
// Возвращаем старый цвет фона, убираем фоновую картинку
$(".bodyClass").css({'background-color':bgC,'background-image':""});
// Убираем прозрачность
$(".hoverElement").css('opacity',"1" );
}
);
});

Пример HTML:

<html>
<head></head>
<body>
<div class="bodyClass">
<a href="myimgpath/img.jpg" class="hoverElement">Наведите, и фон изменится</a>
</div>
</body>
</html>

 «.hoverElement» — элемент, при наведении на который должен будет сменяться фон. Если вы не хотите ни чего менять в скрипте, то этот элемент должен быть ссылкой на картинку, которую нужно поставить в фон страницы.

 «.bodyClass» — элемент, фон которого нужно заменить.

Вот в принципе и все. Если будут вопросы, оставляйте комментарии.

Пример:

НАВЕДИ НА МЕНЯ
Пример внедрения

2leep.com

1 комментарий к записи Смена фона страницы при наведении на картинку.

Avatar

Сергей

12th Август 2013 в 0:32

Пример на Вашем сайте не работает, так же как и на моем.

В чем может быть причина?

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

*

Наверх