Startseite mit Bild

[DieFüchsin]

kann man das einfach so in Frontpage mit reinschreiben?


PS erkennt man Pacman und Tetris auf dem kleinen Beistelltisch?

[flob]

Ja. Das geht mit JavaScript:
http://de.selfhtml.org/javascript/beispiele/buttons.htm

Das Jan

Man sollte dabei beachten, dass diese Methode nur sinnvoll ist, wenn das Bild in kleine Stücke unterteilt ist, die jeweils höchstens eines der Objekte enthalten, die sich verändern sollen, und zwar vollständig. Ich persönlich würde das anders lösen, das ist für HTML/CSS/JavaScript-Anfänger aber recht kompliziert. Vielleicht hast du da ja ein bisschen Ahnung, deswegen schreib ich meinen Lösungsvorschlag mal auf:

1. Nimm das komplette Bild und erstelle eine Imagemap mit allen Bereichen, die bei MouseOver reagieren sollen (das macht man mit irgendeinem kostenlosen Tool).

2. Erstelle die HTML-Datei. Baue das Bild ein (entweder ganz oder in Stücken). Erstelle nun Layer (absolut positionierte DIVs) mit den MouseOverbildern, die du genau dort positionierst, wo sie auch ins Bild passen (so dass sie das Objekt im Originalbild korrekt verdecken). Mach diese jetzt alle per CSS unsichtbar.

3. Erstelle einen Layer genau über dem kompletten Bild und den unsichtbaren MouseOver-Bildern, der ein transparentes GIF enthält, das genau die Größe des Bildes hat. Auf diesen Layer muss jetzt die Imagemap, die du am Anfang generiert hast, angewendet werden.

4. Definiere für jeden Bereich in der Imagemap jetzt die spezielle onMouseOver-Aktion, also das Erscheinen des versteckten MouseOver-Bildes (und natürlich die onMouseOut-Aktion, dass die Ausgangssituation wieder dargestellt wird).

5. Fertsch!

Falls du Hilfe brauchst -> Ich bin da!

[Treibholz]

Ich glaube das würde zu weit gehen aber... JavaScript MouseOver ist schon lange out, das kann man auch mit Sprites, CSS und background-position lösen. Für Anfänger ist das aber wahrscheinlich etwas zu kompliziert, man muss schließlich den Quelletxt selbst schreiben.

[DieFüchsin]

hm ok ich stells dann wenns fertig ist erstmal ohne "animation" rein und frag dann nochmal wenn ich soweit bin, danke für dein Hilfsangebot, flob!

[DasJan]

@flob: Das klingt mal originell. Kennst du eine Seite, die das so macht? Hast du getestet, wie kompatibel das mit verschiedenen Browsern ist?

JavaScript MouseOver ist schon lange out,

Gut möglich. Das letzte Mal, als ich das gemacht habe, war, äh, 1998 oder so

Das Jan

[flob]

@flob: Das klingt mal originell. Kennst du eine Seite, die das so macht? Hast du getestet, wie kompatibel das mit verschiedenen Browsern ist?

Definitiv genau so kompatibel wie ein ganz normaler MouseOver-Effekt, wie du ihn verlinkt hast. Imagemaps, absolut positionierte DIVs und transparente GIFs unterstützt jeder Browser und an Javascript wird sogar weniger benötigt als beim normalen Bildwechsel. Eine Beispielseite kenne ich nicht - ich weiß nicht mal mehr, ob ich mir das selbst ausgedacht hab oder es vor langer Zeit irgendwo gelesen hab. Ohne es ausprobiert zu haben, bin ich mir aber zu 100% sicher, dass die Lösung funktioniert!

JavaScript MouseOver ist schon lange out,

Gut möglich. Das letzte Mal, als ich das gemacht habe, war, äh, 1998 oder so

Eigentlich ist sowas out, das stimmt! Aber es ist für den beschriebenen Sachverhalt die einzige Lösung, die alle Wünsche exakt umsetzen kann. Und, was früher bei JavaScript das Problem war, nämlich die Unterschiede von Browser zu Browser, ist es heute bei CSS. Deshalb sind CSS-Lösungen zwar geschickt, klein und weniger zeitaufwändig, aber funktioneren eben nicht immer... Für einfache Problemstellungen gilt das natürlich nicht - ein MouseOver für ein Menü unterstützen auch ältere Browser.

[DasJan]

Bei komplexerem CSS bin ich auch immer sehr vorsichtig, da sich die paar Experimente, die ich gemacht habe, als recht problematisch in Sachen Browser-Kompatibilität herausgestellt haben. Mit Erfahrung in dem Bereich wird man vielleicht auch zielsicher Sachen produzieren können, die überall gleich aussehen, ich hatte mich dann aber lieber auf grundlegende CSS-Funktionen beschränkt.

Bei JavaScript gibt es natürlich auch immer das Problem, dass man JavaScript-Behandlung im Browser abschalten kann und man sich von daher nie sicher sein kann, ob der Code auch ausgeführt wird.

Das Jan

[flob]

Bei JavaScript gibt es natürlich auch immer das Problem, dass man JavaScript-Behandlung im Browser abschalten kann und man sich von daher nie sicher sein kann, ob der Code auch ausgeführt wird.

In diesem Fall bleiben die Links aber trotzdem bestehen und funktionieren, es verändert sich lediglich das Aussehen des Bildes nicht. In solchen Fällen kann man, finde ich, Javascript bedenkenlos einsetzen. CSS kann man ja auch deaktivieren...

[DieFüchsin]

wen es interessiert: meine hp ist online, erstmal als prototyp ohne großartige startseite: http://www.rasputinasfuchsbau.de

[TheRock]

@Füchsin: Irgendwie werden bei mir die Bilder unter Computerspiele alle nicht angezeigt
@flob: Bitte werde Webmaster fürs Guyschard Westwood-projekt biteeeeeeeeeee!!!!

[flob]

@flob: Bitte werde Webmaster fürs Guyschard Westwood-projekt biteeeeeeeeeee!!!!

Ohne Screenshot geht gar nix. Und mit Screenshot, der mir gefällt, könnte ich erst ab frühestens in einer Woche ein Design erstellen. Für die Pflege der HP über einen längeren Zeitraum fehlt mir leider die Zeit, das müsstet ihr dann selber machen (ist aber auch nicht schwer)...

[TheRock]

Das würde ich machen mit der Pflege!
Ich kann beim Design aushelfen, falls du willst!
Ich schicke ich dir den Link zum "Entwicklerforum" per PN (ist geheim)^^
Egal wann dus machst hauptsache ich finde jem...
Arbeitest du mit Imageready, kann ich dir gerne psd Dateien zukommen lassen (auch gesliced wenn du willst...)
Und dein Name erscheint *plop* fast wie von selbst in den Credits

[flob]

Alles weitere über PN!

[DieFüchsin]

EDIT2:

Keine Ahnung, was da los ist, wenn ich ein Bild einfüge kommt gleich der ganze Pfad mit, das war anfänglich nicht so... und wenn ich den Pfad auf den Ordner beschränke, wird das Bild nimmer angezeigt.

[flob]

EDIT2:

Keine Ahnung, was da los ist, wenn ich ein Bild einfüge kommt gleich der ganze Pfad mit, das war anfänglich nicht so... und wenn ich den Pfad auf den Ordner beschränke, wird das Bild nimmer angezeigt.

Um was genau geht es?