Foto header wisselen

[KlaasB]

Hallo,


Ik heb een header gemaakt met een paar foto's naast elkaar.
Daarnaast heb ik nog meer foto's die dan eigenlijk zouden moeten wisselen in de header.

hoe krijg ik dat in html voor elkaar? (of niet?)

Groet,
Klaas

 

[tecsman]

In HTML krijg je dat niet voor elkaar.

Ik denk wel in Javascript
en in ieder geval ook met een PHP scriptje.

Daarvoor gebruik ik zelf een script dat heet rotate.php
Er zullen er meer zijn die qua code verschillend zijn maar wel dezelfde naam hebben.
Je kunt het beste even zoeken met de zoekwoorden
"PHP image rotator" of "....rotation"

In mijn css-stylesheet heb ik voor de selector "div#header"
een rule voor de background-image
waarbij in plaats van een verwijzing naar een enkele afbeelding
er een verwijzing staat naar het rotator.php script.

Het script zelf staat in een apart mapje met daarbij de foto's die voor de rotation worden gebruikt.

 

[csshunter]

Hoi KlaasB,

• Google'en kan je verder ook op www.google.nl/search?q=javascript+carrousel
• En op www.google.nl/search?q=javascript+slideshow
• Eén van de mogelijkheden voor een automatische plaatjeswisselaar:
  www.developerscorner.nl/css-exercitions/foto-carrousel.php;
  in plaats van 1 plaatje kan je er ook 3 tegelijk laten wisselen (telkens 3 aan elkaar plakken als 1 img).

Met vriendelijke groet,
CSShunter

 

[MrMorrie1]

Sorry, maar dit kan niet in HTML, hier moet je JavaScript voor hebben.
Wel is heb ik een bannerwisseler voor JavaScript.
Je moet dan even de juiste plaatjes invoegen, snelheid enzovoort.
Hier is de code:
[JS]
<ilayer id="laagA"><layer id="laagB"><div id="laagA"><div id="laagC" >
</div></div></layer></ilayer>
<script type="text/javascript">
var bannerArray = new Array();
var mijnTeller=0;
bannerArray[0] = "<a href='#'><img src='banner1.jpg' border=0 width=500 height=60></a>";
bannerArray[1] = "<a href='#'><img src='banner2.jpg' border=0 width=500 height=60></a>";
bannerArray[2] = "<a href='#'><img src='banner3.jpg' border=0 width=500 height=60></a>";
bannerArray[3] = "<a href='#'><img src='banner4.jpg' border=0 width=500 height=60></a>";
bannerArray[4] = "<a href='#'><img src='banner5.jpg' border=0 width=500 height=60></a>";
bannerwissel();
function bannerwissel() {
if(mijnTeller>bannerArray.length-1){mijnTeller=0};
if(document.all){document.all.laagC.innerHTML=bannerArray[mijnTeller]};
else if (document.layers){
document.layers.laagA.document.layers.laagB.document.open();
document.layers.laagA.document.layers.laagB.document.write(bannerArray[mijnTeller]);
document.layers.laagA.document.layers.laagB.document.close()};
setTimeout("bannerwissel()",3000); // tijd tussen wissel = aantal seconden x 1000
mijnTeller++}
</script>
[/JS]

 

[csshunter]

Hoeps,
Heb je dit script getest, MrMorrie1?
Bij het zien van <ilayer> en <layer> en if (document.all) en if (document.layers) kregen mijn wenkbrowsen een spontane frons-aanval...

• Dus snel even testen: www.developerscorner.nl/csshunter/tests/ilayer-banner-wisselaar.htm

Resultaat:

• Dit script werkt in Internet Explorer, maar in geen enkele andere tegenwoordige browser: in Firefox, Chrome, Opera en Safari is geen banner te zien!

Oorzaken:

• De if (document.all) beperkt de werking tot IE.
• De enige andere mogelijkheid is else if (document.layers), maar dat beperkt de werking tot hele oude Netscape browsers (zelfs de laatste Netscape, nr.9, is al jaren van de markt; en die laat ook geen banner zien).
• Het script (hier gevonden) is van minstens 2005 en dateert uit de tijd van de browser-oorlog tussen IE en Netscape.
• De tag <ilayer> is geen valid html, en is dat ook nooit geweest (in de html-specificaties komt die niet voor, want het is een tag die alleen door Netscape begrepen werd).
• De tag <layer> is ook oud en weggegooid: Netscape 6 kende 'm al niet meer.

Conclusie: naar de schroothoop met dit script!

Een aangepaste versie van bovengenoemde automatische
plaatjeswisselaar (www.developerscorner.nl/css-exercitions/foto-carrousel.php is nog deze:

• Testpagina: www.developerscorner.nl/csshunter/tests/goodnight_ladies-nw.htm

Die komt wat meer in de richting van een banner dan de andere. Verschil met een aantal andere in omloop zijnde javascripts is, dat deze overvloeiers heeft tussen de afbeeldingen, in plaats van flits-flats van de ene naar de andere om te schakelen.

Met vriendelijke groet,
CSShunter