Multiple backgrounds

[Johan]

I can set/change a background with:

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

How do I set/change multiple backgrounds using javascript?

 

[Laser Lips]

I can set/change a background with:

document.getElementById("photodiv").style.background =
"#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.getElementById("photodiv").style.background =
"#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.style.background="#282828 url(../img/pict_1.jpg)";


You can also use alternative style sheets

 

[Johan]

Johan a écrit :

I can set/change a background with:

document.getElementById("photodiv").style.background =
"#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.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.

 

[Johan]

Repeat that line for each div?

They should appear in one div.

 

[Robin Rattay]

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

 

[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>