nicht angemeldet
Bild blitzt kurz auf bevor Fade-Effekt einsetzt
0 
suit
Bild blitzt kurz auf bevor Fade-Effekt einsetzt
Gunnar BittersmannHallo liebe Community.
Auf meiner Seite www.simoneflorell.de habe ich per Dreamweaver CS3 einen Spry-Effect eingebaut, der die Opazität des Bildes in einer Sekunde von 0 auf 100 erhöhen soll, sprich die Fade-Funktion.
Lädt die Seite, blitzt das zu fadende Bild allerdings erst kurz auf und verschwindet wieder, bevor es schließlich so eingefadet wird, wie ich es beabsichtigt habe.
Kann mir jemand sagen, wo der Fehler liegt?
Der gesamte Code z.B. der Index-Seite ist:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>www.simoneflorell.de</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta name="Copyright" content="Simone Florell">
<META NAME="Title" CONTENT="Simone Florell">
<META NAME="Author" CONTENT="Simone Florell">
<META NAME="Owner" CONTENT="Simone Florell, Grafik und so">
<META NAME="Revisit" CONTENT="10 days">
<meta name="Keywords" content="RZ, EBV, Grafik, Reinzeichnung, DTP, Retouch, Composing, Hamburg, Layout, Logo, Geschäftsausstattung, Freelancer, Freier, Grafiker, Desktop Publishing, Gestaltung, Satz, Bildbearbeitung, Retusche, Lithografie, Print, Corporate Design, Mediengestaltung, Design, Grafikdesign, Illustration, konzeption, Webdesign, Werbung, Kommunikation, Katalog, Litho, Druckvorlagenherstellung, Prepress, Druckvorlagenerstellung, Druckvorstufe, Final, Art, Artwork, Post, Production, Postproduction, Medienproduktion, Bildmontage, Printproduktion, Logoentwicklung">
<META NAME="Description" CONTENT="Freie Grafikerin">
<META NAME="Robots" CONTENT="all">
<META NAME="Language" CONTENT="Deutsch">
<!--[if lt IE 7]>
<style type="text/css" media="screen">
#menuh{float:none;}
body{behavior:url(csshover.htc); font-size:100%;}
#menuh ul li{float:left; width: 100%;}
#menuh a{height:1%;font:bold 0.7em/1.4em arial, sans-serif;}
</style>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico">
<link href="bildschirm.css" rel="stylesheet" type="text/css" media="screen" />
<script src="SpryAssets/SpryEffects.js" type="text/javascript"></script>
<script 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_effectAppearFade(targetElement, duration, from, to, toggle)
{
Spry.Effect.DoFade(targetElement, {duration: duration, from: from, to: to, toggle: toggle});
}
//-->
</script>
</head>
<body topmargin="0" leftmargin="0" marginheight="0" marginwidth="0">
<div id="logo"><a href="index.html"><img src="images/logo.jpg" width="241" height="78" border="0" /></a></div>
<div id="wrapper">
<div id="navibereich">
<div id="menuh">
<ul>
<li><a href="lisad1.htm" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)">REFERENZEN</a>
<ul>
<li><a href="lisad1.htm" class="parent">LISA D.</a></li>
<li><a href="converteam1.htm" class="parent">CONVERTEAM</a></li>
<li><a href="rungnapa1.htm" class="parent">RUNG.NAPA BERLIN</a></li>
<li><a href="sony1.htm" class="parent">SONY</a></li>
<li><a href="bravia1.htm" class="parent">BRAVIA</a></li>
<li><a href="deltalloyd1.htm" class="parent">DELTA LLOYD</a></li>
<li><a href="cda1.htm" class="parent">CDA DEUTSCHLANDS</a></li>
<li><a href="moveeurope1.htm" class="parent">BKK</a></li>
<li><a href="berlinerverlag1.htm" class="parent">BERLINER VERLAG</a></li>
<li><a href="vodafone.htm" class="parent">VODAFONE</a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
</ul>
</li>
</ul>
<ul><li onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><a href="uebermich.htm" class="menuh">ÜBER MICH</a></ul>
<ul><li onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><a href="kontakt.htm" class="menuh">KONTAKT</a></li></ul>
<ul>
<li><a href="galerie1.htm"id="aktuell" class="menuh" onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)">STECKENPFERD</a>
<ul>
<li><a href="galerie1.htm" class="parent">LA ROMANA</a></li>
<li><a href="galerie3.htm" class="parent">BERLIN</a></li>
<li><a href="galerie8.htm" class="parent">HAMBURG</a></li>
<li><a href="galerie9.htm" class="parent">NYC</a></li>
<li><a href="galerie11.htm" class="parent">MISC</a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
<li><a href="#Beispiel" class="parent"> </a></li>
</ul>
</li>
</ul>
<ul><li onmouseover="MM_effectAppearFade(this, 1000, 0, 100, false)"><a href="#Beispiel" class="menuh">PROFIL DOWNLOADEN</a></li></ul>
</div> <!-- end the menuh-container div -->
</div>
<div name="textbereich" style="position:absolute; top:80px; text-align: left;padding: 0px;z-index:0;background: url(images/Hintergrund.jpg) no-repeat;">
<a href="lisad1.htm"><img src="images/intro.jpg" width="1028" height="594" border="0" onload="MM_effectAppearFade(this, 2000, 10, 100, false)" /></a> </div>
<div name="referenzen" style="position:absolute; top:50px; left:0px; z-index:1;">
<!-- Ende referenzen-->
</div>
</div>
</body>
</html>
Falls nötig hier die konkrete Seite (Unterseiten sind auch vom Fehler betroffen):
[link:http://www.simoneflorell.de@title=Problemseite]
Danke + beste Grüße
moloko
-
Kann mir jemand sagen, wo der Fehler liegt?
Works as designed: das Bild ist anfangs sichtbar, wird durchs JavaScript ausgeblendet (hart) und wieder eingeblendet (weich).
Weitere Hilfe will ich dir verständlicherweise[1] in Zusammenhang mit _diesem Script_ nicht geben.
[1] Zitat 1299.
-
Lieber suit,
[1] Zitat 1299.
dem gleich noch ein Zitat hinterher: Zitat#228.
Und hier ein Link, wie man das mit dem Faden sinnvoller hinbekommen kann: Fader-Framework: Kleiner Lehrgang zum vernünftigen Schreiben eines JavaScripts
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:) -
@@suit:
nuqneH
»» Kann mir jemand sagen, wo der Fehler liegt?
Works as designed: das Bild ist anfangs sichtbar, wird durchs JavaScript ausgeblendet (hart) und wieder eingeblendet (weich).
Es sollte also anfangs nicht sichtbar sein, wenn JavaScript aktiviert ist.
.js li {opacity: 0}Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
.js li {opacity: 0}Aber auch JavaScript benötigt seine Zeit und die Klasse ins body-Element zu schreiben.
-
@@suit:
nuqneH
Aber auch JavaScript benötigt seine Zeit und die Klasse ins body-Element zu schreiben.
Es war nicht die Rede davon, das erst bei window.onload ausführen zu lassen.
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Es war nicht die Rede davon, das erst bei window.onload ausführen zu lassen.
Wann dann? :) document ready? Auch da "flackerts", wenn auch nur sehr kurz.
-
@@suit:
nuqneH
»» Es war nicht die Rede davon, das erst bei window.onload ausführen zu lassen.
Wann dann? :) document ready?
Nein. Noch früher. Das Einzeiler-Script steht als erstes im body (bzw. schon im head, wenn die Klasse für diesen gesetzt wird).
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Nein. Noch früher. Das Einzeiler-Script steht als erstes im body (bzw. schon im head, wenn die Klasse für diesen gesetzt wird).
Und das haut hin - auch wenn die Seite im Cache liegt?
-
@@suit:
nuqneH
»» Nein. Noch früher. Das Einzeiler-Script steht als erstes im body (bzw. schon im head, wenn die Klasse für diesen gesetzt wird).
Und das haut hin - auch wenn die Seite im Cache liegt?
Ja. Warum sollte es nicht?
Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)-
Ja. Warum sollte es nicht?
Weil das JavaScript je nach Browser erst nach dem Parsen des DOM ausgeführt wird. Außer natürlich, wenn man document.write verwendet - aber das würde bei der verarbeitung als XML nicht mehr "funzen".
Kannst du ggf. ein kurzes Beispiel posten - zum Ausprobieren - ich steh irgendwie am Schlauch.
Ich hab' da nämlich gerade ein entsprechendens Problem :)
-
Weil das JavaScript je nach Browser erst nach dem Parsen des DOM ausgeführt wird.
Das JavaScript wird ausgeführt, sobald der HTML-Parser das script-Element trifft.
Außer natürlich
Nix »außer«.
wenn man document.write verwendet - aber das würde bei der verarbeitung als XML nicht mehr "funzen".
document.write ist nicht nötig, DOM ginge genauso.
Da ich es für illusorisch halte, dass das XHTML-Dokument als XML ausgeliefert wird, würde ich trotzdem zu document.write raten.
Kannst du ggf. ein kurzes Beispiel posten - zum Ausprobieren - ich steh irgendwie am Schlauch.
<script>
document.write('<style> .js #bla { opacity:0; /* IE-Filter, -moz-opacity usw. ... */ } </style>');
</script>oder
el = document.createElement("style");
el.appendChild('.js #bla { opacity:0; /* IE-Filter, -moz-opacity usw. ... */ }')
document.getElementsByTagName('head').item(0).appendChild(el);
delete el;Mathias
-
document.write('<style> .js #bla { opacity:0; /* IE-Filter, -moz-opacity usw. ... */ } </style>');
Das ist natürlich Blödsinn. Wieso hast du mich auf document.write gebracht? ;) Diese Regel kann einfach im Stylesheet stehen, sie ist schließlich nicht dynamisch. JavaScript hat nur dafür zu sorgen, dass sie angewendet wird, indem sie einem übergeordneten Element (der Einfachheit halber dem Wurzelelement <html>) die Klasse gibt.
document.documentElement.className += " js";Ma- erst nachdenken, dann posten -thias
-
@@molily:
nuqneH
Wieso hast du mich auf document.write gebracht? ;)
Weil '
eval()' zu offensichtlich gewesen wäre?indem sie einem übergeordneten Element (der Einfachheit halber dem Wurzelelement <html>) die Klasse gibt.
Siehe Cheatahs Einwand.
document.documentElement.className += " js";Ah ja, das hatte ich ich in meinem Beispiel vereinfacht. Generell natürlich '
+=', um evtl. schon bestehende Klassenzugehörigkeiten zu erhalten.Qapla'
--
Bildung lässt sich nicht downloaden. (Günther Jauch)
-
-
-
@@suit:
nuqneH
Kannst du ggf. ein kurzes Beispiel posten - zum Ausprobieren - ich steh irgendwie am Schlauch.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="und" lang="und"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>TEST</title> <style type="text/css">[code lang=css].js p {background-color: yellow} ~~~</style> </head> <body> <script type="text/javascript">`document.body.className = "js";`{:.language-javascript}</script> <p>Lorem ipsum dolor sit amet.</p> </body> </html>[/code] Qapla' -- Bildung lässt sich nicht downloaden. (Günther Jauch)
-
-
-
-
-
-
-
-
-