kan getElemensByTagName niet stylen

[jonassmets]

Beste mensen,


Via een stukje javascript dat ik ergens gevonden heb maak ik het aan de hand van thumbnails mogelijk om de achtergrond van een webpagina te veranderen. Maar ik slaag er op geen enkele manier in om deze achtergrond met css te stylen. Heb al vanalles geprobeerd, maar ik kom er op geen enkele manier bij.

Hier het stukje javascript:
[JS]<script language="JavaScript1.2" type="text/javascript">
function ChangeBgImg(imgs) {
bdy[0].style.backgroundImage = 'url('+imgs+')';
}

function ChangeBgImgInit() {
bdy = document.getElementsByTagName("body");
bdy[0].style.width = "100%";
bdy[0].style.height = "100%";
bdy[0].style.margin = "0px";
bdy[0].style.backgroundImage = 'url(http://tumblr.jonassmets.net/images/bg/6.jpg)';
}

onload=ChangeBgImgInit;[/JS]

En hier worden de afbeeldingen ingeladen:

<div id="sidebarImages">
			<img src="http://tumblr.jonassmets.net/images/bg/1.jpg" onclick="ChangeBgImg('http://tumblr.jonassmets.net/images/bg/1.jpg')" class="bgimages" alt="1"/>
			<img src="http://tumblr.jonassmets.net/images/bg/2.jpg" onclick="ChangeBgImg('http://tumblr.jonassmets.net/images/bg/2.jpg')"class="bgimages" alt="2"/>
			<img src="http://tumblr.jonassmets.net/images/bg/4.jpg" onclick="ChangeBgImg('http://tumblr.jonassmets.net/images/bg/4.jpg')"class="bgimages" alt="3"/>
			<img src="http://tumblr.jonassmets.net/images/bg/5.jpg" onclick="ChangeBgImg('http://tumblr.jonassmets.net/images/bg/5.jpg')"class="bgimages" alt="4"/>
			<img src="http://tumblr.jonassmets.net/images/bg/6.jpg" onclick="ChangeBgImg('http://tumblr.jonassmets.net/images/bg/6.jpg')"class="bgimages" alt="5"/>
			<img src="http://tumblr.jonassmets.net/images/camera.png" alt="" id="sidebarButton"/>
		</div> <!-- Einde sidebarImages -->

Een werkend voorbeeld vind je hier: http://smetsjonas.tumblr.com
De bedoeling is dat de achtergrond afbeelding deze css code mee krijgt:

/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;

Zo is de de achtergrond fixed, en schaalt hij mooi mee met de grote van het browser venster.
Mijn idee was om de achtergrondafbeelding aan een div te koppelen in plaats van aan de body, en dan deze div met css te stylen, maar dat krijg ik dus ook niet voor elkaar.

Ik heb een div aangemaakt:

<div id="bg"><div>

En dan de javascript aangepast:
[JS]<script language="JavaScript1.2" type="text/javascript">
function ChangeBgImg(imgs) {
bdy[0].style.backgroundImage = 'url('+imgs+')';
}

function ChangeBgImgInit() {
bdy = document.getElementById("bg");
bdy[0].style.width = "100%";
bdy[0].style.height = "100%";
bdy[0].style.margin = "0px";
bdy[0].style.backgroundImage = 'url(http://tumblr.jonassmets.net/images/bg/6.jpg)';
}

onload=ChangeBgImgInit;[/JS]

En de de css code werd dan:

 #bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}

Maar dit had dus geen effect.
Wie kan me hier bij vooruit helpen?
Alvast bedankt.
Jonas

 

[csshunter]

Hoi Jonas,
Het klopt dat je er niet bij kunt komen. Dat kan niemand! *)
De clou is, dat je van een background-img niet het formaat kunt aanpassen. De positie kan je regelen, het tegelen (wel/niet, horizontaal en/of verticaal) kan je regelen, het vastzetten kan je regelen... maar niet het formaat.

Een formaat van een img kan je alleen (dynamisch) wijzigen, als het img rechtstreeks in de html staat.
D.w.z. het moet worden:

<div id="bg"><img src="bg1.jpg" alt=""><div>
of kortweg:
<img id="bg" src="bg1.jpg" alt="">

Met een document.getElementById('bg') kan je vervolgens de vindplaats en dus het img veranderen:
[JS]function changeImg(volgnummer){
var obj = document.getElementById('bg');
obj.src= 'bg'+volgnummer+'.jpg';
}[/JS]
En je moet het id="bg" stylen in een (absoluut gepositioneerde) laag onder de rest van de pagina-spullen. Zoiets zou het moeten doen.

Succes!
Met vriendelijke groet,
CSShunter

*)
Tenminste niet met de huidige stand van zaken van css (css2.1). In css3 zal het wel mogelijk zijn, maar dat werk is nog onafgerond qua standaard, en zal nog meer tijd nodig hebben om door alle browsers opgepikt te worden. Zie "CSS Backgrounds and Borders Module Level 3", 3.9. The ‘background-size’ property.

 

[jonassmets]

Hey Css Hunter,

Bedankt voor je antwoord, ben gisteren 3 uur op een of ander vaag irc kanaal geholpen en had het ondertussen voor elkaar.
Ik was er zelf al achtergekomen dat het

document.getElementById('bg');

moest zijn maar had iets over het hoofd gezien.
Maar sinds ik de functie om je eigen achtergrond te kunnen kiezen heb ingebouwd zit ik met een nieuw probleem. Er zijn weer een aantal jquery library's die in conflict gaan met elkaar. Maar hier start ik wel een nieuw topic over.

Bedankt voor je antwoord.
Jonas

 

[csshunter]

... had het ondertussen voor elkaar. Ik was er zelf al achtergekomen dat ...

Da's mooi: en als je dat meteen na de ontdekking even meldt, hoeven we er hier niet meer in te duiken.

 

[jonassmets]

Heb je helemaal gelijk in! Maar het was zo laat en ik was de computer mee dan zat.. Dus was ik dit vandaag van plan.
Volgende keer doe ik dat onmiddellijk.

THnx
Jonas