werbeklaus: moseover-effekte

Hallo,
auf meiner Homepage (www.koenigswebers.de.vu) im linken menü-frame habe ich ja moseover-effeke. jetzt habe ich mir in den kopf gesetzt, dass der besucher sehen soll, in welchem menüpunkt er gerade ist. Dazu habe ich an zwei möglichkeiten gedacht, die ich aber beide nicht komplett verwirklichen kann. bitte helft mir dabei. für neue vorschläge bin ich auch dankbar:

1. Ich baue Event-Handler so ein, dass die mosedown grafik bis zum nächsten klick auf einen menüpunkt gleich bleibt. Problem: bei jedemnormalen verlassen des punktes, wird auf die mouseout-datei gewechselt, und wenn man geklickt hat, soll das nicht passieren.

um das zu lösen habe ich an 2. gedacht:
2. MouseOVER effekte werden weggelassen. um trotzdem ein effekt zu haben, dachte ich, schreibe ich den textnicht in die grafik, sondern lege ihn drüber und arbeite mit einem ganz normalen a:hover in der css-datei. aber dieses schreiben von text über eine grafik ist mir noch nicht geglückt.

ich hooffe ihr versteht mich, weil das klinkt alles ein bisschen wirr.
besucht am besten die seite und schauts euch an.

vielen dank schonmal,
werbeklaus

  1. Hallo,

    (www.koenigswebers.de.vu)

    Du weist nicht, wie man Links setzt?
    Das steht doch in den </faq/#Q-19>

    Ich würde das so lösen:
    Menügraphik als Hintergrundbild einbinden,
    anstelle von img den Menütext.

    Hintergrund bei :hover auswechseln.

    onclick alle Menü-hintergründe zurücksetzen
    und nur den angeklickten auf das :hover Bild setzen.

    Gigantischer Vorteil dieser Methode:
    Bei einem Layout-Wechsel muss man nur noch
    an zwei oder drei Stellen im Code was ändern,
    anstatt an zwanzig Stellen.

    Gruß
    Alexander Brock

    --
    SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
    http://emmanuel.dammerer.at/selfcode.html
    Deshalb können Pinguine nicht fliegen:
    Was nicht fliegt kann auch nicht abstürzen
    <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
    http://againsttcpa.com
    1. Erstmal danke für deine antwort.

      Menügraphik als Hintergrundbild einbinden,
      anstelle von img den Menütext.
      Hintergrund bei :hover auswechseln.

      kann man denn auch hintergrundbilder mit eventhandlern ersetzen? das wäre dann ja recht leicht.

      onclick alle Menü-hintergründe zurücksetzen

      einfach jedes bild einzeln mit dem handler ersetzen, oder?

      also danke dir,
      werbeklaus

      1. Hallo,

        Erstmal danke für deine antwort.

        Bitte, gern geschehen.

        Hintergrund bei :hover auswechseln.

        kann man denn auch hintergrundbilder mit eventhandlern ersetzen? das wäre dann ja recht leicht.

        Was ist daran leichter als
        a:hover {
        background-image: url(data/buttons/*over.png);
        }

        Zumal man mit Eventhandlern gar nichts ersetzen kann,
        sondern nur Aktionen auslösen.

        onclick alle Menü-hintergründe zurücksetzen

        einfach jedes bild einzeln mit dem handler ersetzen, oder?

        Ja.
        Ich würde allen Links eine eindeutig ID zuweisen und onclick
        diese ID an eine _selfmade_ Funktion übergeben,
        die in einer Schleife bei allen Links das Hintergrund-Bild
        auf das normale Bild zurücksetzt und _danach_ bei dem
        Link mit der übergebenen (*doofesWort*) ID das Hintergrund-Bild
        auf das :hover Bild ändert.

        Ergänzende Literatur:

        http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

        http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

        Gruß
        Alexander Brock

        --
        SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
        http://emmanuel.dammerer.at/selfcode.html
        Deshalb können Pinguine nicht fliegen:
        Was nicht fliegt kann auch nicht abstürzen
        <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
        http://againsttcpa.com
        1. Hi

          Was ist daran leichter als
          a:hover {
          background-image: url(data/buttons/*over.png);
          }

          stimmt...

          aber ich weiss mit meinen bescheidenen kenntnissen nicht, wie ich des jetzt einbinen muss...

          direkt in den <td>-tag?

          oder als <style> davor?

          Ergänzende Literatur:

          http://de.selfhtml.org/javascript/objekte/document.htm#get_elements_by_tag_name

          http://de.selfhtml.org/javascript/objekte/style.htm#style_eigenschaften

          nochmal danke fr deine arbeit!

          1. Hallo,

            Was ist daran leichter als
            a:hover {
            background-image: url(data/buttons/*over.png);
            }
            aber ich weiss mit meinen bescheidenen kenntnissen nicht, wie ich des jetzt einbinen muss...

            Das musst du entweder in eine CSS-Datei, die du mit
            <link href="datei.css" rel="stylesheet" type="text/css">
            oder in deinen style Bereich im Head schreiben.

            Gruß
            Alexander Brock

            --
            SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
            http://emmanuel.dammerer.at/selfcode.html
            Deshalb können Pinguine nicht fliegen:
            Was nicht fliegt kann auch nicht abstürzen
            <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
            http://againsttcpa.com
    2. Hi,

      Gigantischer Vorteil dieser Methode:

      BTW: Ich halte diese CSS-Menüs i.d.R. für den größten Scheiß!

      CSS-Menüs sind *dann* sinnvoll  (und wirklich gut), wenn sowohl die Schrift, als auch das Drumherum mit HTML und CSS gemacht werden!

      Ist dies (aus z.B. IMHO verständlichen Design-Wünschen) nicht erwünscht: CSS-Menüs nur mit "Grafik" (genauer: Hintergrundgrafik) fallen durch, da kein ALT-Text angezeigt werden kann. Surfer, die die Grafikanzeige abgeschaltet haben (oder gar keine haben: das gilt auch für Suchmaschinen), sehen gar nichts (jedenfalls wenn sie gleichzeitig CSS noch unterstützen).

      Wenn man so schlau ist, die Schrift mit HTML zu machen und nur den Hintergrund auszutauschen, dann scheitert man daran, daß die Schrift vom Surfer variabel eingestellt werden kann, die Hintergrundrafik jedoch nicht.

      Gruß, Cybaer

      --
      Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
      1. Hallo,

        Gigantischer Vorteil dieser Methode:

        BTW: Ich halte diese CSS-Menüs i.d.R. für den größten Scheiß!

        Mäßige dich bitte in deiner Ausdrucksweise.

        CSS-Menüs sind *dann* sinnvoll  (und wirklich gut), wenn sowohl die Schrift, als auch das Drumherum mit HTML und CSS gemacht werden!

        Dann schlage ich hiermit vor, das Bild vollständig durch CSS zu ersetzen,
        wozu gibt es schließlich border-style: outset;

        Ist dies (aus z.B. IMHO verständlichen Design-Wünschen) nicht erwünscht: CSS-Menüs nur mit "Grafik" (genauer: Hintergrundgrafik) fallen durch, da kein ALT-Text angezeigt werden kann. Surfer, die die Grafikanzeige abgeschaltet haben (oder gar keine haben: das gilt auch für Suchmaschinen), sehen gar nichts (jedenfalls wenn sie gleichzeitig CSS noch unterstützen).

        Wenn die Hintergrundgraphik _nicht_ den Text des Links enthält ist
        das vollkommen problemlos, alt-Texte sind nicht erforderlich,
        da die Graphik kein relevanter Inhalt ist, sie ist ein
        Design-Element und wid daher durch CSS definiert.
        Suchmaschinen und Blindenbrowser finden immer noch den Text des Linkes.

        Wenn man so schlau ist, die Schrift mit HTML zu machen und nur den Hintergrund auszutauschen, dann scheitert man daran, daß die Schrift vom Surfer variabel eingestellt werden kann, die Hintergrundrafik jedoch nicht.

        Falsch. Ein Gegenbeispiel ist der Artikel über "runde Ecken":
        http://aktuell.de.selfhtml.org/tippstricks/css/runde_ecken/index.htm
        für eine Menü ist das allerdings viel zu umständlich.

        Ein besseres Beispiel ist http://texturizer.net/firefox/extensions/.

        Das Menü hat auch diese runden Ecken, allerdings ohne div-Suppe.
        Ich habe aber leider nicht herausgefunden, wie die das angestellt haben.

        Gruß
        Alexander Brock

        --
        SelfCode: ie:{ fl:{ br:> va:) ls:# fo:) rl:( n4:( ss:| de:> js:( ch:| sh:( mo:) zu:}
        http://emmanuel.dammerer.at/selfcode.html
        Deshalb können Pinguine nicht fliegen:
        Was nicht fliegt kann auch nicht abstürzen
        <img src="http://www.againsttcpa.com/images/AgainstTCPA-Log01Small.gif" border="0" alt="">
        http://againsttcpa.com
        1. Hi,

          BTW: Ich halte diese CSS-Menüs i.d.R. für den größten Scheiß!
          Mäßige dich bitte in deiner Ausdrucksweise.

          Ja, Mutti. ;->

          OK, war ein bißchen hart. Aber diese Menüs sprießen momentan auch wie (Gift-)Pilze aus dem Boden. =:-/

          Und erstaunlich: Die Befürworter sind mitunter genau die Protagonisten, die sich selber ggf. gegen reine JavaScript-Navigation, über unterlassene ALT-Attribute oder sonstige, Browser und User ausschließende Codierung mokieren (IMHO jeweils zurecht) - mindestens ist es jedoch sehr ruhig aus "dieser Ecke". ;->

          Denn es wundert mich mit Verlaub sehr, daß, nur um eines recht überflüssigen Effektes willen, man bereit ist, die daraus resultierenden Nachteile zu akzeptieren. Zumal bei einer entsprechenden, üblichen (und korrekten) JS-Lösung diese Probleme nicht auftreten können.

          Dann schlage ich hiermit vor, das Bild vollständig durch CSS zu ersetzen, wozu gibt es schließlich border-style: outset;

          Danke, schon vor Jahren ggf. gemacht. Aber daß nun alle Designer bei allen Sites von der von ihnen gestaltbaren Grafik weggehen zu den paar Schriften, die den meisten Browsern vermutlich zur Verfügung stehen (und die selbst dann nicht identisch sind), mag aus "puritanischer" Sicht des Webs als Informationsmedium so sinnvoll sein, wie es auch illusorisch ist. Und mal abgesehen von der Realität: Das Web lebt ja auch von der Vielfalt. Und immer die gleichen Standard-Menü-Schriften zu sehen, würde mich wirklich anöden ...

          Wenn die Hintergrundgraphik _nicht_ den Text des Links enthält ist
          das vollkommen problemlos, alt-Texte sind nicht erforderlich,

          Klar, dann aber ist - wie erwähnt - der Text skalierbar, die Grafik jedoch nicht. Das Ergebnis ist also nicht vorhersehbar (und mitunter halt übel).

          Und hier erwähnte Beispiele mit einer Nur-Grafik-Variante, haben entweder keinen Text (was auch für Suchmaschinen echt klasse ist: Links ohne erkennbare Bezeichnung), oder der Text ist mit CSS rausgeschoben (was dann gut kommt, wenn die Grafikanzeige deaktiviert ist/Grafik nicht geladen werden konnte, aber CSS aktiv ist - nicht daß viele so surfen werden, aber muß das sein?).

          Falsch. Ein Gegenbeispiel ist der Artikel über "runde Ecken":

          Danke, mache ich auch seit Jahren. Aber hierbei handelt es sich nicht um eine Hintergrundgrafik, sondern um mehrere "Rand"-Grafiken um den Inhalt herum. Und ob die nun im Hinter- oder Vordergrund liegen, ob sie mit CSS oder IMG generiert werden, ist dabei doch völlig egal.

          Und ich mache diesen "Aufwand" übrigens durchaus gerne (sieht nett aus und ist trotzdem voll skalierbar).

          Daß aber reine Rahmengrafiken ebenfalls nicht in allen Fällen vom Designer gewünscht sind, liegt auf der Hand (nebst Alternative zu reinen CSS-Rahmen).

          Das Menü hat auch diese runden Ecken, allerdings ohne div-Suppe.
          Ich habe aber leider nicht herausgefunden, wie die das angestellt haben.

          Ohne in den Quelltext geschaut zu haben: Im Vorgriff auf CSS 3 hat Mozilla bereits vor geraumer Zeit runde Ecken per proprietärem CSS eingeführt.

          Gruß, Cybaer

          --
          Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
          1. Hallo.

            Und immer die gleichen Standard-Menü-Schriften zu sehen, würde mich wirklich anöden ...

            Dann wechsele doch täglich deine Standardschriften aus.

            (was dann gut kommt, wenn die Grafikanzeige deaktiviert ist/Grafik nicht geladen werden konnte, aber CSS aktiv ist - nicht daß viele so surfen werden, aber

            ... man wird doch noch einen Grund an den Haaren herbeiziehen dürfen, oder?)

            Falsch. Ein Gegenbeispiel ist der Artikel über "runde Ecken":

            Danke, mache ich auch seit Jahren. Aber hierbei handelt es sich nicht um eine Hintergrundgrafik, sondern um mehrere "Rand"-Grafiken um den Inhalt herum. Und ob die nun im Hinter- oder Vordergrund liegen, ob sie mit CSS oder IMG generiert werden, ist dabei doch völlig egal.

            Semantisch sind <img> für "runde Ecken" meines Erachtens nicht zu vertreten.

            Ohne in den Quelltext geschaut zu haben: Im Vorgriff auf CSS 3 hat Mozilla bereits vor geraumer Zeit runde Ecken per proprietärem CSS eingeführt.

            Ja, in gestalterisch äußerst fragwürdiger Qualität.
            MfG, at

            1. Hi,

              Dann wechsele doch täglich deine Standardschriften aus.

              Brauch ich noch nicht. Diese Mode ist ja noch recht neu ... ;->

              ... man wird doch noch einen Grund an den Haaren herbeiziehen dürfen, oder?)

              Nun, da frage ich mich aber ernsthaft, warum die Browser-Hersteller den Menüpunkt "zeige keine Grafiken an" so leicht zugänglich gemacht haben, wenn er ohnehin nicht gebraucht wird ... ;-)

              Semantisch sind <img> für "runde Ecken" meines Erachtens nicht zu vertreten.

              Genausowenig wie Design-Tabellen. Aber: Wilkommen in der Realität. ;-) Und wenigstens lassen sich diese Dinge semantisch auf "stumm" schalten ...

              Gruß, Cybaer

              --
              Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
              1. Hallo.

                Nun, da frage ich mich aber ernsthaft, warum die Browser-Hersteller den Menüpunkt "zeige keine Grafiken an" so leicht zugänglich gemacht haben, wenn er ohnehin nicht gebraucht wird ... ;-)

                Bei mir liegt diese Funktion übrigens auf der gleichen Schaltfläche wie das Abschalten des mitgesendeten CSS, in älteren Versionen direkt daneben.

                Semantisch sind <img> für "runde Ecken" meines Erachtens nicht zu vertreten.

                Genausowenig wie Design-Tabellen. Aber: Wilkommen in der Realität. ;-) Und wenigstens lassen sich diese Dinge semantisch auf "stumm" schalten ...

                Als Hintergrundbild muss man sie nicht einmal knebeln. Sie verstummen dann nämlich gewissermaßen in Ehrfurcht vor dem Inhalt der Seite.
                MfG, at

                1. Hi,

                  Bei mir liegt diese Funktion übrigens auf der gleichen Schaltfläche wie das Abschalten des mitgesendeten CSS, in älteren Versionen direkt daneben.

                  Dann würde ich auf den Seiten, die "CSS-Rollover-kritisch" verfahren, für den Seitenanfang ein großes Blind-GIF vorschlagen. Dieses sollte folgenden ALT-Text haben: "Sie haben die Grafikanzeige deaktiviert, bitte deaktivieren Sie auch die Nutzung der Stylesheets". :-))

                  Als Hintergrundbild muss man sie nicht einmal knebeln. Sie verstummen dann nämlich gewissermaßen in Ehrfurcht vor dem Inhalt der Seite.

                  Wirf den runden Purchen zu Poden! :)

                  Gruß, Cybaer

                  --
                  Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
                  1. Hallo.

                    Dann würde ich auf den Seiten, die "CSS-Rollover-kritisch" verfahren, für den Seitenanfang ein großes Blind-GIF vorschlagen. Dieses sollte folgenden ALT-Text haben: "Sie haben die Grafikanzeige deaktiviert, bitte deaktivieren Sie auch die Nutzung der Stylesheets". :-))

                    Die Idee ist gar nicht schlecht, aber der Inhalt des "alt"-Attributes würde ja leider auch angezeigt, wenn Stylesheets bereits abgeschaltet sind. -- Ich glaube, ich werde zukünftig nur noch PDF-Dokumente anzeigen lassen, um diesen Schwierigkeiten aus dem Weg zu gehen.
                    MfG, at

      2. Hi,

        CSS-Menüs nur mit "Grafik" (genauer: Hintergrundgrafik) fallen durch, da kein ALT-Text angezeigt werden kann.

        Wie wäre es mit dem title-Attribut für den Link?  I.V. mit der (möglichst "sprechende" URL dürften ausreichend Informationen vorhanden sein.

        Wenn man so schlau ist, die Schrift mit HTML zu machen und nur den Hintergrund auszutauschen, dann scheitert man daran, daß die Schrift vom Surfer variabel eingestellt werden kann, die Hintergrundrafik jedoch nicht.

        Nicht, wenn die Grafik ausreichend viel "Luft" hat. Und selbst wenn nicht: Wer Sehprobleme hat, dem wird mit einer vergrößerten Schrift, die aus der Grafik etwas herausragt, mehr gedient sein, als mit einer (in den meisten Browsern) unsklalierbaren Grafik).

        Und wenn ich abwäge zwischen Besuchern mit vergrößerter Schrifteinstellung bzw. ohne CSS-Unterstützung und Besuchern mit deaktiviertem Javascript, dann dürfte die CSS-Methode mehr Sinn machen.

        freundliche Grüße
        Ingo

        1. Hi,

          Wie wäre es mit dem title-Attribut für den Link?  I.V. mit der (möglichst "sprechende" URL dürften ausreichend Informationen vorhanden sein.

          Schon nicht verkehrt (wenngleich semantisch nicht korrekt und auch nicht unbedingt zu erwarten). Ggf., IIRC auch im Menü des im anderen Thread erwähnten http://www.superfluousbanter.org/archives/000186.php, sieht man aber noch nicht mal, daß überhaupt ein Link existiert. =:-o

          Nicht, wenn die Grafik ausreichend viel "Luft" hat. Und selbst wenn nicht: Wer Sehprobleme hat, dem wird mit einer vergrößerten Schrift, die aus der Grafik etwas herausragt, mehr gedient sein, als mit einer (in den meisten Browsern) unsklalierbaren Grafik).

          Wobei, wenn die "Grafikschrift" denn für die Augen gerade nicht mehr reicht, ein Screenreader aber noch übertrieben wäre, immerhin einfach die Grafik abgeschaltet werden kann. Der dann angezeigte ALT-Text skaliert ja mit dem Text ...

          Und wenn ich abwäge zwischen Besuchern mit vergrößerter Schrifteinstellung bzw. ohne CSS-Unterstützung und Besuchern mit deaktiviertem Javascript, dann dürfte die CSS-Methode mehr Sinn machen.

          Im Prinzip predige ich hier, was auch bei JS-Nutzung zu predigen ist (und hier gerne getan wird - wenn JS nicht gleich ganz "verteufelt" wird ;->: Als Ergänzung jederzeit willkommen, aber nicht davon abhängig machen. Und JS mag deaktiviert sein, dann fehlt halt der (schmückende) Rollover. Aber die Site bleibt *voll* benutzbar. Eine Anwendung, die keine solche Fallback-Möglichkeit anbietet (und JS hat derer ja sogar 2: 1. den HTML-Code, 2. den NOSCRIPT-Bereich), ist für mich schlicht inakzeptabel ...

          ... zumal wenn mir eine Möglichkeit mit Fallback(s) zur Verfügung steht (wozu ich sowohl JS, aber auch "reine Text"- oder "gerahmte" CSS-Links rechne) ...

          Gruß, Cybaer

          --
          Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!
          1. Hi,

            Nicht, wenn die Grafik ausreichend viel "Luft" hat. Und selbst wenn nicht: Wer Sehprobleme hat, dem wird mit einer vergrößerten Schrift, die aus der Grafik etwas herausragt, mehr gedient sein, als mit einer (in den meisten Browsern) unsklalierbaren Grafik).

            Wobei, wenn die "Grafikschrift" denn für die Augen gerade nicht mehr reicht, ein Screenreader aber noch übertrieben wäre, immerhin einfach die Grafik abgeschaltet werden kann. Der dann angezeigte ALT-Text skaliert ja mit dem Text ...

            was aber wohl ziemlich umständlich wäre und da muß einer auch erstmal drauf kommen... Ein echter Text skaliert da wohl leichter. Und - um bei diesem Beispiel zu bleiben - wenn Grafiken abgeschaltet sind, kann diese auch nicht mehr aus der Hintergrundgrafik ragen ;-)

            freundliche Grüße
            Ingo

  2. Hi,

    auf meiner Homepage (www.koenigswebers.de.vu) im linken menü-frame habe ich ja moseover-effeke. jetzt habe ich mir in den kopf gesetzt, dass der besucher sehen soll, in welchem menüpunkt er gerade ist.

    Du könntest z.B.

    • jeder Rubrik ein eigenes Frameset zuweisen, in dem ein eigenes passendes Menü geladen wird.
    • vom Contentframe aus einfach beim Laden mittels JavaScript (und ganz ohne Eventhandler) im Menüframe die betreffende Grafik auswechseln (der Grafikwechsel funktioniert wie beim normalen Rollover, nur eben nicht im aktuellen document, sondern im Frame-Dokument (wie man "dahin" kommt, steht in selfHTML).

    Es gäbe aber noch mehr Lösungsmöglichkeiten ... :-)

    Gruß, Cybaer

    --
    Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!