meerdere images effecten werken niet

Status
Niet open voor verdere reacties.
S

snelsnel

Gebruiker
Lid geworden
12 mei 2003
Berichten
151
Hallo,

Op mijn website heb ik in het linker frame wat javascripts ingevoerd en het bijzondere is dat het middelste plaatje niet meer werkt sinds het onderste script is toegevoegd. Het is nu een statische afbeelding geworden.
Is er iemand die kan zien of deze scripts elkaar bijten?
Ik heb een kopie van het linkerframe zonder het derde script online gezet zodat te zien is hoe eea werkt. De afzonderlijke pagina's zijn:links en kopie

Wie helpt mij uit de brand?
Alvast bedankt,
snelsnel.
 
Ze gebruiken beide window.onload=

window.onload=new Function("setTimeout('beeldwissel()',tussentijd)")

window.onload=startit

de tweede 'overschrijft' de eerste.

Ik denk dat de mooiste oplossing is de eerste functie aan te passen zodat die twee plaatjesreeksen tegelijkertijd aanstuurt.


Wat ook werkt, bovenstaande window.onload regels weglaten en:

<body onload="startbeide()">

function startbeide() {
beeldwissel();
startit();
};


Of misschien (weet ik niet zeker):

window.onload += startit;


Vr.Gr. Egel.
 
Laatst bewerkt:
Hallo Egel,

Bedankt voor je snelle reactie.
Je schrijft over een mooiste oplossing voor de eerste functie aan te passen zodat die twee plaatjesreeksen tegelijkertijd aanstuurt maar hoe doe je dit dan?

Ik heb je tweede oplossing uitgeprobeerd maar ik twijfel of ik het wel goed begrepen heb want het geeft wel een foutmelding (object wordt verwacht) maar niet het gewenste resultaat.
Dan zie ik aan einde van het derde script de regel: window.onload=start_diashow. Ik neem aan dat dit ook een probleem geeft. Hieronder een kopie van de HTML waarin ik de twee regels heb verwijderd en de body onload regel in de body heb geplaatst.

<html>

<head>
<script language="JavaScript1.1">
var nieuwbeeldje=new Array()// hier plaats je je afbeeldingen , je kunt er net zoveel toevoegen als je wilt
nieuwbeeldje[0]="../images/linksafbeeldingen/1 (15).jpg"//naam 1e plaatje
nieuwbeeldje[1]="../images/linksafbeeldingen/1 (16).jpg"//etc....
nieuwbeeldje[2]="../images/linksafbeeldingen/1 (17).jpg"
nieuwbeeldje[3]="../images/linksafbeeldingen/1 (18).jpg"
nieuwbeeldje[4]="../images/linksafbeeldingen/1 (19).jpg"
nieuwbeeldje[5]="../images/linksafbeeldingen/1 (20).jpg"
nieuwbeeldje[6]="../images/linksafbeeldingen/1 (21).jpg"
nieuwbeeldje[7]="../images/linksafbeeldingen/1 (22).jpg"
nieuwbeeldje[8]="../images/linksafbeeldingen/1 (23).jpg"
nieuwbeeldje[9]="../images/linksafbeeldingen/1 (24).jpg"
nieuwbeeldje[10]="../images/linksafbeeldingen/1 (25).jpg"
nieuwbeeldje[11]="../images/linksafbeeldingen/1 (26).jpg"
nieuwbeeldje[12]="../images/linksafbeeldingen/1 (27).jpg"

var tussentijd=7000 //verander hier de tussentijd tusse nhet draaien ( in miliseconden
var teller =1;
var beeldje=new Array()
for (i=0;i<nieuwbeeldje.length;i++){
beeldje=new Image()
beeldje.src=nieuwbeeldje
}
function beeldwissel(){
if (window.createPopup)
blok.filters[0].apply()
document.images.blok.src=beeldje[teller].src;
if (window.createPopup)
blok.filters[0].play()
teller++;
if (teller==beeldje.length)
teller=0;
setTimeout("beeldwissel()",tussentijd)
}

</script>
<meta http-equiv="Content-Language" content="nl">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>links</title>
<base target="hoofd">
</head>

<body background="../images/achtergronden/links1.jpg" style="background-attachment: fixed; background-repeat:no-repeat; font-family:Verdana; font-size:10px; color:#800000" link="#800000" vlink="#800000" alink="#FFFF00" topmargin="175">
<body onload="startbeide()">
function startbeide() {
beeldwissel();
startit();
};


<div align="left">
<p>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</div>
<div align="left">
<p>
&nbsp;
<script type="text/javascript">

/***********************************************
* Translucent Slideshow script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

var trans_width='96px' //slideshow width
var trans_height='72px' //slideshow height
var pause=5000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)
var degree=10 //animation speed. Greater is faster.

var slideshowcontent=new Array()
//Define slideshow contents: [image URL, OPTIONAL LINK, OPTIONAL LINK TARGET]
slideshowcontent[0]=["../images/linksafbeeldingen/1.jpg", "", ""]
slideshowcontent[1]=["../images/linksafbeeldingen/1 (1).jpg", "", ""]
slideshowcontent[2]=["../images/linksafbeeldingen/1 (2).jpg", "", ""]
slideshowcontent[3]=["../images/linksafbeeldingen/1 (3).jpg", "", ""]
slideshowcontent[4]=["../images/linksafbeeldingen/1 (4).jpg", "", ""]
slideshowcontent[5]=["../images/linksafbeeldingen/1 (14).jpg", "", ""]
slideshowcontent[6]=["../images/linksafbeeldingen/1 (6).jpg", "", ""]
slideshowcontent[7]=["../images/linksafbeeldingen/1 (7).jpg", "", ""]
slideshowcontent[8]=["../images/linksafbeeldingen/1 (8).jpg", "", ""]
slideshowcontent[9]=["../images/linksafbeeldingen/1 (9).jpg", "", ""]
slideshowcontent[10]=["../images/linksafbeeldingen/1 (10).jpg", "", ""]
slideshowcontent[11]=["../images/linksafbeeldingen/1 (11).jpg", "", ""]
slideshowcontent[12]=["../images/linksafbeeldingen/1 (12).jpg", "", ""]
slideshowcontent[13]=["../images/linksafbeeldingen/1 (13).jpg", "", ""]
slideshowcontent[14]=["../images/linksafbeeldingen/1 (5).jpg", "", ""]

////NO need to edit beyond here/////////////

var bgcolor='white'

var imageholder=new Array()
for (i=0;i<slideshowcontent.length;i++){
imageholder=new Image()
imageholder.src=slideshowcontent[0]
}

var ie4=document.all
var dom=document.getElementById&&navigator.userAgent.indexOf("Opera")==-1

if (ie4||dom)
document.write('<div style="position:relative;width:'+trans_width+';height:'+trans_height+';overflow:hidden"><div id="canvas0" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div><div id="canvas1" style="position:absolute;background-color:'+bgcolor+';width:'+trans_width+';height:'+trans_height+';left:-'+trans_width+';filter:alpha(opacity=20);-moz-opacity:0.2;"></div></div>')
else if (document.layers){
document.write('<ilayer id=tickernsmain visibility=hide width='+trans_width+' height='+trans_height+' bgColor='+bgcolor+'><layer id=tickernssub width='+trans_width+' height='+trans_height+' left=0 top=0>'+'<img src="'+slideshowcontent[0][0]+'"></layer></ilayer>')
}

var curpos=trans_width*(-1)
var curcanvas="canvas0"
var curindex=0
var nextindex=1

function getslidehtml(theslide){
var slidehtml=""
if (theslide[1]!="")
slidehtml='<a href="'+theslide[1]+'" target="'+theslide[2]+'">'
slidehtml+='<img src="'+theslide[0]+'" border="0">'
if (theslide[1]!="")
slidehtml+='</a>'
return slidehtml
}

function moveslide(){
if (curpos<0){
curpos=Math.min(curpos+degree,0)
tempobj.style.left=curpos+"px"
}
else{
clearInterval(dropslide)
if (crossobj.filters)
crossobj.filters.alpha.opacity=100
else if (crossobj.style.MozOpacity)
crossobj.style.MozOpacity=1
nextcanvas=(curcanvas=="canvas0")? "canvas0" : "canvas1"
tempobj=ie4? eval("document.all."+nextcanvas) : document.getElementById(nextcanvas)
tempobj.innerHTML=getslidehtml(slideshowcontent[curindex])
nextindex=(nextindex<slideshowcontent.length-1)? nextindex+1 : 0
setTimeout("rotateslide()",pause)
}
}

function rotateslide(){
if (ie4||dom){
resetit(curcanvas)
crossobj=tempobj=ie4? eval("document.all."+curcanvas) : document.getElementById(curcanvas)
crossobj.style.zIndex++
if (crossobj.filters)
document.all.canvas0.filters.alpha.opacity=document.all.canvas1.filters.alpha.opacity=20
else if (crossobj.style.MozOpacity)
document.getElementById("canvas0").style.MozOpacity=document.getElementById("canvas1").style.MozOpacity=0.2
var temp='setInterval("moveslide()",50)'
dropslide=eval(temp)
curcanvas=(curcanvas=="canvas0")? "canvas1" : "canvas0"
}
else if (document.layers){
crossobj.document.write(getslidehtml(slideshowcontent[curindex]))
crossobj.document.close()
}
curindex=(curindex<slideshowcontent.length-1)? curindex+1 : 0
}

function jumptoslide(which){
curindex=which
rotateslide()
}

function resetit(what){
curpos=parseInt(trans_width)*(-1)
var crossobj=ie4? eval("document.all."+what) : document.getElementById(what)
crossobj.style.left=curpos+"px"
}

function startit(){
crossobj=ie4? eval("document.all."+curcanvas) : dom? document.getElementById(curcanvas) : document.tickernsmain.document.tickernssub
if (ie4||dom){
crossobj.innerHTML=getslidehtml(slideshowcontent[curindex])
rotateslide()
}
else{
document.tickernsmain.visibility='show'
curindex++
setInterval("rotateslide()",pause)
}
}

if (window.addEventListener)
window.addEventListener("load", startit, false)
else if (window.attachEvent)
window.attachEvent("onload", startit)
else if (ie4||dom||document.layers)

</script>

<br>
&nbsp;</div>

<img src="../images/linksafbeeldingen/1 (15).jpg" name="blok" border=0 style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
<br>
<br>
&nbsp;
<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]=['../images/linksafbeeldingen/2.jpg', '', '']
nieuwe_afbeelding[1]=['../images/linksafbeeldingen/3.jpg', '', '']
nieuwe_afbeelding[2]=['../images/linksafbeeldingen/4.jpg', '', '']
nieuwe_afbeelding[3]=['../images/linksafbeeldingen/5.jpg', '', '']
nieuwe_afbeelding[4]=['../images/linksafbeeldingen/6.jpg', '', '']
nieuwe_afbeelding[5]=['../images/linksafbeeldingen/7.jpg', '', '']
nieuwe_afbeelding[6]=['../images/linksafbeeldingen/8.jpg', '', '']
nieuwe_afbeelding[7]=['../images/linksafbeeldingen/9.jpg', '', '']
nieuwe_afbeelding[8]=['../images/linksafbeeldingen/10.JPG', '', '']


var maximum_breedte=97 // breedte van de grootste afbeelding
var maximum_hoogte=70 // hoogte van de (grootste afbeelding + commentaar)
var agrondkleur='#99cc99'

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[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">
</ilayer>
<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>
</body>

</html>

Groeten,
snelsnel.
 
Code: 
<html>
 <head>
  <meta http-equiv="Content-Language" content="nl">
  <meta http-equiv="Content-Type" content="text/html;charset=windows-1252">
  <title>links</title>
  <base target="hoofd">
  <script language="Javascript1.1">
   <!-- Beeldwisselscript | Egel 051019 ;)
    var beeld = new Array();
    beeld[0] = new Array('1 (15)','1 (16)','1 (17)','1 (18)','1 (19)','1 (20)','1 (21)','1 (22)','1 (23)','1 (24)','1 (25)','1 (26)','1 (27)');
    beeld[1] = new Array('1','1 (1)','1 (2)','1 (3)','1 (4)','1 (14)','1 (6)','1 (7)','1 (8)','1 (9)','1 (10)','1 (11)','1 (12)','1 (13)','1 (5)');
    beeld[2] = new Array('2','3','4','5','6','7','8','9','10');

    var basis = '../images/linksafbeeldingen/';
    var tussentijd = 2000;

    var ronde = 0, teller = new Array(); for (var i = 0; i < beeld.length; i++) teller[i] = 1;
    function beeldwissel() {
     var blok = eval('document.images.blok' + ronde);
     if (window.createPopup) blok.filters[0].apply();
     blok.src = basis + beeld[ronde][teller[ronde]] + '.jpg';
     if (window.createPopup) blok.filters[0].play();
     teller[ronde]++; if (teller[ronde] == beeld[ronde].length) teller[ronde] = 0;
     ronde++; if (ronde == beeld.length) ronde = 0;
     setTimeout('beeldwissel()',tussentijd)
     };

   // -->
  </script>
 </head>
 <body onload="beeldwissel()" background="../images/achtergronden/links1.jpg" style="background-attachment: fixed;
    background-repeat: no-repeat; font-family: Verdana; font-size: 10px; color: #800000" link="#800000" vlink="#800000" alink="#FFFF00">
  <div style="width: 32px; height: 180px;">&nbsp;</div>
  <img name="blok0" src="../images/linksafbeeldingen/1 (15).jpg" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
  <br><br><br>
  <img name="blok1" src="../images/linksafbeeldingen/1.jpg" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
  <br><br><br>
  <img name="blok2" src="../images/linksafbeeldingen/2.jpg" style="filter:progid:DXImageTransform.Microsoft.Stretch(stretchStyle='PUSH')">
 </body>
</html>
Het wijst zichzelf denk ik :).

Zorg er wel voor dat alle plaatjes .jpg met kleine letters zijn, en dat ze allemaal in dezelfde map (var basis) staan.


Vr.Gr. Egel.
 

Bijlagen

Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan