Как при наведении курсором на картинку происходила смена основного фона сайта

283

25 июня 2018, 17:10

У меня к каждому блоку привязана картинка. Я хочу чтобы при наведении к привязанной картинке менялся основной фон сайта.

for($i=40;$i<161;$i+=40){
    echo("<div class=\"block2\" style=\"top: $i%; background-image: url(");
    if($_GET[p] > 1){echo ("$_GET[p]");}
    echo ("$i.jpg)\">\n");
    echo("</div>");
    echo("<div style=\"position: absolute; width: 70px;    height: 40px; top: ");
    echo($i-20);
    echo("%;left:295px; background-image: url(123.jpg)\">\n");
    echo("</div>");
}

Answer 1

var imgBlock = $('.block'); 
 
imgBlock.on('click', function(event) { 
  var img = $(event.target).css('background-image'); 
 
  $('body').css('background-image', img); 
});

body { 
  background-repeat: repeat; 
} 
 
.block { 
  width: 100px; 
  height: 100px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class="block" style="background-image:url('https://www.schekino.net/forum/download/file.php?avatar=1758_1310800757.png');-moz-background-image:url('https://www.schekino.net/forum/download/file.php?avatar=1758_1310800757.png')" alt="image-1"></div> 
<div class="block" style="background-image:url('https://kulturologia.ru/img/avatar/avatar02467801.jpg');-moz-background-image:url('https://www.schekino.net/forum/download/file.php?avatar=1758_1310800757.png')" alt="image-1"></div> 
<div class="block" style="background-image:url('https://www.karry-studio.com.ua/wp-content/uploads/2016/07/татуаж-1-100x100.jpg');-moz-background-image:url('https://www.schekino.net/forum/download/file.php?avatar=1758_1310800757.png')" alt="image-1"></div>

Answer 2

https://jsfiddle.net/joomla/yfe72p8w/

<a class="test1" href="#">Ссылка 1</a><br>
<a class="test2" href="#">Ссылка 2</a><br>
<a class="test3" href="#">Ссылка 3</a><br>
<div class="test4"></div>

*{margin:0; padding:0;}
a{
  margin:10px;
}
a:hover:before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:"";
  z-index:-5;
}
.test1:before{
  background:url('https://cdn-images-1.medium.com/max/800/1*x2-xkGXkay6XgIXWaYj35w.jpeg');
}
.test2:before{
  background:url('http://ru3.anyfad.com/items/t1@dd641c19-b7a2-453f-af8e-59b65d89aad3/Nevozmutimyy-lev.jpg');
}
.test3:before{
  background:url('http://www.motto.net.ua/pic/201212/800x600/motto.net.ua-46683.jpg');
}
.test4{
  height:1px;
}

Создание интернет-магазина электроники в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

serialize не отправляет данные с формы

Есть 2 формы, отличаются только заголовкомПри отправке одной формы скрпит отрабатывал отлично, при добавлении второй формы, я создал дополнительную...

216

jQuery

Как убрать дубликаты в массиве с объединением значений? [дубликат]

На данный вопрос уже ответили:

202

jQuery

Почему змейка не работает?

Помогите найти проблему змейки

410

jQuery

Почему iframe загружается 2 раза?

Нашел скрипт, который останавливает воспроизведение видео в iframe, но он при открытии openbox с самим iframe загружает его два разаБез данного скрипта,...

221