Hallo liebe Leute,

um Buttons zu “sparen“, habe ich diese gleich in das Hintergrund.jpg, meiner Homepage mit eingearbeitet. Jetzt wollte ich eine Art onMouseOver="Bildwechsel(0, Highlight1)"
haben, kriege es aber nicht so ganz hin.
Also wenn die Maus über eine bestimmte Stelle des Hintergrundbildes fährt, soll an dieser Stelle ein anderes Bild erscheinen. Wichtig ist natürlich, dass sich dieser Button immer an der gleichen Stelle (auf dem Hintergrund) befindet, möglichst unabhängig von der Auflösung. Ich kann leider bisher in keiner Dokumentation etwas darüber finden, wie ich die einzelnen Positionen für die Buttons im Hintergrund festlegen kann. Kann mir jemand einen Tipp geben, wie ich das am besten verwirkliche? Ob mit html, java script, css, oder ? Habe leide noch nicht so viel Erfahrung im Web Design & Co, Danke.

Das wird außerordentlich müllig. Da kann ich nur klipp und klar sagen: Nimm zwei Varianten des Bildes. Je nach Browser liegen die Elemente nämlich auch ganz anders und so wie jemand mal seine Schriftgröße verstellt, geht das Chaos dann erst richtig los.

Der IE bietet schon seit sehr langer Zeit optisch ansprechende Filter an, die man sonst über ein einzelnes Bild legen kann, ohne ein zweites selbst vorzubereiten. Ich weiß nicht, wie weit die anderen großen Browser damit inzwischen sind.

Optimalerweise würde ich aber auch so etwas verzichten. Na ja. Am anfang sind die meisten wohl scharf drauf. Anno 1998 hatte ich sogar Midi-Gedüddel auf meiner Website laufen. [img]http://www.fb18.de/gfx/10.gif[/img]

Habe noch nicht wirklich viel Erfahrung, aber es gibt die Möglichkeit, ein Bild in Bereiche zu unterteilen und diese dann als verschiedene Links zu definieren. (siehe http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm )

Allgemein zu javascript: Es gibt viele Personen, die javascript oder allgemein Scripte ausgeschaltet haben aus Sicherheitsgründen. Deswegen würde ich die Seite entweder ohne Javascript gestalten oder zumindest so aufbauen, dass sie auch ohne javascript vernünftig aussieht.

Edit: Statisches HTML ist schön. [img]http://www.fb18.de/gfx/23.gif[/img]

Wenn du dir schon ne Homepage erstellen willst, dann machs lieber gleich richtig, bevor du dich hinterher ärgerst.
Valides (X)HTML im Verbund mit CSS ist da die Lösung, dies erfordert auch kein JS.
Per CSS lässt sich leicht ein :hover definieren, sodass das Bild beim "Überfahren" gewechelt wird. Eine Erweiterung davon: Du nimmst beide Bilder und fügst sie zu einem zusammen … und wechselt beim hover nur die Position des Bildes (u.a. zu sehen auf www.myrage.com/tw )

Also das ganze ist über das Document Object Model von JavaScript machbar. Eleganter wäre es aber tatsächlich mit CSS, wie tilo es vorgeschlagen hat.

Also das ganze ist über das Document Object Model von JavaScript machbar. Eleganter wäre es aber tatsächlich mit CSS, wie tilo es vorgeschlagen hat.

Werden im CSS verlinkte Bilder eigentlich beim Parsen geladen oder erst, wenn sie dargestellt werden sollen? Im letzteren Fall mag die CSS Lösung zwar elegant sein, aber nicht wirklich praktikabel.

Ich habe früher mal ähnliche Geschichten in Javascript realisieren müssen. Die hover-Bilder wurden per Namenskonvention geladen (e.g. link.png - link_over.png). Hat den Vorteil, dass man im HTML nicht dutzende Methodenaufrufe mit unterschiedlichen Parametern bzw. im CSS dutzende :hover Klassen zu verwalten hat.
Der Bildaustausch geschieht einfach mit einer für alle Bilder gleich aussehenden Methode:
<img src="test.jpg" onmouseover="button_over(this);" onmouseout="button_out(this);" />Die Bilder wurden beim Laden der Seite alle im einem Array gespeichert, so dass der Bildwechsel augenblicklich geschieht. Ist in Zeiten von DSL nicht mehr so relevant. Es soll aber immer noch genug ISDN/Analog Zugänge geben, so dass ein Preloading der Bilder in meinen Augen immer noch wichtig ist. Bei abgeschalteten Javascript funktioniert das ganze natürlich nicht mehr, die hintern den Bildern stehenden Links kann man allerdings noch nutzen.

Werden im CSS verlinkte Bilder eigentlich beim Parsen geladen oder erst, wenn sie dargestellt werden sollen?

Eine gute Frage. Ich schätze mal ersteres, bin mir da aber nicht zu 100% sicher.

Die Bilder werden erst beim hover geladen.
Das hat u.a. den Sinn, dass man bei einer Homepage, die nicht nur eine Seite hat und somit höchstwahrscheinlich auch auf jeder Seite besondere Icons/Bilder oder was auch immer hat, nicht alles im Voraus laden muss.
Das Stylesheet definiert man üblicherweise ja für die ganze Homepage…

Auf der Seite, deren URL ich im ersten Post verlinkt habe, ist das nicht-Vorabladen auch kein Problem, da der Hovereffekt nur ein Bild benutzt.

um Buttons zu “sparen“, […]

Mal ehrlich… aus welchem Grund?

Mal ehrlich… aus welchem Grund?

Hm… ich glaube zwar nicht das das eine Rolle spielt, aber ehrlich gesagt soll auf meine Homepage eine Art Sternen-System. Die Sterne stellen die Buttons dar. Dazu ist es unabdingbar, dass die Sterne die korrekten Koordinaten auf der Sternenkarte im Hintergrund haben. Ich dachte das ginge auch, wenn die Sterne (Buttons) bereits in das Hintergrundsbild integriert sind. Zur besseren Übersicht brauche ich einen Mousovereffekt an den entsprechenden Koordinaten. Ich dachte da müsste es ein einfaches skript geben oder so, wo ich sehen kann wie so was geht. Aber ich werd mich mal der css Variante nähern, vielleicht bekomme ich es noch hin.

Optimalerweise würde ich aber auch so etwas verzichten.

Zugegeben viel Schnickschnack, aber ist ja auch nur zu8 privaten Zwecken. Da denke ich mir, wer heute noch mit einer Auflösung von weniger als 1024*768 surft und das mit 56k, hat selber Schuld. Ich jammere ja auch nicht wenn mein Videorecorder keine DVDs spielt [img]http://www.fb18.de/gfx/28.gif[/img] [img]http://www.fb18.de/gfx/25.gif[/img]

Ach ja und Danke auf jeden Fall, erstmal soweit. Sind ja ein paar ganz gute Sachen dabei [img]http://www.fb18.de/gfx/23.gif[/img]

um Buttons zu “sparen“,

Löblich, denn

[x] <a> existiert

habe ich diese gleich in das Hintergrund.jpg, meiner Homepage mit eingearbeitet.

Moment … Du hast ein Hintergrund-Jpeg, welches genauso groß sein soll wie genau WAS?? Deine Homepage? Und was mach ich, wenn mein Browserfenster nicht die gleiche Größe hat?

Jetzt wollte ich eine Art onMouseOver="Bildwechsel(0, Highlight1)" haben,

Warum?

Also wenn die Maus über eine bestimmte Stelle des Hintergrundbildes fährt, soll an dieser Stelle ein anderes Bild erscheinen. Wichtig ist natürlich, dass sich dieser Button immer an der gleichen Stelle (auf dem Hintergrund) befindet, möglichst unabhängig von der Auflösung.

Für solche Spielereien gefällt Dir Cascading Style Sheets, insbesondere position:absolute .. Unabhängig von der Auflösung wird nie funktionieren.

Habe leide noch nicht so viel Erfahrung im Web Design & Co, Danke.

Mit Verweis auf meine Frage nach dem "Warum?": Man merkt es.

Nimm zwei Varianten des Bildes. Je nach Browser liegen die Elemente nämlich auch ganz anders und so wie jemand mal seine Schriftgröße verstellt, geht das Chaos dann erst richtig los.

Genau aus diesem Grund werden zwei Varianten nicht reichen. Mit knapp zweitausend Varianten ist er ganz gut dabei.

Der IE bietet schon seit sehr langer Zeit optisch ansprechende Filter an

die nicht im mindestens W3C-konform sind und daher absolut nicht verwendet werden sollten. Die bietet übrigens auch nicht der IE an (der interpretiert sie nur), sondern Microsoft.

Habe noch nicht wirklich viel Erfahrung, aber es gibt die Möglichkeit, ein Bild in Bereiche zu unterteilen und diese dann als verschiedene Links zu definieren.

Imagemaps lassen sich nicht als Bildhintergrund verwenden

Edit: Statisches HTML ist schön. [img]http://www.fb18.de/gfx/23.gif[/img]

Danke! [img]http://www.fb18.de/gfx/25.gif[/img]

Per CSS lässt sich leicht ein :hover definieren,

welches bisher nur für <a> interpretiert wird.

Werden im CSS verlinkte Bilder eigentlich beim Parsen geladen oder erst, wenn sie dargestellt werden sollen?

Letzteres.

Der Bildaustausch geschieht einfach mit einer für alle Bilder gleich aussehenden Methode:
<img src="test.jpg" onmouseover="button_over(this);" onmouseout="button_out(this);" />

Funktioniert nicht bei Hintergrundbildern und nicht so, wie er es sich vorstellt.

Zugegeben viel Schnickschnack, aber ist ja auch nur zu8 privaten Zwecken. Da denke ich mir, wer heute noch mit einer Auflösung von weniger als 1024*768 surft und das mit 56k, hat selber Schuld. Ich jammere ja auch nicht wenn mein Videorecorder keine DVDs spielt [img]http://www.fb18.de/gfx/28.gif[/img] [img]http://www.fb18.de/gfx/25.gif[/img]

na wenn Du mit so ner Einstellung rangehst, würde ich an Deiner Stelle auf ne eigene Homepage verzichten. [img]http://www.fb18.de/gfx/wand.gif[/img]

Bau Dir halt n Flash-Applet, dann können's sich wenigstens die elitären Leute, die nicht so doof sind, daß sie kein Flash haben, angucken.

Mit Verweis auf meine Frage nach dem "Warum?": Man merkt es.

Schade ich dachte ich könnte es verbergen, ich betone es gerne nochmal.

Sehr konstruktiv Viciarg, Gratuliere! Ich hab’s jetzt als normales Image und bin der Lösung mit Hilfe der „sensitive Grafiken“ schon ziemlich nahe. Kann man von halten was man will, sieht jedenfalls sau geil aus! Deine kritischen Blicke werden es wohl ehr nicht betrachten.

<a>

Bei Gimp ist ein Plugin dabei, das Dir Imagemaps über ein grafisches Tool erstellt. Im Hauptmenu findet man es über Filter -> Web -> ImageMap. Ist sehr einfach zu bedienen und liefert perfekte Ergebnisse.

Da denke ich mir, wer heute noch mit einer Auflösung von weniger als 1024*768 surft und das mit 56k, hat selber Schuld.

Ich surfe bedeutende Teile des Tages mit einer Auflösung von 80x25, vielen Dank auch, und meines Wissens benutzen Sehbehinderte Auflösungen zwischen 1x80 und 1x20.

Sehr konstruktiv Viciarg, Gratuliere!

Den konstruktiven Teil hast Du vermutlich bei Deiner Suche nach etwas, was eine Beleidigung sein könnte (aber keine ist, schließlich habe ich nicht „Du bist ein Idiot.“ geschrieben), überlesen. Ich allerdings habe nicht überlesen, daß Du Dich bereits vorher schon für die anderen Beiträge bedankt hast und bin daher davon ausgegangen, daß Du auf dem Weg einer Lösung warst.

Eine Webseite ist nunmal ein Medium, um Informationen zu übertragen, kein Medium für interaktive Grafiken oder sonstigen Klickibunti-Kram. Dafür gibt es, wie bereits erwähnt, Flash als proprietäres Format, welches via Plugin auf sämtlichen^Wvielen grafikfähigen Systemen laufen sollte.
Wenn ich eine Webseite schreibe, möchte ich, daß möglichst viele Leute die darüber vermittelten Informationen abrufen können, und zwar ohne Beschränkung der Ausgabeform (visuell, auditiv, auf nem Monitor oder ausgedruckt, etc.) und vorallem ohne Beschränkung auf bestimmte Plattformen (Handy, Set-Top-Box, Rechner, Waschmaschine, grafische oder CLI-Oberflächen,) oder gar Browser und Monitorauflösungen. Daß das mit Spielereien wie Javascript o.ä. nicht möglich ist, sollte einleuchtend sein. Wer dann mit Sprüchen wie „Da denke ich mir, wer heute noch mit einer Auflösung von weniger als 1024*768 surft und das mit 56k, hat selber Schuld.“ die mögliche Zielgruppe an Informationsrezipienten noch eingrenzt, muß irgendwas falsch verstanden haben: Es ist kein Privileg, eine Webseite besuchen zu können, ganz im Gegenteil: Du willst Leute erreichen und mit dem Inhalt Deiner Seite für irgendetwas (Produkt, Community, Band, Dich selbst, etc.) begeistern. Sollte dem nicht so sein, warum willst Du dann eine Webseite?

Und noch ein paar konstrukive Links:

HTML und CSS

http://www.selfhtml.net/ - SelfHTML; Referenz zum Nachschlagen oder HTML, CSS, etc. selber lernen
http://www.w3.org/TR/CSS21/ - W3C-Spezifikationen für CSS 2.1
http://www.w3.org/TR/xhtml1/ - W3C-Spezifikationen für XHTML 1
http://www.w3.org/TR/html4/ - W3C-Spezifikationen für HTML 4.01

Webdesign

http://schneegans.de/web/xhtml/ - XHTML oder HTML?
http://schneegans.de/web/horrorkabinett/ - WWW-Horrorkabinett; was man beim Webdesign alles falsch machen kann, am praktischen Beispiel erläutert

Ah Sterenenkarte. Hmm. Dann würde ich … na gibt verschiedene Wege, aber vermutlich mit fünf Frames arbeiten. Links und rechts variabler Breite. Im mittleren oben und unten einen variabler Höhe. Und in der Mitte hast du dann eine feste größe, bei der du dir schon mal keine Gedanken mehr um die Auflösung machen brauchst. Das sollte auch weitesgehend Browserübergreifend funktionieren.

http://schneegans.de/web/horrorkabinett/ - WWW-Horrorkabinett; was man beim Webdesign alles falsch machen kann, am praktischen Beispiel erläutert

Die Seite muss ich mir mal genauer angucken. [img]http://www.fb18.de/gfx/23.gif[/img]

Bei Gimp ist ein Plugin dabei

Jau! Warum einfach, wenns auch kompliziert geht. Verdammt, diese Funktion kannte ich noch nicht… Danke, n1.

Wenn ich eine Webseite schreibe, möchte ich, daß möglichst viele Leute die darüber vermittelten Informationen abrufen können, und zwar ohne Beschränkung der Ausgabeform […]
Es ist kein Privileg, eine Webseite besuchen zu können, ganz im Gegenteil: Du willst Leute erreichen…

Wie ich bereits sagte, es ist eine rein private Page. Du willst mir doch nicht sagen was ich will, oder?

Wenn ich eine Webseite schreibe, möchte ich, daß möglichst viele Leute die darüber vermittelten Informationen abrufen können, und zwar ohne Beschränkung der Ausgabeform […]
Es ist kein Privileg, eine Webseite besuchen zu können, ganz im Gegenteil: Du willst Leute erreichen…

Wie ich bereits sagte, es ist eine rein private Page. Du willst mir doch nicht sagen was ich will, oder?

Das ist wohl richtig, bedenke nur dass es in deinem eigenen Interesse ist, eine Seite zu bauen die auch besucht werden kann und will. Wenn die Seite entweder nicht funktioniert weil man kein JavaScript an hat, den falschen Browser benutzt oder was auch immer oder mit einer miesen Usability daherkommt, guckt sich das auch privat keiner an. Nicht zu vergessen natürlich, dass man sich damit auch gleich Murks angewöhnt den man potentiell dann in größere Seiten (etwa wenn man Websieten gegen Bezahlung macht) auch einbaut.

Weiß doch niemand. Vielleicht ist die Seite so privat, dass sie nur bei ihm als persönliche Startseite laufen soll, etc… Da gibt es schon genügend Möglichkeiten.

Weiß doch niemand. Vielleicht ist die Seite so privat, dass sie nur bei ihm als persönliche Startseite laufen soll, etc… Da gibt es schon genügend Möglichkeiten.

Ich zweifle einfach mal an, dass eine private Startseite so einen aufwändigen Sternenhimmel haben soll und sobald auch nur ein anderer die Seite sehen soll, sollte man über Usability nachdenken.

Nicht zu vergessen natürlich, dass man sich damit auch gleich Murks angewöhnt

Wieso Murks? Deswegen hab ich doch den Beitrag initialisiert, um eine elegante Lösung zu finden. Ich denke das ist mir auch ganz gut gelungen. Ich versuch es ja auch ohne java, aber wenn ich es doch mal benutze… ja mein Gott, besser als Flash was ja wohl noch weniger Leute installiert haben. Bei der Page geht es halt in erster Linie ums Design, da kann ich keine Abstriche machen. Also ich finde das eigentlich ganz gut so. Es ist halt sozusagen ne HP der anderen Art. Bei meinem nächsten Projekt will ich mir eure Ratschläge gerne zu Herzen nehmen.

Weiß doch niemand. Vielleicht ist die Seite so privat, dass sie nur bei ihm als persönliche Startseite laufen soll, etc… Da gibt es schon genügend Möglichkeiten.

Danke.

Wenn ja. Wenn dir die Startseite nicht gefällt, dann suchen wir halt was passenderes für den Sternenhimmel. Wie wäre es mit einem kleinen HTML-Adventure als ein Geschenk für eine Freundin. Und da er weis, welchen Browser sie nutzt und um das maximale herauszuholen, kümmert er sich halt nicht um Konventionen, sondern ums Ergebnis. [img]http://www.fb18.de/gfx/17.gif[/img]

Wie wäre es mit einem kleinen HTML-Adventure als ein Geschenk für eine Freundin. Und da er weis, welchen Browser sie nutzt und um das maximale herauszuholen, kümmert er sich halt nicht um Konventionen, sondern ums Ergebnis

Boah, HOT! Kaum zu glauben, aber das war tatsächlich meine Ausgangsintention [img]http://www.fb18.de/gfx/28.gif[/img] Ist wirklich wahr! Aber inzwischen entspricht die HP aber sogar fast den Konventionen und hat auch eine hohe Usability [img]http://www.fb18.de/gfx/22.gif[/img]

Aber inzwischen entspricht die HP aber sogar fast den Konventionen und hat auch eine hohe Usability [img]http://www.fb18.de/gfx/22.gif[/img]

[img]http://www.fb18.de/gfx/14.gif[/img]

Endergebnis bitte hier vorstellen. Inklusive Projektdokumentation, Planungspaper und Kostenaufstellung. [img]http://www.fb18.de/gfx/25.gif[/img]

Endergebnis bitte hier vorstellen. Inklusive Projektdokumentation, Planungspaper und Kostenaufstellung.

Hm, denke lieber ehr nicht. Dazu ist es doch etwas zu privat… Vielleicht mal eine abgewandelte Version wenn alles fertig ist. Hab’s jetzt doch mit ImageReady (vs Gimp) gemacht. Ist einfach und funktioniert optimal, ich würde sagen da hab ich mir eine Menge Schreibarbeit gespart. [img]http://www.fb18.de/gfx/12.gif[/img]

Versteh zwar nicht, was Du mit Schreibarbeit meinst, aber sparen ist immer gut.

Jo, meine auch eigentlich ehr Arbeit im Allgemeinen. Das Tool nimmt einem ja alles ab.
Schreibarbeit meinte ich nur in Anbetracht auf die gut 10 Seiten Quelltext die ich plötzlich da hatte. Na ja, ist schon etwas unschön viel Geschreibsel und Java ist auch dabei, aber dafür geht es schnell und erfüllt seinen Zweck.