Voor een website van een klant was één van onze ontwikkelaars op zoek naar een horizontale dhtml image slider. Hiermee worden scrolling images op een webpagina getoond.

Op de site van Dynamic Drive stond een code voor een slider die enigszins in de buurt kwam van wat de klant wenste. Aan ieder plaatje kan een eigen url gegeven worden. Wanneer u over de slider beweegt met de muis, dan pauseert hij.

Deze slider bevatte echter nog niet alle gewenste functionaliteit. De slider moest bijvoorbeeld ook de andere kant op kunnen scrollen. En ook moest de snelheid van de slider aangepast kunnen worden door over de twee uiteinden te navigeren. e-office paste de code zodanig aan, dat ook dit mogelijk werd.

Om eenvoudig meerdere instanties van een slider op één pagina te krijgen pasten we de code aan zodat deze werkt met objecten. Alle variabelen van een slider worden in een object gezet, en aan alle functies meegegeven.

De slider in onderstaand voorbeeld toont alleen plaatjes. Maar in plaats van plaatjes kunnen er ook (nested) divs gebruikt worden. Alles is mogelijk qua opmaak. U dient er alleen rekening mee te houden dat alles posities relatief zijn, aangezien het verplaatsbaar moet zijn voor de slider.

Waar kunt u de dhtml slider nu voor gebruiken? Wellicht gebruikt u in uw organisatie een WieisWie. U zou dan de slider kunnen gebruiken om de foto's van uw medewerkers te tonen. Wanneer gebruikers dan op een foto klikken worden de detailgegevens getoond.

De aangepaste slider is getest in de volgende browsers: Internet Explorer 5 +, FireFox 2 +, Opera 9.

Deze zip file bevat een voorbeeld met alle benodigde code.