Roterende banner in een omlijsting

[winelover]

Hallo,

Ik wil graag een roterende banner plaatsen achter een plaatje, waarin het midden een open ruimte zit, dus eigenlijk een fotolijstje om de banner heen.
Als ik 2 plaatjes achter elkaar wil zetten, kan dat alleen met CSS.
Is er een mogelijkheid om dat via javascript te doen?

Groet,
Winelover

 

[That Guy]

CSS is voor de opmaak. Javascript kan in principe alleen maar elementjes verplaatsen en veranderen.

Overgens kan je wel canvas gebruiken, maar dan schiet je je doel een beetje voorbij.

Dit kan toch gewoon?

<div id='houder'>
   <div id='lijstje'></div>
   <img id='foto' alt='foto' href='plaatje1.jpg' />
</div>

/* CSS */

#houder, #lijstje, #foto
{
   width: 300px;
   height: 200px;
}

#lijstje
{
   background-image: url('lijstje.png');
   /* lijst plaatje met transparant middenstuk */
}

#lijstje, #foto
{
   position: absolute;
   left: 0;
   top: 0;
}

[JS]var handle = document.getElementById('foto'),
index = 0,
plaatjes = ['img1.jpg', 'iets2.png', 'plaatje.bmp'];

setInterval(function()
{
handle.src = plaatjes[++index % plaatjes.length]; // nu met gratis moeilijke code!
}, 5000); // elke 5 secondes
[/JS]

uit het hoofd en niet getest, maar het gaat om het idee.



:thumb: