Guten tag aus dem Elsaß,
für unsere Firmenhomepage möchte ich gerne das Skript" Bilder in JavaScript Beispiel 6: Mit JavaScript Bilder überblenden" verwenden - das ist genau die Funktion die ich brauche um zwei Bilder via Mausklick ineinander überblenden zu lassen - Super!
Ich habe das ganze auf eine Testseite eingebaut, leider funktioniert das Script nicht im IE 6.0, im Firefox jedoch gut, im netscape auch nicht aber den lass ich mal ausser acht.....
Der IE bringt mir die Fehlermeldung das auf Zeile 33 (ich habe sie im skript farbig markiert) "filters.alpha.opacity" ist null oder kein Objekt.
Diese Zeilen sollen doch die Funktion für den IE sichern, oder?
Hier das script:
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<!-- // JavaScript-Bereich für ältere Browser auskommentieren
// Funktion zum Überblenden von einem Bild auf ein anderes
// Mit den beiden Parametern werden die IDs der Bildelemente angegeben,
// die ineinander übergeblendet werden sollen.
function fade_to (element_id1, element_id2) {
// Prozess noch nicht gestartet?
if (!this.proc) {
// Überblendung auf das gleiche Bild ist nicht möglich!
if (element_id1 == element_id2) {
alert ('Sie muessen die IDs zweier unterschiedlicher HTML-Elemente angeben!');
return;
}
// Prozess starten
this.proc = window.setInterval ('fade_to(\'' + element_id1 + '\', \'' + element_id2 + '\')', 50);
}
else {
// Effekt läuft bereits
// Verweise auf die Elemente holen...
var e = document.getElementById (element_id1);
var e2 = document.getElementById (element_id2);
var opacity1, opacity2;
// Aktuelle Transparenz der beiden Bilder bei
// Opera und Mozilla-Abkömmlingen mit opacity Style-Eigenschaft..
if (!e.filters) {
opacity1 = !e.style.opacity ? 1 : parseFloat (e.style.opacity);
opacity2 = !e2.style.opacity ? 0 : parseFloat (e2.style.opacity);
}
// bzw. über die Filter des IE ermitteln.
else {
opacity1 = !e.filters.alpha.opacity ? 1 : parseFloat (e.filters.alpha.opacity) / 100;
opacity2 = !e2.filters.alpha.opacity ? 0 : parseFloat (e2.filters.alpha.opacity) / 100;
}
// Volle Transparenz von Bild 1 noch nicht erreicht?
if (opacity1 != 0) {
// Transparenz der beiden Bilder um 5% in die unterschiedlichen
// Richtungen anpassen.
opacity1 -= 0.05;
opacity2 += 0.05;
// Anpassung der Styles erfolgt wieder Browserabhängig
if (!e.filters) {
e.style.opacity = opacity1;
e2.style.opacity = opacity2;
}
else {
e.filters.alpha.opacity = opacity1;
e2.filters.alpha.opacity = opacity2;
}
}
else {
// Volle Transparenz von Bild 1 erreicht!
// Das andere Bild ist in diesem Fall vollständig eingeblendet!
window.clearInterval (this.proc);
this.proc = null;
}
}
}
// -->
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
und hier der html-code:
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
<HTML>
<HEAD>
<TITLE></TITLE>
<script language="JavaScript" type="text/JavaScript">
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
//-->
</script>
<script type="text/javascript" src="fader.js"></script>
</HEAD>
<BODY>
<div id="Layer1" style="position:absolute; visibility:visible; z-index:3"><img id="fadeto" alt="" src="EB_renovation_03_nachher.jpg"></div>
<div id="Layer1" style="position:absolute; visibility:visible; z-index:3"><img id="fadeto2" alt="" src="EB_renovation_03_vorher.jpg">
<br>
<a href="javascript:fade_to ('fadeto', 'fadeto2')" title="">vorher</a><br>
<a href="javascript:fade_to ('fadeto2', 'fadeto')" title="">nachher</a>
</div>
</BODY>
</HTML>
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Für einen Tipp bin ich ( - meist im Printbereich unterwegs und Javascript-Laie ) wäre ich sehr dankbar!
Beste Grüße
Hilde
Forum.EvoComp.de
Forum zum Thema Webprogrammierung
Bilder in JavaScript Beispiel 6: Mit JavaScript Bilder überb
3 Beiträge • Seite 1 von 1
Bilder in JavaScript Beispiel 6: Mit JavaScript Bilder überb
von hilde am Di 14. Jul 2009, 15:48
- hilde
- Beiträge: 2
- Registriert: Di 14. Jul 2009, 15:16
von alm am Di 14. Jul 2009, 22:33
Hallo und Willkommen hilde,
funktioniert das nur im ie 6 nicht oder auch im 7er? Ist schon eine Weile her, dass ich die Beispiele umgesetzt habe, allerdings meine ich mich erinnern zu können die Scripte getestet zu haben... Funktioniert das Beispiel auf meiner Seite denn auch nicht?
Sicher, dass es sich um diese Zeile handelt? Eigentlich wird durch die Abfrage erst einmal geprüft, ob die Eigenschaft existiert und ein Defaultwert gesetzt, falls nicht.
Schon mal versucht Startwerte bei der Definition der Bilder per Style vorzugeben? Also sowas wie:
Dann sollten die Zugriffe auf jeden Fall funktionieren, da die Werte in der Style-Struktur vorhanden sind.
Ansonsten würde ich es einfach mal mit einer anderen Zugriffart probieren. Statt e.filters.alpha.opacity sollte auch etwas in der Art e.filters = "Alpha(opacity="+opacity1+")" bei einer Zuweisung funktionieren. Die Filter sind in einem Array unter e.filters[0] usw. abgelegt. Um den entsprechenden Wert zu ermitteln muss dann das Filter-Array nach dem entsprechenden Filter durchsucht und der Wert daraus extrahiert werden. Bei der Erforschung der dahinter liegenden Datenstruktur kann evtl. ein Tool wie Firebug bzw. ein entsprechendes IE-Pendant (z.B. IE Developer Toolbar) helfen.
Grüße
Alex
funktioniert das nur im ie 6 nicht oder auch im 7er? Ist schon eine Weile her, dass ich die Beispiele umgesetzt habe, allerdings meine ich mich erinnern zu können die Scripte getestet zu haben... Funktioniert das Beispiel auf meiner Seite denn auch nicht?
Sicher, dass es sich um diese Zeile handelt? Eigentlich wird durch die Abfrage erst einmal geprüft, ob die Eigenschaft existiert und ein Defaultwert gesetzt, falls nicht.
Schon mal versucht Startwerte bei der Definition der Bilder per Style vorzugeben? Also sowas wie:
- Code: Alles auswählen
<img id="fadeto" style="filter:Alpha(opacity=0)" alt="" src="EB_renovation_03_nachher.jpg">
<img id="fadeto2" style="filter:Alpha(opacity=100)" alt="" src="EB_renovation_03_vorher.jpg">
Dann sollten die Zugriffe auf jeden Fall funktionieren, da die Werte in der Style-Struktur vorhanden sind.
Ansonsten würde ich es einfach mal mit einer anderen Zugriffart probieren. Statt e.filters.alpha.opacity sollte auch etwas in der Art e.filters = "Alpha(opacity="+opacity1+")" bei einer Zuweisung funktionieren. Die Filter sind in einem Array unter e.filters[0] usw. abgelegt. Um den entsprechenden Wert zu ermitteln muss dann das Filter-Array nach dem entsprechenden Filter durchsucht und der Wert daraus extrahiert werden. Bei der Erforschung der dahinter liegenden Datenstruktur kann evtl. ein Tool wie Firebug bzw. ein entsprechendes IE-Pendant (z.B. IE Developer Toolbar) helfen.
Grüße
Alex
bilder in javascript beispiel 6
von hilde am Mi 15. Jul 2009, 09:03
Hallo Alex,
vielen dank für deine mühe und die schnelle antwort !
dein skript funktioniert im ie 6 auch nicht auf deiner webseite, und wenn ich es aufrufe mit dem ie 6 bekomme ich die selbe fehlermeldung.
den ie 7 habe ich nicht installiert - hat unser systemadmin nicht erlaubt...
das mit den startwerten habe ich versucht, brachte jedoch das ergebnis, das im ie 6 gar keine bilder mehr zu sehen waren, im firefox jedoch alles in ordnung.
leider steige ich bei deinen weiteren vorschlägen aus - da reichen einfach meine kenntnisse in javascript nicht aus.
ich werde trotzdem noch ein wenig damit herumprobieren - vielleicht habe ich ja "anfängerglück" und mir gelingt etwas - dann lasse ich es dich wissen.
vielen dank nochmal und einen schönen tag wünscht
hilde
vielen dank für deine mühe und die schnelle antwort !
dein skript funktioniert im ie 6 auch nicht auf deiner webseite, und wenn ich es aufrufe mit dem ie 6 bekomme ich die selbe fehlermeldung.
den ie 7 habe ich nicht installiert - hat unser systemadmin nicht erlaubt...
das mit den startwerten habe ich versucht, brachte jedoch das ergebnis, das im ie 6 gar keine bilder mehr zu sehen waren, im firefox jedoch alles in ordnung.
leider steige ich bei deinen weiteren vorschlägen aus - da reichen einfach meine kenntnisse in javascript nicht aus.
ich werde trotzdem noch ein wenig damit herumprobieren - vielleicht habe ich ja "anfängerglück" und mir gelingt etwas - dann lasse ich es dich wissen.
vielen dank nochmal und einen schönen tag wünscht
hilde
- hilde
- Beiträge: 2
- Registriert: Di 14. Jul 2009, 15:16
3 Beiträge • Seite 1 von 1