Bildwechsel 2

Moderator: HTML-Laie

Antworten
Benutzeravatar
Hape
Administrator
Beiträge: 336
Registriert: Fr 22. Mai 2020, 00:33

Bildwechsel 2

Beitrag von Hape »

Bei diesem Bildwechselscript ist es möglich den Bildern auch einen Link zu hinterlegen sowie die Anzeige einer Beschreibung unter dem Bild.

Dieses in den Body kopieren:

Code: Alles auswählen

<script language="JavaScript1.2" type="text/javascript">
var nieuwe_afbeelding=new Array()

//nieuwe_afbeelding[nr]=['pad en naam afbeelding', 'eventuele hyperlink', 'eventuele tekst (ondersteunt HTML tags)']
nieuwe_afbeelding[0]=['foto1.jpg', '#', 'Commentaar']
nieuwe_afbeelding[1]=['foto2.jpg', '#', 'Commentaar']
nieuwe_afbeelding[2]=['foto3.jpg', '#', 'Commentaar']

var maximum_breedte=250 // breedte van de grootste afbeelding
var maximum_hoogte=120 // hoogte van de (grootste afbeelding + commentaar)
var agrondkleur='#FFFFFF'

var tussentijd=5000

// hieronder niets wijzigen:

var ie=document.all&&navigator.userAgent.indexOf("Opera")==-1
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1
for (i=0;i<nieuwe_afbeelding.length;i++){
var cache_afbeelding=new Image()
cache_afbeelding.src=nieuwe_afbeelding[i][0]
}
var actuele_afbeelding=0
function beeldwissel(){
inhoudcontainer='<center>'
if (nieuwe_afbeelding[actuele_afbeelding][1]!="")
inhoudcontainer+='<a href="'+nieuwe_afbeelding[actuele_afbeelding][1]+'">'
inhoudcontainer+='<img src="'+nieuwe_afbeelding[actuele_afbeelding][0]+'" border="0" vspace="3">'
if (nieuwe_afbeelding[actuele_afbeelding][1]!="")
inhoudcontainer+='</a>'
inhoudcontainer+='</center>'
if (nieuwe_afbeelding[actuele_afbeelding][2]!="")
inhoudcontainer+=nieuwe_afbeelding[actuele_afbeelding][2]

if (document.layers){
objectwissel.document.write(inhoudcontainer)
objectwissel.document.close()
}
else if (ie||dom)
objectwissel.innerHTML=inhoudcontainer
if (actuele_afbeelding==nieuwe_afbeelding.length-1) actuele_afbeelding=0
else actuele_afbeelding++
setTimeout("beeldwissel()",tussentijd)
}

if (ie||dom)
document.write('<div id="dsl" style="width:'+maximum_breedte+';height:'+maximum_hoogte+'; background-color:'+agrondkleur+'"></div>')

function start_diashow(){
objectwissel=dom? document.getElementById("dsl") : ie? document.all.dsl : document.hoofdvenster.document.subvenster
if (document.layers)
document.hoofdvenster.visibility="show"
beeldwissel()
}

if (ie||dom)
start_diashow()
else if (document.layers)
window.onload=start_diashow

</script>

<ilayer id="hoofdvenster" width="&{maximum_breedte};" height="&{maximum_hoogte};" bgcolor="&{agrondkleur};" visibility="hide">
<layer id="subvenster" width="&{maximum_breedte};" left="0" top="0"></layer>
</ilayer>

Hier dazu eine Demoseite: Bildwechsel 2

Antworten