• 1 мин чтения • Автор RAMe0

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


Решил поделиться маленьким но очень удобным в некоторых случаях 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» — элемент, фон которого нужно заменить.

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

Пример:

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

Теги: jQuery, Web-programing

Комментарии ()