Изменение свойства 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';// Работает, свойство меняет
}
Надеюсь на вашу помощь, заранее спасибо |
Зачем 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+')';
}
})
});
То есть ошибок как таковых нет, возможно путь неверен, или, если используется одно и тоже имя, а изображение изменяется при этом сервером (каптча к примеру), а браузер кешировал его. |
Цитата:
Цитата:
Сейчас попробую ваш пример |
Итак, методом проб выяснилось
document.getElementById('page_background').style.background = '#ccc'; // Работает
document.getElementById('page_background').style.background = 'url()'; // Не работает.
document.getElementById('page_background').style.backgroundImage = 'url()'; // Не работает.
То ли я дурак, то ли лыжи не едут. Попозже выложу реальный пример |
Это не метод, это гадание на кофейной гуще, если он не подкреплен каким либо "недовольством" браузера.
Тоже самое, но под ваше "утверждение":
<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>
Проверяйте. |
<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>
Найдите отличие.:) |
Спасибо, неужели дело в одной точке с запятой? Я пол дня бился, все никак понять не мог. Огромное спасибо!
|
Добрый день!
У меня также вопрос по backgroundImage, поэтому решил не засорять форум и написать здесь:) . Проблема следующая - требовалось создать главную страницу: сверху тоненький (пикселей на 40-50) header, потом резиновый полноэкранный слайдер, затем при скроллинге - картинка чуть приподымалась, header прятался и появлялся footer. Можно бы было не морочиться, а найти готовый слайдер, коих сотни и точка, однако требуется, чтобы на разных мониторах картинка выглядела одинаково, а резать запрещено, это фотографии. Получается, что пришлось сделать 5 вариантов картинок в фотошопе и в зависимости от пропорций экрана (5/4, 16/10...) подгружалась нужная картинка, свойством css media, далее при помощи background-size: cover растягивать на экран(резиновый дизайн). Прошу прощения за многословность, но нужно было объяснить задачу. Теперь о проблеме - backgroundImage не обладает свойством контента и не занимает места. Соответственно, ниже картинки простыми способами нельзя разместить элемент (footer), чтобы он снизу обтекал картинку и вместе с ней растягивался и сжимался. Получается либо привязываешь footer к контейнеру слайдера, придавая ему свойство relative, тогда оно живет одним целым, но не растягивается, либо подстраивая свойством размера контейнера настраиваешь положения footerа к слайдеру, но все прогнозируемо разъезжается на других разрешениях монитора. Мне кажется, что кроме, как скриптом этот вопрос не решить. Нужно, чтобы каким то образом скрипт определял, где заканчивается картинка и после нее помещал footer. У кого есть соображения, как решить этот ребус?? Не хотелось бы на это убить еще несколько месяцев. |
Код примера, без кода никто не поможет.
|
Цитата:
<!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%; } } Скрипт слайдера не выкладываю, чтобы не перегружать эфир, если нужно - выложу. |
| Часовой пояс GMT +3, время: 02:36. |