Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Изменение свойства backgroundImage у элемента (https://javascript.ru/forum/events/53857-izmenenie-svojjstva-backgroundimage-u-ehlementa.html)

Егорыч 21.02.2015 14:09
Изменение свойства backgroundImage у элемента
 
Добрый день, форумчане, есть у меня такая задача - по клику на элемент, менять свойство background-image у другого.
Для этого была написана функция, код функции приведу. Функция вызывается 
<a href="" onclick="setAsBackground('img/background.jpg'); return false;"></a>

Функция setAsBackground 
function setAsBackground(post_img) {
	var post_img = post_img;
	var img = new Image();
	img.src = post_img;
	img.onload = function() {
		console.log(this.src); //Выводит URL картинки как надо
		document.getElementById('page_background').style.backgroundImage = 'url(' + this.src + ');';	//Не меняет свойство, ошибки нет
	};
	$('#page_background').css({'background': 'url(' + img.src + ');'}); //jQuery тоже бессильна
    document.getElementById('page_background').style.background = '#ccc';// Работает, свойство меняет
}

Надеюсь на вашу помощь, заранее спасибо

laimas 21.02.2015 15:01
Зачем var post_img = post_img;, если это аргумент функции и уже передан?

Положите в каталог скрипта две картинки - img0.png и img1.png, и выполните такой пример:

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<style>
.ims {
    width: 256px;
    height: 256px;
    background: url(img0.png);
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    var n = 0;
    $('div.ims').click(function() {
        n ^= 1;
        this.style.background = 'url(img'+n+'.png)';
    })
});
</script>     
</head> 

<body>
<div class="ims"></div>
</body> 
</html>


Что так - this.style.background, что используя jQuery вместо этого, работать будет.

Зачем вообще new Image() и .onload = function() для него? Или так не подходит и обязательно ждать окончание загрузки?

Хотя и так без проблем будет работать:

$(function() {
    var n = 0;
    $('div.ims').click(function() {
        n ^= 1;
        var o = this, img = new Image();
        img.src = 'img'+n+'.png';
        img.onload = function() {
            o.style.backgroundImage = 'url('+this.src+')';    
        }
        
    })
});


То есть ошибок как таковых нет, возможно путь неверен, или, если используется одно и тоже имя, а изображение изменяется при этом сервером (каптча к примеру), а браузер кешировал его.

Егорыч 21.02.2015 15:17
Цитата:
Сообщение от laimas
Зачем var post_img = post_img;, если это аргумент функции и уже передан?
Это не нужно, согласен, осталось после того как я начал рвать на голове волосы и пробовать все подряд.
Цитата:
Сообщение от laimas
Зачем вообще new Image() и .onload = function() для него? Или так не подходит и обязательно ждать окончание загрузки?
Это тоже с тех времен.

Сейчас попробую ваш пример

Егорыч 21.02.2015 15:27
Итак, методом проб выяснилось 
document.getElementById('page_background').style.background = '#ccc'; // Работает
document.getElementById('page_background').style.background = 'url()'; // Не работает.
document.getElementById('page_background').style.backgroundImage = 'url()'; // Не работает.


То ли я дурак, то ли лыжи не едут. Попозже выложу реальный пример

laimas 21.02.2015 15:43
Это не метод, это гадание на кофейной гуще, если он не подкреплен каким либо "недовольством" браузера.

Тоже самое, но под ваше "утверждение":
<style>
#ims {
    width: 256px;
    height: 256px;
    background: url(img0.png);
}
</style> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script> 
$(function() {
    var n = 0;
    $('button').click(function() {
        n ^= 1;
        document.getElementById('ims').style.background = 'url(img'+n+'.png)';
        //document.getElementById('ims').style.backgroundImage = 'url(img'+n+'.png)';    
    })
});
</script>

<div id="ims"></div>
<button>NEW</button>


Проверяйте.

Aetae 21.02.2015 16:12 
<body id="page_background">
<a href="" onclick="setAsBackground('http://javascript.ru/forum/images/ca_serenity/misc/logo.gif'); return false;">click</a>
<script>
function setAsBackground(post_img) {
    var post_img = post_img;
    var img = new Image();
    img.src = post_img;
    img.onload = function() {
        console.log(this.src); //Выводит URL картинки как надо
        document.getElementById('page_background').style.backgroundImage = 'url(' + this.src + ')';    
    };
}
</script>
</body>
Найдите отличие.:)

Егорыч 21.02.2015 21:58
Спасибо, неужели дело в одной точке с запятой? Я пол дня бился, все никак понять не мог. Огромное спасибо!

Well 06.04.2015 14:47
Добрый день!
У меня также вопрос по backgroundImage, поэтому решил не засорять форум и написать здесь:) . Проблема следующая - требовалось создать главную страницу: сверху тоненький (пикселей на 40-50) header, потом резиновый полноэкранный слайдер, затем при скроллинге - картинка чуть приподымалась, header прятался и появлялся footer. Можно бы было не морочиться, а найти готовый слайдер, коих сотни и точка, однако требуется, чтобы на разных мониторах картинка выглядела одинаково, а резать запрещено, это фотографии. Получается, что пришлось сделать 5 вариантов картинок в фотошопе и в зависимости от пропорций экрана (5/4, 16/10...) подгружалась нужная картинка, свойством css media, далее при помощи background-size: cover растягивать на экран(резиновый дизайн). Прошу прощения за многословность, но нужно было объяснить задачу. Теперь о проблеме - backgroundImage не обладает свойством контента и не занимает места. Соответственно, ниже картинки простыми способами нельзя разместить элемент (footer), чтобы он снизу обтекал картинку и вместе с ней растягивался и сжимался. Получается либо привязываешь footer к контейнеру слайдера, придавая ему свойство relative, тогда оно живет одним целым, но не растягивается, либо подстраивая свойством размера контейнера настраиваешь положения footerа к слайдеру, но все прогнозируемо разъезжается на других разрешениях монитора. Мне кажется, что кроме, как скриптом этот вопрос не решить. Нужно, чтобы каким то образом скрипт определял, где заканчивается картинка и после нее помещал footer. У кого есть соображения, как решить этот ребус?? Не хотелось бы на это убить еще несколько месяцев.

Aetae 06.04.2015 17:47
Код примера, без кода никто не поможет.

Well 06.04.2015 20:13
Цитата:
Сообщение от Aetae (Сообщение 365274)
Код примера, без кода никто не поможет.
Многовато будет..

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<link href="css/style_1024х768.css" rel="stylesheet" type="text/css" />
<link href="css/media-queries.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body>
<div id="slider">
<div id="container">
<div class="back"><img src="img/prevImgBtn.png"></div>
<div class="images" id="stylesheet">
<div id="img1"></div>
<div id="img2"></div>
<div id="img3"></div>
<div id="img4"></div>
<div id="img5"></div>
</div>
<div class="next"><img src="img/nextImgBtn.png"></div>
</div>
</div>
</body>
</html>

Вот основной CSS
body{
background: #ccc;
margin: 0 0 0 0;
}
#slider{
width: auto;
height: auto;
display: block;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 10px rgba(0,0,0,1);
margin: auto auto;
}
#container{
margin: auto auto;
padding: auto auto;
width: auto;
height: auto;
background: #ccc;

display: block;
overflow: auto;
}
.back{
padding-top: 420px;
padding-left: 25px;
float: left;
display: block;
z-index: 99;
position: relative;
}
.next{
padding-top: 420px;
padding-right: 25px;
float: right;
display: block;
z-index: 99;
position: relative;
}
.images{
margin: auto auto;
padding: auto auto;
width: 100%;
height: 100%;
overflow: hidden;
float:left;
position: absolute;
}


Фрагмент CSS подключаемый при определении пропорций монитора
@media screen and (max-aspect-ratio: 19/10) and (min-aspect-ratio: 17/10) { /* разрешение 16/10*/
#img1{
background: url(../images/1.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: content;
-o-background-size: content;
-moz-background-size: content;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}

#img2{
background: url(../images/2.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: content;
-o-background-size: content;
-moz-background-size: content;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}

#img3{
background: url(../images/3.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: content;
-o-background-size: content;
-moz-background-size: content;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}
#img4{
background: url(../images/4.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: content;
-o-background-size: content;
-moz-background-size: content;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}
#img5{
background: url(../images/5.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: content;
-o-background-size: content;
-moz-background-size: content;
margin: 0 0 0 0;
padding: 0 0 0 0;
width: 100%;
height: 100%;
}

}

Скрипт слайдера не выкладываю, чтобы не перегружать эфир, если нужно - выложу.

Well 07.04.2015 15:53
Прошу прощения выложил промежуточный css. Правильный:
body{
background: #ccc;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: auto;
display:flex;
flex-direction: column;
justify-content: center;
align-items: stretch;
}
.header{
margin: 0;
padding: 0;
height: 51px;
}

#slider{
margin: 0;
padding: 0;
width: auto;
height: auto;
display: block;
-webkit-box-shadow: 0px 0px 10px rgba(0,0,0,1);
-moz-box-shadow: 0px 0px 10px rgba(0,0,0,1);
box-shadow: 0px 0px 10px rgba(0,0,0,1);

}
#container{
margin: 0;
padding: 0;
width: auto;
height: auto;
background: #ccc;

display: block;
overflow: auto;
}

.back{
padding: 24% 1%;

float: left;
display: block;
z-index: 99;
position: relative;
}
.next{
padding: 24% 1%;
float: right;
display: block;
z-index: 99;
position: relative;
}
.images{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
display: block;
overflow: hidden;
float:left;
position: absolute;

}

и

@media screen and (max-aspect-ratio: 19/10) and (min-aspect-ratio: 17/10) { /* разрешение 16/10*/
#img1{
background: url(../images/1.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

#img2{
background: url(../images/2.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

#img3{
background: url(../images/3.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#img4{
background: url(../images/4.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#img5{
background: url(../images/5.1.jpg) no-repeat center center;
background-size: cover;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}

}


Часовой пояс GMT +3, время: 04:18.