Sory, że mam tyle pytań, ale dopiero zacząłem moją przygodę z JavaScriptem i mam następujący problem:
Ten skrypt ma wyświetlić galerię, w Firefoksie działa on idealnie, ale w IE nie pokazuje obrazków i nie wiem czemu, po otwarciu strony u mnie wygenerował teoretycznie prawidłowy kod, ale obrazki się nie ukazują, czy wyjaśni mi ktoś dlaczego?
Z góry sory za bałagan i dużą ilość kodu, ale nie mam pojęcia co powoduje błędy, wiem tylko, ze jest to plik gallery.js z katalogu js
<font size="4">Załączony kod:</span>
plik js/gallery.js
// JavaScript Document
function pobierzListeMiniatur(node){
var miniaturesElementNumber=0;
var miniatures = new Array();
if(node.hasChildNodes()){
var childs = node.childNode;
for(var i in childs){
var inElements = pobierzListeMiniatur(childs[i]);
for(var j in inElements){
miniatures[miniaturesElementNumber++]=inElements[j];
}
}
}
if(node.nodeName == "IMG"){
miniatures[miniaturesElementNumber++]=node;
}
return miniatures;
}
function dodajGrafikeDoGalerii(src, width){
var item = document.createElement("img");
item.src=src;
item.style.position="relative";
item.style.left=0;
this.miniatures3.appendChild(item);
this.leftMax+=width;
}
function galleryEvent(event){
switch(event){
case 0 : //stoi w miejscu
this.moving=0;
break;
case 1 : //szybko w lewo
this.moving=-10;
break;
case 2 : //szybko w prawo
this.moving=10;
break;
case 3 : //wolno w lewo
this.moving=-50;
break;
case 4 : //wolno w prawo
this.moving=50;
break;
}
}
function galleryTimer(gallery){
if((gallery.moving!=0) && (((gallery.leftMax>-(gallery.leftPosition-500)) && gallery.moving<0) || ((gallery.leftPosition<10) && gallery.moving>0) )){
gallery.leftPosition+=gallery.moving;
//podelementy
gallery.miniatures.style.left=gallery.leftPosition;
var surnode = gallery.miniatures3.firstChild;
while(surnode!=null){
surnode.style.left=gallery.leftPosition;
surnode=surnode.nextSibling;
}
}
gallery.timer = setTimeout("galleryTimer(gal);", 100);
}
//zmiana wyswietlanego zdjecia
function galleryChangeBigImage(e){
var imageNode = (e.target)? e.target: e.srcElement;
var imageSrc = imageNode.src.substring(0,imageNode.src.lastIndexOf(".")) + "big" + imageNode.src.substring(imageNode.src.lastIndexOf("."));
this.fotoArea.innerHTML="<img src=\""+ imageSrc +"\" >"
}
//inicjacja zdarzen (wskazanie 4 przyciskow, zajscie kursora z nich, wskazanie obrazu)
function galerryMakeEvents(sl,sr,fl,fr,stop,change){
this.slowLeftButton.onmouseover=sl;
this.slowRightButton.onmouseover=sr;
this.fastLeftButton.onmouseover=fl;
this.fastRightButton.onmouseover=fr;
this.slowLeftButton.onmouseout=stop;
this.slowRightButton.onmouseout=stop;
this.fastLeftButton.onmouseout=stop;
this.fastRightButton.onmouseout=stop;
var surnode = this.miniatures3.firstChild;
while(surnode!=null){
surnode.onmouseover=change;
surnode=surnode.nextSibling;
}
}
//konstruktor galerii
function gallery(galleryName){
this.dodajGrafike=dodajGrafikeDoGalerii;
//zdarzenia
this.event=galleryEvent;
this.makeEvents=galerryMakeEvents;
this.moving=-50;
this.timer = null;
this.change=galleryChangeBigImage;
this.leftPosition=0;
this.leftMax=0;
//obiekty
this.galleryName = galleryName;
this.galleryNode = document.getElementById(galleryName);
this.slowLeftButton = document.createElement("div");
this.slowRightButton = document.createElement("div");
this.fastLeftButton = document.createElement("div");
this.fastRightButton = document.createElement("div");
this.listArea = document.createElement("div");
this.fotoArea = document.createElement("div");
this.miniatures = document.createElement("div");
this.miniatures2 = document.createElement("table");
this.miniatures3 = document.createElement("tr");
//pobranie listy zdjęć
//this.fotoMiniatures = pobierzListeMiniatur(this.galleryNode);
this.galleryNode.innerHTML="";
this.galleryNode.appendChild(this.slowLeftButton);
this.galleryNode.appendChild(this.slowRightButton);
this.galleryNode.appendChild(this.fastLeftButton);
this.galleryNode.appendChild(this.fastRightButton);
this.galleryNode.appendChild(this.listArea);
this.galleryNode.appendChild(this.fotoArea);
this.listArea.appendChild(this.miniatures);
this.miniatures.appendChild(this.miniatures2);
this.miniatures2.appendChild(this.miniatures3);
this.slowLeftButton.innerHTML="<input type=button value='<'>";
this.slowRightButton.innerHTML="<input type=button value='>'>";
this.fastLeftButton.innerHTML="<input type=button value='<<'>";
this.fastRightButton.innerHTML="<input type=button value='>>'>";
//ulozenie elementow
this.galleryNode.style.position="relative";
this.slowLeftButton.style.position="absolute";
this.slowLeftButton.style.left=60;
this.slowLeftButton.style.top=10;
this.slowLeftButton.style.width=40;
this.slowRightButton.style.position="absolute";
this.slowRightButton.style.left=700;
this.slowRightButton.style.top=10;
this.fastLeftButton.style.position="absolute";
this.fastLeftButton.style.left=10;
this.fastLeftButton.style.top=10;
this.fastRightButton.style.position="absolute";
this.fastRightButton.style.left=750;
this.fastRightButton.style.top=10;
this.listArea.style.position="absolute";
this.listArea.style.left=100;
this.listArea.style.top=10;
this.listArea.style.overflow="hidden";
this.listArea.style.height=80;
this.listArea.style.width=590;
this.fotoArea.style.position="absolute";
this.fotoArea.style.left=10;
this.fotoArea.style.top=100;
this.fotoArea.style.height=800;
this.fotoArea.style.width=800;
this.fotoArea.style.valign="top";
this.fotoArea.style.align="center";
this.miniatures.position="absolute";
this.miniatures.style.left=0;
this.miniatures.style.top=1;
this.listArea.style.height=80;
//this.slowRightButton.onmouseover=this.eventSL;
this.timer = setTimeout("galleryTimer(gal);", 100);
}
plik index.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=windows-1250">
<meta name="generator" content="PSPad editor, www.pspad.com">
<title></title>
<script type="text/javascript" src="js/data.js"></script>
<script type="text/javascript" src="js/mainprogram.js"></script>
<script type="text/javascript" src="js/gallery.js"></script>
</head>
<body onload="startPage();">
<table id="calosc" border="1" width="960" height="100%" background="data/tlo1.jpg">
<tr height="90"><td colspan="2">
<div id="logo" width="100%" height="100%" align="center"></div>
</td></tr>
<tr><td width="130" valign="top">
<div id="menu" width="130" height="100%" align="center"></div>
</td><td valign="top">
<div id="main" width="830" height="100%" align="center" style="width: 830"><img src="data/logo3.jpg"></div>
</td></tr>
</table>
<script type="text/javascript"> var gal = new gallery("main");
gal.dodajGrafike("data/logo3.jpg",217);
gal.dodajGrafike("data/logo3.jpg",217);
gal.dodajGrafike("data/logo3.jpg",217);
gal.dodajGrafike("data/logo3.jpg",217);
gal.dodajGrafike("data/logo3.jpg",217);
function gSTOP(){gal.event(0);}
function gLFB(){gal.event(1);}
function gRFB(){gal.event(2);}
function gLSB(){gal.event(3);}
function gRSB(){gal.event(4);}
function gCHANGE(e){
if(!e) var e= window.event;
gal.change(e);
}
gal.makeEvents(gLFB,gRFB,gLSB,gRSB, gSTOP, gCHANGE);
</script>
</body>
</html>
Pliki mainprogram.js i data.js nie są ważne, bo wypełniają one pozostałe dwie sekcje div przy użyciu funkcji startPage();
Przygotowany kod w IE wygenerował następującą zawartość sekcji main:
<DIV id="main" style="WIDTH: 830px; POSITION: relative" align="center" height="100%" width="830">
<DIV style="LEFT: 60px; WIDTH: 40px; POSITION: absolute; TOP: 10px">
<INPUT type="button" value="<" />
</DIV>
<DIV style="LEFT: 700px; POSITION: absolute; TOP: 10px">
<INPUT type="button" value=">" />
</DIV>
<DIV style="LEFT: 10px; POSITION: absolute; TOP: 10px">
<INPUT type="button" value="<<" />
</DIV>
<DIV style="LEFT: 750px; POSITION: absolute; TOP: 10px">
<INPUT type="button" value=">>" />
</DIV>
<DIV style="LEFT: 100px; OVERFLOW: hidden; WIDTH: 590px; POSITION: absolute; TOP: 10px; HEIGHT: 80px">
<DIV style="LEFT: -520px; TOP: 1px" position="absolute">
<TABLE>
<TR>
<IMG style="LEFT: -520px; POSITION: relative" height="0" src="file:///C:/Documents%20and%20Settings/js/logw1/data/logo3.jpg" width="0" />
<IMG style="LEFT: -520px; POSITION: relative" height="0" src="file:///C:/Documents%20and%20Settings/js/logw1/data/logo3.jpg" width="0" />
<IMG style="LEFT: -520px; POSITION: relative" height="0" src="file:///C:/Documents%20and%20Settings/js/logw1/data/logo3.jpg" width="0" />
<IMG style="LEFT: -520px; POSITION: relative" height="0" src="file:///C:/Documents%20and%20Settings/js/logw1/data/logo3.jpg" width="0" />
<IMG style="LEFT: -520px; POSITION: relative" height="0" src="file:///C:/Documents%20and%20Settings/js/logw1/data/logo3.jpg" width="0" />
</TR>
</TABLE>
</DIV>
</DIV>
<DIV style="LEFT: 10px; WIDTH: 800px; POSITION: absolute; TOP: 100px; HEIGHT: 800px; valign: top; align: center">
</DIV>
</DIV>
Acha, wiem, że nie powinienem odwoływać się do zmiennej gal w pliku gallery, ale to tylko drobne błędy, które właśnie usuwam, stąd właśnie fragment:
function gSTOP(){gal.event(0);}
function gLFB(){gal.event(1);}
function gRFB(){gal.event(2);}
function gLSB(){gal.event(3);}
function gRSB(){gal.event(4);}