Multiple backgrounds

[Johan]

I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?

[Laser Lips]

On Aug 25, 8:37 pm, Johan <[e-mail] mwrote:

I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#282828 url(../img/pict_1.jpg)";

How do I set/change multiple backgrounds using javascript?

Repeat that line for each div?

[SAM]

Johan a écrit :

I can set/change a background with:

document.getEle mentById("photo div").style.bac kground =
"#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.c lassName = 'back_1';
document.body.c lassName = '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.getEle mementsByTagNam e('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.backgrou nd="#282828 url(../img/pict_1.jpg)";
You can also use alternative style sheets

--
sm

[Johan]

SAM wrote:

Johan a écrit :

>I can set/change a background with:

document.getEl ementById("phot odiv").style.ba ckground =
"#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.c lassName = 'back_1';
document.body.c lassName = '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.getEle mementsByTagNam e('DIV');
for(var i=0, n = D.length; i<n; i++)
D[i].style.backgrou nd="#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.

[Johan]

Laser Lips wrote:

On Aug 25, 8:37 pm, Johan <[e-mail] mwrote:

>>I can set/change a background with:

document.getE lementById("pho todiv").style.b ackground =
"#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.

[Robin Rattay]

On 26 Aug., 16:06, Johan <[e-mail] mwrote:

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.getEle mentById("photo div").style;
theDivStyle.bac kgroundImage = 'url("images/pict_1.jpg"), url("images/
pict_2.jpg"), url("images/pict_3.jpg"), url("images/pict_4.jpg")';
theDivStyle.bac kgroundRepeat = 'no-repeat, no-repeat, no-repeat, no-
repeat';
theDivStyle.bac kgroundPosition = 'top left, top right, bottom right,
bottom left';

Or by using the shorthand property as in CSS

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

(watch the line breaks)

Robin

[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.getEle mentById('show' );
d.className = img+' '+pos;
}

HTML:
=====

<div id="show" style="height:6 00px">
<p><a href="javascrip t:chang('i_1',' p_tr')">
pict #2 top right</a>
<p><a href="javascrip t:chang('i_1',' p_br')">
pict #2 bottom right</a>
<p><a href="javascrip t:chang('i_2',' p_bl')">
pict #3 bottom left</a>
<p><a href="javascrip t: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.getEle mentById('show' ).style;
d.backgroundPos ition = pos;
d.backgroundIma ge = 'url(images/'+img+'.jpg)';
}

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

--
sm