Owi: Grafikausschnitt bei MouseOver anzeigen

Hallo,

suche einen Threat für folgende JS-/DHTML-Lösung:

eine Schwarz/Weiß-Grafiken, z.B. eine Iconleiste, liegt als Layer über einer gleichpositionierten farbigen Iconleiste. Bei Mouseover über ein "deaktives" Icon wird das Pendant (das 'dahinterliegende') in Farbe angezeigt.
Es handelt sich also nicht um mehrere einzelne Grafiken, sondern um zwei Gleichartige.

Ich weiß, das es das gibt. Hatte vor Jahren mal so was in der Hand. Aber nun finde ich es nicht mehr. Hat jemand einen Vorschlag od. Threat? Oder einen Tipp/Begriff, nach was ich suchen muss?

Vielen Dank im voraus

Gruß
Owi

  1. Hallo

    Hallo

    eine Schwarz/Weiß-Grafiken, [...] Bei Mouseover über ein "deaktives" Icon wird das Pendant (das 'dahinterliegende') in Farbe angezeigt.
    Es handelt sich also nicht um mehrere einzelne Grafiken, sondern um zwei Gleichartige.

    Ich weiß zwar jetzt nicht genau was du meinst, aber kann sein, das du ungefähr das:

    <img src="graybtn.gif" onmouseover="this.src='colorbt.gif'" onmouseout='graybtn.gif'>

    suchst?

    mfg,
    steffenb

    1. Ich weiß zwar jetzt nicht genau was du meinst, aber kann sein, das du ungefähr das:

      <img src="graybtn.gif" onmouseover="this.src='colorbt.gif'" onmouseout='graybtn.gif'>

      Dieser MouseEvent wechselt DIE GANZE GRAFIK aus. Das will ich aber nicht!

      Stell Dir einfach eine Deutschlandkarte vor, und nur die Grenzen der Bundesländer sind eingezeichnet. Bei MouseOver über ein Bundesland wird dieses BL Rot eingefärbt. Allerdings liegen nicht 16 einzelnen farbige Bundesland-Grafiken HINTER der einfachen Karte, sondern eine komplett Rote Karte - und nur der (Bundesland-)Ausschnitt wird rot angezeigt.

      Gruß
      Owi

      1. Hallo Owi,

        vielleicht solltest Du mal das reale Besispiel nennen.
        Es ist schon ein erheblicher Unterschied ob Du mit einer rechteckigen Maske arbeiten willst (Iconleiste) oder mit einer Form-Maske (Bundesländer).

        Für das erstere gäbe es ggf. eine Lösung, wenn auch keine schöne,  bei der letzteren Aufgaben Stellung brauchst Du eh 16 verschiedene Masken, was wieder 16 Bilder entspricht. Die man natürlich auch in ein Bild packen kann.

        Selbst in Flash müstest Du wohl mit 16 Masken arbeiten.

        Liebe Grüße,

        Bernd

        PS: Mir fällt zumindestens nicht ein

        1. Für das erstere gäbe es ggf. eine Lösung, wenn auch keine schöne,  bei der letzteren Aufgaben Stellung brauchst Du eh 16 verschiedene Masken, was wieder 16 Bilder entspricht. Die man natürlich auch in ein Bild packen kann.

          Hi Bernd,

          mein reelles Beispiel IST eine BRD-Karte. Ich weiß, dass für das Icon-Beispiel eine Lösung existiert - aber ich finde diese nicht. Auch wenn das für eine Karte nicht übertragbar ist, hätte ich gerne diese Lösung gehabt. Evtl. gibt ja diese eine Art Denkanstoß...

          Danke schon mal vorab
          Gruß
          Owi

          1. gruss Owi,

            mein reelles Beispiel IST eine BRD-Karte. Ich weiß, dass für das Icon-Beispiel
            eine Lösung existiert - aber ich finde diese nicht. Auch wenn das für eine
            Karte nicht übertragbar ist, hätte ich gerne diese Lösung gehabt. Evtl. gibt
            ja diese eine Art Denkanstoß...

            meinst Du etwas in dieser richtung -
               http://www.pseliger.de/testCases/federalStatesOfGermany.html ?

            dies ist zumindest der "proof of concept" in SCHOEN, wie er
               hier im april letzten jahres schon mal diskutiert wurde.

            gutes gelingen - peterS. - pseliger@gmx.net

            --
            »Because objects in JavaScript are so flexible, you will want to think differently about class hierarchies.
            Deep hierarchies are inappropriate. Shallow hierarchies are efficient and expressive.« - Douglas Crockford
            ie:( fl:) br:> va:( ls:& fo:) rl:| n3;} n4:} ss:} de:µ js:} mo:? zu:]
            1. meinst Du etwas in dieser richtung -
                 http://www.pseliger.de/testCases/federalStatesOfGermany.html ?

              dies ist zumindest der "proof of concept" in SCHOEN, wie er
                 hier im april letzten jahres schon mal diskutiert wurde.

              genial! Das ist so ziemlich genau das, wass ich letztens auch gesucht habe. Aber noch eine Frage dazu. Wäre es irgendwie möglich z.B. rechts neben der Karte jeweiles den Namen des Bundeslandes anzeigen zu lassen auf welchem sich der Mauszeiger gerade befindet? Wenn ja, wie?

              Besten Dank im Voraus.
              Tinu

              1. genial! Das ist so ziemlich genau das, wass ich letztens auch gesucht habe. Aber noch eine Frage dazu. Wäre es irgendwie möglich z.B. rechts neben der Karte jeweiles den Namen des Bundeslandes anzeigen zu lassen auf welchem sich der Mauszeiger gerade befindet? Wenn ja, wie?

                Hat echt niemand eine Idee?!? Oder liest das hier unten überhaupt niemand mehr? Ich hab mal noch bisschen rumgesucht. Hier hab ich noch was gefunden, aber ich werd aus dem Quelltext nicht schlau: http://css.fractatulum.net/sample/layout_zum_mitnehmen.htm.

                Wenn man mit der Maus über die einzelnen Menüpunkte fährt sieht man oben links eine Kurzbeschreibung. Wie kann ich diesen Effekt der Kurzbeschreibung mit dem obengenannten Karteneffekt (http://www.pseliger.de/testCases/federalStatesOfGermany.html) kombinieren?

                Wäre echt froh um Hilfe.

                Tinu

              2. Hallo tinu,

                du nimmst z.B. ein div oder p und sorgst mittels der css-AngabDas musst du mal ausprobieren.

                Diesem Element gibst du eine ID, Dann kannst du mit
                 document.getElementById("ID_des_Elements").firstChild.data="Irgend ein Text";
                den Inhalt ändern. Diese Zeile packst du dann in die Funktionen, die peterS als Eventhandler für onmouseover und onmouseout definiert hat.

                Ich habe das jetzt nicht ausprobiert. Versuch es einfach mal. Mehr zu
                on...- und getElement... findest du im Javascriptkapitel von selfhtml.

                Gruß, Jürgen

                1. Hallo,

                  Korrektur:

                  du nimmst z.B. ein div oder p und sorgst mittels der css-AngabDas musst du mal ausprobieren.

                  du nimmst z.B. ein div oder p und sorgst mittels der css-Angabe float dafür, das es neben dem Bild liegt. Vieleicht geht auch ein span. Das musst du mal ausprobieren.

                  Diesem Element gibst du eine ID, Dann kannst du mit
                  document.getElementById("ID_des_Elements").firstChild.data="Irgend ein Text";
                  den Inhalt ändern. Diese Zeile packst du dann in die Funktionen, die peterS als Eventhandler für onmouseover und onmouseout definiert hat.

                  Ich habe das jetzt nicht ausprobiert. Versuch es einfach mal. Mehr zu
                  on...- und getElement... findest du im Javascriptkapitel von selfhtml.

                  Gruß, Jürgen