469,273 Members | 1,779 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,273 developers. It's quick & easy.

Multiple backgrounds

I can set/change a background with:

document.getElementById("photodiv").style.backgrou nd =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
Aug 25 '08 #1
6 2830
On Aug 25, 8:37 pm, Johan <por...@can.spamwrote:
I can set/change a background with:

document.getElementById("photodiv").style.backgrou nd =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
Repeat that line for each div?
Aug 26 '08 #2
SAM
Johan a écrit :
I can set/change a background with:

document.getElementById("photodiv").style.backgrou nd =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?
The easiest way is to use a class in the body tag

document.body.className = 'back_1';
document.body.className = 'back_2';

CSS :
=====
..back_1 { background: yellow; }
..back_1 div { background: url(../img/pict_1.jpg) }
..back_1 div.special { background: #282828 }
..back_2 { background: white; }
..back_1 div { background: url(../img/pict_2.jpg) }
/* and so on */
Or using a loop on elements to change :

var D = document.getElemementsByTagName('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.background="#282828 url(../img/pict_1.jpg)";
You can also use alternative style sheets

--
sm
Aug 26 '08 #3
SAM wrote:
Johan a écrit :
>I can set/change a background with:

document.getElementById("photodiv").style.backgro und =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?


The easiest way is to use a class in the body tag

document.body.className = 'back_1';
document.body.className = 'back_2';

CSS :
=====
.back_1 { background: yellow; }
.back_1 div { background: url(../img/pict_1.jpg) }
.back_1 div.special { background: #282828 }
.back_2 { background: white; }
.back_1 div { background: url(../img/pict_2.jpg) }
/* and so on */
Or using a loop on elements to change :

var D = document.getElemementsByTagName('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.background="#282828 url(../img/pict_1.jpg)";
You can also use alternative style sheets
Thank for your suggestions.

However, my question is how I can set/change multiple backgrounds with
javascript. I think I wasn't clear but they should appear in one div.
You can set them with css in this way:
#show {
background-image:
url("images/pict_1.jpg"),
url("images/pict_2.jpg"),
url("images/pict_3.jpg"),
url("images/pict_4.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom right, bottom left;
}
Note: it's one sigle div.

Now I want to change them with javascript.
Aug 26 '08 #4
Laser Lips wrote:
On Aug 25, 8:37 pm, Johan <por...@can.spamwrote:
>>I can set/change a background with:

document.getElementById("photodiv").style.backgr ound =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?


Repeat that line for each div?
They should appear in one div.
Aug 26 '08 #5
On 26 Aug., 16:06, Johan <por...@can.spamwrote:
SAM wrote:
You can set them with css in this way:
#show {
* *background-image:
* * *url("images/pict_1.jpg"),
* * *url("images/pict_2.jpg"),
* * *url("images/pict_3.jpg"),
* * *url("images/pict_4.jpg");
* *background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
* *background-position: top left, top right, bottom right, bottom left;}
You are aware, that this is CSS3 and is currently supported only by
Safari and KHTML-based browsers?
Now I want to change them with javascript.
Basically by combining the what you posted in your original post and
here:

var theDivStyle = document.getElementById("photodiv").style;
theDivStyle.backgroundImage = 'url("images/pict_1.jpg"), url("images/
pict_2.jpg"), url("images/pict_3.jpg"), url("images/pict_4.jpg")';
theDivStyle.backgroundRepeat = 'no-repeat, no-repeat, no-repeat, no-
repeat';
theDivStyle.backgroundPosition = 'top left, top right, bottom right,
bottom left';

Or by using the shorthand property as in CSS

theDivStyle.background = 'url("images/pict_1.jpg") no-repeat top left,
url("images/pict_2.jpg") no-repeat top right, ...'; /* abbreviated */

(watch the line breaks)

Robin
Aug 26 '08 #6
SAM
Johan a écrit :
>
However, my question is how I can set/change multiple backgrounds with
javascript. I think I wasn't clear but they should appear in one div.

You can set them with css in this way:
??? in which navigator can you have this kind of CSS ?
(my Fx told me it is not good)
#show {
background-image:
url("images/pict_1.jpg"),
url("images/pict_2.jpg"),
url("images/pict_3.jpg"),
url("images/pict_4.jpg");
background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
background-position: top left, top right, bottom right, bottom left;
}
Note: it's one sigle div.
and there is no image in background.
Now I want to change them with javascript.
Why for ?
because you want to correct the error ?
CSS :
=====
#show { background: url(images/pict1.jpg) no-repeat top left #ffc; }
#show.p_tr { background-position: top right; }
#show.p_br { background-position: bottom right; }
#show.p_bl { background-position: bottom left; }
#show.i_l { background-image: url(images/pict2.jpg) }
#show.i_2 { background-image: url(images/pict3.jpg) }
#show.i_3 { background-image: url(images/pict4.jpg) }

JS :
====
function chang(img, pos) {
var d = document.getElementById('show');
d.className = img+' '+pos;
}

HTML:
=====

<div id="show" style="height:600px">
<p><a href="javascript:chang('i_1','p_tr')">
pict #2 top right</a>
<p><a href="javascript:chang('i_1','p_br')">
pict #2 bottom right</a>
<p><a href="javascript:chang('i_2','p_bl')">
pict #3 bottom left</a>
<p><a href="javascript:chang('','')">
original pict and position</a>
</div>

======== soluce 2 =============

CSS :
=====
#show { background: url(images/pict1.jpg) no-repeat top left #ffc; }

JS :
====
function chang(img, pos) {
var d = document.getElementById('show').style;
d.backgroundPosition = pos;
d.backgroundImage = 'url(images/'+img+'.jpg)';
}

HTML :
======
<div id="show" style="height:600px">
<p><a href="javascript:chang('pict2','top right')">
pict #2 top right</a>
<p><a href="javascript:chang('pict2','bottom right')">
pict #2 bottom right</a>
<p><a href="javascript:chang('pict3','bottom left')">
pict #3 bottom left</a>
<p><a href="javascript:chang('pict1','top left')">
original pict and position</a>
</div>

--
sm
Aug 26 '08 #7

This discussion thread is closed

Replies have been disabled for this discussion.

Similar topics

1 post views Thread by RoDzZzZ | last post: by
2 posts views Thread by Greg Locke | last post: by
6 posts views Thread by Rik Brooks | last post: by
1 post views Thread by alice | last post: by
1 post views Thread by CARIGAR | last post: by
reply views Thread by zhoujie | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.