Informationsarchiv.net > Foren-Übersicht > Internet/Webdesign > Webmaster-Anfänger
Warum kostenlos registrieren?

Nur als registriertes Mitglied hast Du vollen Zugriff auf alle Funktionen unserer Website. So kannst Du eigene Fragen stellen und hast die volle Übersicht über neue interessante Themen im Forum.
Jetzt kostenlos registrieren.

Login


Beisst sich: PreLoader/RollOver

Anfänger? Kein Problem einfach hier fragen, wir helfen euch!
Antwort erstellen

Beisst sich: PreLoader/RollOver

Beitragvon Niete am 10.06.2007, 17:31

Guten Tag,

ich habe ein problem mit der Preloader-Funktion und einem Rollover. Sobald ich den Rollover enfüge, wird die seite nicht mehr geladen... was habe ich da falsch gemacht?

Seite Mit Rollover
Seite ohne Rollover


Seite Mit Rollover:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>fotografie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../preload/preloader.js" type="text/javascript">
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: x-small;
color: #FFFFFF;
}
body {
background-color: #999999;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
a {
font-size: x-small;
}
.Stil3 {color: #FFFFFF}
.Stil4 {color: #CCCCCC}
-->

</style>
</head>
<body background="../darkart/main.jpg" style="background-attachment:fixed;" onLoad="MM_preloadImages('thumbnails/IMG_1081.jpg')">
<table width="101%" height="128" border="0">
<tr>
<td height="16" colspan="13"><div align="right">:: gallery</div></td>
</tr>
<tr>
<td height="16" colspan="13"><div align="right"><span class="Stil4">fotografie</span> | <span class="Stil3"><a href="gemaelde.htm">gem&auml;lde</a></span> |<a href="skizzen.htm"> skizzen</a> | <a href="anderes.htm">anderes</a></div></td>
</tr>
<tr>
<td height="16" colspan="13">&nbsp;</td>
</tr>
<tr>
<td width="10%" height="16"><div align="center"><a href="sites/1081.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image13','','thumbnails/IMG_1081.jpg',1)"><img src="thumbnails/sw/IMG_1081.jpg" name="Image13" width="60" height="60" border="0"></a></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1120.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1126.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%" colspan="4"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
</tr>
<tr>
<td height="16"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td colspan="4"><div align="center">[]</div></td>
</tr>
<tr>
<td height="16"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td colspan="4"><div align="center">[]</div></td>
</tr>
</table>

<body onload="preloader()">

</body>

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #999999;
layer-backgroundcolor: #999999;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
<div>
<img src="../preload/preload.jpg" alt="load"></div>
</td></tr></table>
</div>
</html>


Seite ohne Rollover:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>fotografie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../preload/preloader.js" type="text/javascript">
<!--


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->//-->
</script>
<style type="text/css">
<!--
body,td,th {
font-family: Georgia, Times New Roman, Times, serif;
font-size: x-small;
color: #FFFFFF;
}
body {
background-color: #999999;
}
a:link {
color: #FFFFFF;
text-decoration: none;
}
a:visited {
text-decoration: none;
color: #FFFFFF;
}
a:hover {
text-decoration: none;
color: #CCCCCC;
}
a:active {
text-decoration: none;
color: #FFFFFF;
}
a {
font-size: x-small;
}
.Stil3 {color: #FFFFFF}
.Stil4 {color: #CCCCCC}
-->

</style>
</head>
<body background="../darkart/main.jpg" style="background-attachment:fixed;">
<table width="101%" height="128" border="0">
<tr>
<td height="16" colspan="13"><div align="right">:: gallery</div></td>
</tr>
<tr>
<td height="16" colspan="13"><div align="right"><span class="Stil4">fotografie</span> | <span class="Stil3"><a href="gemaelde.htm">gem&auml;lde</a></span> |<a href="skizzen.htm"> skizzen</a> | <a href="anderes.htm">anderes</a></div></td>
</tr>
<tr>
<td height="16" colspan="13">&nbsp;</td>
</tr>
<tr>
<td width="10%" height="16"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1120.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1126.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td width="10%" colspan="4"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
</tr>
<tr>
<td height="16"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td colspan="4"><div align="center">[]</div></td>
</tr>
<tr>
<td height="16"><div align="center"><img src="thumbnails/IMG_1081.jpg" width="60" height="60"></div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td><div align="center">[]</div></td>
<td colspan="4"><div align="center">[]</div></td>
</tr>
</table>

<body onload="preloader()">

</body>

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #999999;
layer-backgroundcolor: #999999;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
<div>
<img src="../preload/preload.jpg" alt="load"></div>
</td></tr></table>
</div>
</html>



danke für anregungen! was ist der fehler?

Gruss FL//Niete
Niete
 
Beiträge: 107
Registriert: 09.07.2006, 12:44
Wohnort: winterthur ch
Nach oben

Beitragvon H-milch am 10.06.2007, 23:25

Ich kenn mich nicht gut genug mit javascript aus um hier deinen fehler zu finden. aber ich weiß, das zum swapImage script auch eine preloade-funktion gehört. Also brauchst du keinen extra preload script.

falls de das problem aber trotzdem nicht gelöst bekommst könntest du auch den swapImage effekt mit CSS machen.

mfg H-milch
H-milch
 
Beiträge: 130
Registriert: 18.07.2006, 23:18
Nach oben

Beitragvon Niete am 10.06.2007, 23:47

das stimmt, zu swapimage gehört eine preload funktion, um die bilder nach dem austauschen schnell anzeigen zu können. aber die "andere" preload-funktion, die sehr warscheinlich das ganze stört, ist verantwortlich für die ganze seite - sprich es sollte ein ladebalken angezeigt werden, bis die komplette seite geladen ist.

ich würde jetzt
<script src="../preload/preloader.js" type="text/javascript">

herumschieben und mal schauen was passiert. hat bis jetzt zwar nix gebracht. "kann" halt erst seit einer woche html.

könnte das so irgendwie funktionieren oder muss ich das script vom swapimage verändern? daran hab ich mich noch nicht gewagt.
Niete
 
Beiträge: 107
Registriert: 09.07.2006, 12:44
Wohnort: winterthur ch
Nach oben

Beitragvon H-milch am 11.06.2007, 02:01

moment.
<script src="../preload/preloader.js" type="text/javascript">
ist also dein preloader. und was ist der rest in deinem script ohne rollover?
<script src="../preload/preloader.js" type="text/javascript">
<!--


<script language="JavaScript" type="text/JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

//-->//-->
</script>


hast du schon jedes script einzelnd getestet?


hab noch n kleinen fehler gefunden... weiß nicht wie ausschlaggebend das ist.
beim einbinden der Javascript-datei muss <script> wieder geschlossen werden.
Code: Alles auswählen
<script src="../preload/preloader.js" type="text/javascript"></script>
H-milch
 
Beiträge: 130
Registriert: 18.07.2006, 23:18
Nach oben

Beitragvon Niete am 11.06.2007, 18:15

mein preloader ohne gar nix anderes ist das:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>fotografie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../darkart/preload/preloader.js" type="text/javascript"></script>

<style type="text/css">


</style>
<script language="JavaScript" type="text/JavaScript"</script>
</head>

<body>
<body onload="preloader()">
</body>

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #999999;
layer-backgroundcolor: #999999;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
<div>
<img src="../darkart/preload/preload.jpg" alt="load"></div>
</td></tr></table>
</div>
</html>


der rest im obersten script ohne rollover ist ein fehler. noch ein überbleibsel vom anderen dokument. die scripts habe ich einzeln getestet, jedoch ohne erfolg...

sobald die rollover funktion drin ist siehts so aus:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>fotografie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="../darkart/preload/preloader.js" type="text/javascript"></script>

<style type="text/css">


</style>
<script language="JavaScript" type="text/JavaScript"</script>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('../darkart/gallery/thumbnails/IMG_1081.jpg')">
<body onload="preloader()">
<a href="../darkart/gallery/sites/1081.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','../darkart/gallery/thumbnails/IMG_1081.jpg',1)"><img src="../darkart/gallery/thumbnails/sw/IMG_1081.jpg" name="Image2" width="60" height="60" border="0"></a>
</body>

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #999999;
layer-backgroundcolor: #999999;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
<div>
<img src="../darkart/preload/preload.jpg" alt="load"></div>
</td></tr></table>
</div>
</html>


ich habe keine ahnung, wie ich swapImage effekt mit CSS herstellen könnte...
gruss
FL//Niete
Niete
 
Beiträge: 107
Registriert: 09.07.2006, 12:44
Wohnort: winterthur ch
Nach oben

Beitragvon H-milch am 12.06.2007, 01:18

verstehst du was von CSS?
dann:
googel ma nach "CSS tab designer". ist n freeware programm das dir vorlagen für CSS-navigationen mit swapImage effekt bereitstellt.
das programm stellt dir auch den code zur verfügung und du kannst ihn dann noch individuell anpassen.

wenn du nix von css verstehst must du ma sagen wobei GENAU du den effekt brauchst, dann kann ich dir den code auch anpassen.


ps: was heist "ohne erfolg"? funktionieren die scripte jetzt einzelnd oder nicht?
hast übrigens wieder fehler in deinem code.
1.hast body 2mal definiert(mehrere funktionen kannst du komma-getrennt aufzählen)
2.es wird eigentlich kein inhalt außerhalt der body tags definiert...

mfg Shawnski
H-milch
 
Beiträge: 130
Registriert: 18.07.2006, 23:18
Nach oben

Beitragvon Niete am 13.06.2007, 08:24

zuerst mal: danke für dein angebot! aber ich bin etwas unter zeitdruck und hab mich jetzt entschieden, einfach den preloader wegzunehmen. viel zu laden gibt es ja ohnehin auf der fertigen seite nicht...

ich hab mir den CSS tab designer mal angeschaut, aber das ist mir zu hoch, den code nachher zu verstehen und nach meinen wünschen abzuändern... ich lass das jetzt einfach und konzentrier mich auf den inhalt der page, was ja das wichtige sein sollte.

laut deinem 1. müsste das:
<body>
<body onload="preloader()">
</body>


richtig nur so aussehen:
<body onload="preloader()">
</body>

stimmt das?

und zu 2.: ja klar, der inhalt fehlt dabei, wollte ich nur zu unserer besseren überschaubarkeit posten.
ach ja, die scripte funktionieren einzeln ohne probleme, einfach bringt mir das nix weils ja dann zusammen einen bruch gibt.

danke & grüsse

FL//Niete
Niete
 
Beiträge: 107
Registriert: 09.07.2006, 12:44
Wohnort: winterthur ch
Nach oben

Beitragvon H-milch am 14.06.2007, 00:28

ja. das erste ist rictig. den body tag gibts nur einmal inerhalb eines html dokuments.

zum 2. ich hatte mir schon gedacht, dass du dein script gekürzt hast. ich hab mich auch nicht über den fehlenden inhalt gewundert, sondern über den vorhandenen inhalt außerhalb der body-tags.

<body onload="preloader()">
</body>

<div id="hidepage"
style="position: absolute;
left:0px;
top:0px;
background-color: #999999;
layer-backgroundcolor: #999999;
height: 100%;
width: 100%;">
<table height="100%" width="100%" align="center">
<tr><td valign="middle" align="center">
<div>
<img src="../darkart/preload/preload.jpg" alt="load"></div>
</td></tr></table>
</div>

</html>


das ganze unterstrichene kommt eigentlich in den body-tag

mfg H-milch
H-milch
 
Beiträge: 130
Registriert: 18.07.2006, 23:18
Nach oben

Beitragvon Niete am 15.06.2007, 13:54

werde das heute abend geich ausprobieren, danke. Zum Inhalt ausserhalb des body tags: diesen teil habe ich dort eingefügt, weil ich irgendwo eine "how-to-do-preloaders"-anleitung gefunden habe und diese einem vorgibt (soviel ich weiss), diesen teil ausserhalb des body tags zu platzieren. kann natürlich auch sein, dass ich das falsch im kopf habe.

gruss
niete
Niete
 
Beiträge: 107
Registriert: 09.07.2006, 12:44
Wohnort: winterthur ch
Nach oben
Antwort erstellen

Ähnliche Themen

PC hängt sich beim Runterladen mit flashget auf
Forum: Software-Hilfe
Autor: Anonymous
Antworten:
Dateien lassen sich nicht mit dem Photo-Editor verknüpfen
Forum: Software-Hilfe
Autor: Anonymous
Antworten:
Neuer Virus ''Blaster'' verbreitet sich rasch
Forum: Online- und PC-Sicherheit
Autor: Computerdirk
Antworten:
Computer macht sich selbstständig..!?
Forum: Hardware-Hilfe
Autor: Anonymous
Antworten:
MS .NET Framework läßt sich nicht installieren
Forum: Software-Hilfe
Autor: Anonymous
Antworten:
Nach oben

Zurück zu Webmaster-Anfänger

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste

Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Deutsche Übersetzung durch phpBB.de
phpBB SEO