nicht angemeldet
Überblendung mit JavaScript (Evtl. mini JOB zu vergeben)
0 0 0
Überblendung mit JavaScript (Evtl. mini JOB zu vergeben)
Hi,
ich habe einen Inhaltbereich auf eine Seite sagen wir mal 800x800px beispielweise.
Oben befinden sich die Navigationslinks.
Klickt man auf einen Navigationslink, soll man natürlich zu dem Link (zu der Seite) gelangen, jedoch soll während des Übergangs zwischenzeitlich kurz ein Bild eingeblendet werden, welches diese 800x800 Fläche verdeckt.#
Beispiel:
|link1-link2-link3|
| |
Ist man nun auf "link1" und klickt man auf "link2", soll ein Foto auf dieser Fläche kurz ein/ausgeblendet werden und man kommt auf "link2"....
Sowas in der Richtung wäre prima: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/fader1.htm
Ich wäre dankbar für Vorschläge im tech. Bereich. Kenne mit JS gar nicht aus. Soll ab IE7 und im Firefox/Gecko funktionieren.
Bitte verkneift euch Kommentare außerhalb des tech. Rahmens und zur Philosophie solcher Spielereien - das kommt wann anders ;)
Gerne könnt ihr mir eure Preisvorschläge posten, für wie viel ihr sowas machn würdet.
-
Hi,
Ich hoffe doch mal, es geht hier nicht um Werbeeinblendungen bei Seitenwechseln, hm?
Würde ich mir als User einmal anschauen und nie mehr wiederkommen. ;-)
Grüße, Fred
-
Hi,
Ich hoffe doch mal, es geht hier nicht um Werbeeinblendungen bei Seitenwechseln, hm?
Nein :) Außerdem gehts nur um Technik hier.
Danke an alle mit den Tipps! Ich werde mich die Tage hinsetzen und versuchen das hinzubiegen.
Notfalls komme ich auf das 50€ Angebot zurück, wenn auch ungern. Ich hielt eher maximal die Hälfte für angemessen. Wenn sich einer mit JS auskennt wie ich mich z.B. mit CSS, dann dauert das keine halbe Stunde (maximal). Das sollte aber bitte zu keiner Diskussion anregen, sondern zu evtl. neuen Preisvorschlägen... Wenn nicht, ist auch okay, ich weiss, dass jeder seinen Grund hat, warum er für etwas wie viel verlangt und muss das auch nicht vor mir rechtfertigen!
-
-
Hi,
1. Du legst die Bilder in der Seite ab, jeweils absolut positioniert, und nur eins sichtbar, etwa so:
<div style="position:relative"> <img src="bild1.jpg" style="position:absolute;display:inline" /> <img src="bild1.jpg" style="position:absolute;display:none" /> <img src="bild1.jpg" style="position:absolute;display:none" /> <img src="bild1.jpg" style="position:absolute;display:none" /> </div>Evtl. auch noch top/left setzen.
2. Du bindest ein Click Event an jeden Link und übergibst dem EventHandler eine Referenz auf das Bild in das du überblenden willst (etwa über eine ID oder den Index im Container). (oder verbindest auf andere Weise den Link mit dem entsprechenden Bild)
3. Im EventHandler
a) setzt du das entsprechende Bild auf display:inline,
b) findest das aktuell angezeigte Bild,
c) startest einen Timer, der der die Transparenz des neuen Bildes von 0 auf 1 animiert und die des alten von 1 auf 0.
d) wenn er fertig mit der Animation ist, wechselst du die Seite.Du kannst natürlich auch statt display:none die Bilder auf Transparenz 0 setzen.
Gruß!
-
Lieber Gast123,
Sowas in der Richtung wäre prima: http://aktuell.de.selfhtml.org/artikel/javascript/fader-framework/fader1.htm
- Du legst die Bilder in der Seite ab, jeweils absolut positioniert, und nur eins sichtbar, etwa so:
<div style="position:relative">
<img src="bild1.jpg" style="position:absolute;display:inline" />
<img src="bild1.jpg" style="position:absolute;display:none" />
<img src="bild1.jpg" style="position:absolute;display:none" />
<img src="bild1.jpg" style="position:absolute;display:none" />
</div>Da fand ich den strukturellen Ansatz der von Shyne genannten Quelle sinnvoller (war ja auch von mir). Dein <div> könnte auch ein simples (aber wesentlich sinnvolleres weil Sinn-tragendes) <p> sein. Auch <p> Elementen darf man Klassen und eine ID vergeben. Das wäre sinnvoller, als diese inline-Styles in Deinem Vorschlag. ~~~html <p id="werbung"> <img ... /> <img ... /> <img ... /> </p>Hier kann man mittels CSS über die ID "werbung" sehr bequem sowohl auf den Textabsatz, als auch auf die Bilder darin zugreifen. Im JavaScript braucht man dann nur noch die abweichenden CSS-Eigenschaften zu manipulieren. Und der Code bleibt übersichtlicher und besser wartbar.
- Im EventHandler
[...]
Dazu hatte Shyne bereits umfassende Selbstlernmaterialien (siehe gepostete Quelle) genannt.
Dein Hinweis war sicherlich gut, jedoch finde ich manche Details noch nicht optimal gelöst.
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:° n4:? de:> ss:| ch:? js:) mo:} zu:)-
Hi,
Da fand ich den strukturellen Ansatz der von Shyne genannten Quelle sinnvoller (war ja auch von mir). Dein <div> könnte auch ein simples (aber wesentlich sinnvolleres weil Sinn-tragendes) <p> sein. Auch <p> Elementen darf man Klassen und eine ID vergeben. Das wäre sinnvoller, als diese inline-Styles in Deinem Vorschlag.
<p id="werbung">
<img ... />
<img ... />
<img ... />
</p>> > Hier kann man mittels CSS über die ID "werbung" sehr bequem sowohl auf den Textabsatz, als auch auf die Bilder darin zugreifen. Im JavaScript braucht man dann nur noch die abweichenden CSS-Eigenschaften zu manipulieren. Und der Code bleibt übersichtlicher und besser wartbar. Es ging ja hier nicht darum, direkt möglichst schönen und wartbaren Code zu schreiben, sondern ich wollte einfach nur einen Ansatz bieten. Dass man auch P Elementen eine ID und eine Klasse geben darf, ist mir schon bewusst. Ich bin ja nicht blöd. Und dass man zwecks Übersicht die CSS Sachen in seperate Dateien auslagern sollte/kann, ist auch klar. > Dein Hinweis war sicherlich gut, jedoch finde ich manche Details noch nicht optimal gelöst. Ich will hier wie gesagt, keine optimale Lösung, sondern Denkanstöße bieten. MfG!
-
-
Hallo,
Ich mache dir das für ca. 50 Euro. Du musst natürlich die Bilder liefern und das HTMl, damit man es einbauen kann.
Habe mich mal intensiv mit dem genannten Fader-Framework beschäftigt und es m.M.n sogar ein bisschen verbessert (IE-tauglich gemacht).Jetzt in der Wirtschaftskrise muss ich alles mitnehmen...
Gruß,
donp at gmx dot ch