Форум

Егорыч · #1 (**permalink**) 21.02.2015, 14:09

Добрый день, форумчане, есть у меня такая задача - по клику на элемент, менять свойство 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 · #2 (**permalink**) 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+')';    
        }
        
    })
});

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

Егорыч · #3 (**permalink**) 21.02.2015, 15:17

Сообщение от laimas

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

Это не нужно, согласен, осталось после того как я начал рвать на голове волосы и пробовать все подряд.

Сообщение от laimas

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

Это тоже с тех времен.

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

Егорыч · #4 (**permalink**) 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 · #5 (**permalink**) 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 · #6 (**permalink**) 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>

Найдите отличие.

Егорыч · #7 (**permalink**) 21.02.2015, 21:58

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

Well · #8 (**permalink**) 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 · #9 (**permalink**) 06.04.2015, 17:47

Код примера, без кода никто не поможет.

Well · #10 (**permalink**) 06.04.2015, 20:13

Сообщение от Aetae

Код примера, без кода никто не поможет.

Многовато будет..

<!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%;
}

}

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

Форум

Справочник

Discord чат

Курсы javascript