Achtergrond Div veranderen mbv Javascript

[koalabreda]

Goedemiddag,

Ik hoop dat iemand mij kan helpen. Graag wil ik de achtergrond van mijn divtag continu laten veranderen door een andere afbeelding. Het liefst nog met een 'overvloei' functie.

Ik heb bijvoorbeeld in mijn css file staan:

#page1 #menu {background: url(images/menu/page1.jpg);}  	/* Home */
#page2 #menu {background: url(images/menu/page2.jpg);}  	/* Bedrijf */
#page3 #menu {background: url(images/menu/page3.jpg);}  	/* Product */
#page4 #menu {background: url(images/menu/page4.jpg);}  	/* Proces */
#page5 #menu {background: url(images/menu/page5.jpg);}  	/* Referenties */
#page6 #menu {background: url(images/menu/page6.jpg);}  	/* Offerte */
#page7 #menu {background: url(images/menu/page7.jpg);}  	/* Contact */
#page8 #menu {background: url(images/menu/page8.jpg);}  	/* Terms of use */

Heeft iemand hiervoor een oplossing?
Met een gif animatie is het eventueel mogelijk, alleen kan je hierin niet meer dan 256 kleuren opslaan wat dus geen duidelijke foto's geeft.

Alvast bedankt!

 

[That Guy]

dit kan inderdaad op die manier, met verschillende div's. Maar veel makkelijker is om maar 1 div te gebruiken.

<div id='dingetje'></div>

//maak handle
var hand = document.getElementById('dingetje');

nu dan lekker de 1e achtergrond maken:

hand.style.background = "#fff url('images/test1.png') no-repeat 0px 0px";

zo kan je dus de bg bewegen:

hand.style.background = "#fff url('images/test1.png') no-repeat 0px 10px";

gebruik hier shorthand, maar je kan dus gewoon deze gebruiken:

hand.style.backgroundImage = ;
hand.style.backgroundRepeat = ;
hand.style.backgroundPosition = ;

overgens is dit maar 1 van de zoveel oplossingen. Check bv. ook eens 'clip' van css.


nuttige links:
http://www.w3schools.com/CSS/pr_pos_clip.asp
http://codepunk.hardwar.org.uk/css2js.htm

interessant:
http://www.designmeme.com/articles/cssrollovers/