Enrico: Rollover-Effekt funktioniert nicht / so überhaupt möglich?

Hallo und guten Abend,

heute beschäftigt mich ein schwieriges Problem mit der Umsetzung von onmouseover-Effekten per css.

Unsere Homepage hat als fixen Ausgangspunkt (und auch so festgelegt) eine Größe von 800px auf 600px.

Am unteren Rand werden die grafischen Links angezeigt, die sich beim onmouseover ändern sollen.

Die Grafik http://rapidshare.com/files/410646586/Inaktives_Menu.png verdeutlicht die Ausgangssituation.

So weit, so gut.

Auf der Seite http://bibliothek.ploehr.de/css/rollover wird die Technik, die ich auch verwenden möchte, anhand eines Beispiels verdeutlicht und erklärt.

Hierbei wird die onmouseover-Grafik über die Eigenschaft "background-position" so verschoben, dass der Eindruck entsteht, als wären die Grafiken ausgetauscht worden.

Allerdings wird hierbei davon ausgegangen, dass die Grafiken für die Effekte onmouseover und onmouseout gleich groß sind.

Ich allerdings möchte die onmouseover-Effekte mit underschiedlich großen Grafiken umsetzen.

Die Grafiken http://rapidshare.com/files/410646431/Aktives_Menu_1.png und http://rapidshare.com/files/410646525/Aktives_Menu_2.png verdeutlichen auszugsweise zwei onmouseover-Darstellungen.

Ich erachte es als problematisch, dass, wie bereits geschrieben, die onmouseout- und onmouseover-Grafiken pro Menüpunkt unterschiedlich hoch sind.

Zwei Beispiele:

Grafiklink "Neuigkeiten":

+-
43px |  Neuigkeiten ("onmouseout")
     +-
     |
     |
87px |  Neuigkeiten ("onmouseover")
     |
     |
     +-

Grafiklink "Spielplan":

+-
38px |  Spielplan ("onmouseout")
     +-
     |
     |
57px |  Spielplan ("onmouseover")
     |
     |
     +-

Was hierbei aber seltsam ist, ist, dass, wenn ich in CorelDRAW die gesamte Grafik, also die onmouseout- und die onmouseover-Grafik, markiere, die Gesamthöhe 128px ausgegeben wird, wenn ich aber die einzelnen Grafiken markiere, dann habe ich eben, hier beim Link "Neuigkeiten", 43px und 87px, was in der Summe aber 130px ergibt.

Wo sind die übrigen 2px abgeblieben?

Zurück zum Layout:

Jeder einzelne Menüpunkt wird über einen eigenen div-Bereich positioniert, so dass ich meine überlappende Ausrichtung hinbekomme und jede einzelne Liste muß demnach auch eine eigene Klasse bekommen, ebenso wie jede Grafik.

Grundlegendes Problem ist zunächst, dass es bei mir nicht funktioniert, möglicherweise sehe ich - vor lauter Fehlersuche - den Wald vor lauter Bäumen nicht mehr, ich sehe keine(n) Fehler.

"Funktioniert nicht" bedeutet, dass nichts verschoben wird, ich aber nicht ersehen kann, an welcher Stelle mein(e) Fehler liegt/liegen.

Könnt ihr mir hierbei behilflich sein?

Wäre super :-)

Hier der css-Code:

div.Tafel
{
   position:          absolute;
   height:            600px;
   width:             800px;
   margin:            -300px 0px 0px -400px;
   top:               50%;
   left:              50%;
   background-image:  url(Grafiken/Tafel.png);
   background-repeat: no-repeat;
}

div.Container_Menuepunkt_Neuigkeiten
{
   position: absolute;
   bottom:   10px;
   left:     10px;
}

ul.Menuepunkt_Neuigkeiten
{
   width:   112px;
   height:  43px;
   margin:  0;
   padding: 0;
}

ul.Menuepunkt_Neuigkeiten li
{
   float:   left;
   margin:  0;
   padding: 0;
}

ul.Menuepunkt_Neuigkeiten li a
{
   display:    block;
   background: 0 0 no-repeat;
   width:      112px;
   height:     128px;
   margin:     0;
   padding:    0;
}

ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten
{
   background-image: url(Grafiken/Textlink_Neuigkeiten.png);
}

ul.Menuepunkt_Neuigkeiten li aTextlink_Neuigkeiten:hover
{
   background-position: 0 -43px;
}

Und hier der html-Code:

<div class="Tafel">
   <div class="Container_Menuepunkt_Neuigkeiten">
      <ul class="Menuepunkt_Neuigkeiten">
         <li>
            <a class="Textlink_Neuigkeiten" href="#"></a>
         </li>
      </ul>
   </div>
</div>

Zudem bin ich mir nicht sicher, ob das so funktionieren kann, da ich ja unterschiedlich hohe Grafiken pro Link habe.

Ich bin über jede Hilfestellung dankbar, denn ich würde es schon sehr gerne hinbekommen.

An dieser Stelle wiedermal vielen lieben Dank für eure Unterstützung.

Viele Grüsse
Enrico

  1. Irgendwie wird hier leider oft rapidshare verwendet, um screenshots zu präsentieren. Finde ich äußerst unpraktisch (sehr viele klicks (oder anmeldung) nötig, bis man das Bild mal sieht - wenn überhaupt.

    Versuch(t)s doch mal mit http://imageshack.us/

    gruß, andi

    1. Hallo Andi,

      sehr viele klicks (oder anmeldung) nötig

      Sorry, das wusste ich nicht, Uploads gehen ohne jegliche Anmeldungen etc.

      Wie geschrieben: sorry.

      Gruß,
      Enrico

  2. Hi,

    Die Grafik http://rapidshare.com/files/410646586/Inaktives_Menu.png verdeutlicht die Ausgangssituation.

    Ein Online-Beispiel (valides HTML & CSS) verdeutlich vielleicht etwas - weil ich sofort nach dem Klick auf einen Link sehe, wo von du redest.

    Irgendwelcher Kram auf Rapidshare verdeutlich mir hingegen nur, dass du die Hürden, dir zu helfen, viel zu hoch legst, so dass mein Interesse einen rapid decrease macht.

    MfG ChrisB

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. Hallo ChrisB,

      Ein Online-Beispiel (valides HTML & CSS) verdeutlich vielleicht etwas

      Einen solchen Link habe ich ja auch angegeben: http://bibliothek.ploehr.de/css/rollover

      Irgendwelcher Kram auf Rapidshare

      Hier habe ich Screenshots meines grafischen Aufbaus abgelegt. Wie ich bereits zu Andi gesagt bzw. ihm geschrieben habe, wusste ich nicht, dass das ansehen soviel komplizierter gemacht wird.

      rapid decrease

      Ich finde, Sarkasmus ist hier fehl am Platz, da ich mich bemüht habe, soviele Anhaltspunkte zu liefern, damit ihr mir weiterhelfen könnt.

      Gruß
      Enrico

      1. Hi,

        Ein Online-Beispiel (valides HTML & CSS) verdeutlich vielleicht etwas

        Einen solchen Link habe ich ja auch angegeben: http://bibliothek.ploehr.de/css/rollover

        Das ist aber nur die Beschreibung des Prinzips, das du anwenden möchtest?

        Wo du versucht hast, das umzusetzen - darauf warten wir immer noch.

        Ich finde, Sarkasmus ist hier fehl am Platz, da ich mich bemüht habe, soviele Anhaltspunkte zu liefern, damit ihr mir weiterhelfen könnt.

        Sorry, aber das Rapidshare dafür nicht das richtige ist, hättest du selber erkennen müssen. Wenn du da schon mal etwas runtergeladen hast, dann weißt du wahrscheinlich, dass man da nach einem Download erst mal 'ne halbe Stunde oder so warten muss, bis man den nächsten machen darf ... und du hattest gleich mehrere Files verlinkt, die sich die Helfer erst mal langwierig zusammensuchen müsste. Wenn du die Dinger wenigstens in einem ZIP-Archiv als einen Download bereitgestellt hättest ... dann hätte ich dich nur darauf hinweisen müssen, dass das immer noch eine zu hohe Hürde ist. Niemand hat Lust, etwas herunterzuladen, das dann erst noch irgendwo zu entpacken zu müssen ... nur um *dein* Problem nachvollziehen zu können.

        Also: Online-Beispiel, Bitte.

        MfG ChrisB

        --
        RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
        1. Hallo ChrisB,

          ok, hast recht und soll nicht mehr vorkommen.

          Also: Online-Beispiel, Bitte.

          Ich habe noch keinen webspace, sorry, hier wären die einzelnen Dateien.

          Hintergrundgrafik Homepage: http://img714.imageshack.us/img714/3597/tafel.png
          Grafischer Link:            http://img839.imageshack.us/img839/2526/textlinkneuigkeiten.png
          Ausgangspunkt:              http://img245.imageshack.us/img245/1403/inaktivesmenu.png
          Ein aktiver Link:           http://img706.imageshack.us/img706/5660/aktivesmenu1.png
          Ein weiter aktiver Link:    http://img697.imageshack.us/img697/1028/aktivesmenu2.png

          Die Dateien "tafel.png" und "textlinkneuigkeiten.png" müsstest Du dann "lediglich" in's gleiche Verzeichnis abspeichern, wie die Datei "index.html", die Du aber rauskopieren und extra abspeichern müsstest, die konnte ich nicht hochladen.

          Müsstest nur darauf achten, die Datei "Textlink_Neuigkeiten.png" auch unter diesem Namen abzuspeichern, da imageshack den Namen verkrüppelt hat.

          Tut mir leid für die Umstände, ehrlich...

          Hier die komplette index.html:

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
          <html>
             <head>
                <style type="text/css">
                   <!--
                      html,
                      body
                      {
                         font-weight:       bold;
                         font-family:       Arial;
                         font-size:         14px;
                         color:             white;
                         margin:            0;
                         padding:           0;
                         width:             100%;
                         height:            100%;
                         overflow:          hidden;
                         // background-image:  url(Tafel_Schreibflaeche.png);
                         // background-repeat: repeat;
                      }

          img
                      {
                         border:0px;
                         padding:0px 0px 0px 0px;
                         margin:0px 0px 0px 0px;
                      }

          div.Tafel
                      {
                         position:          absolute;
                         height:            600px;
                         width:             800px;
                         margin:            -300px 0px 0px -400px;
                         top:               50%;
                         left:              50%;
                         background-image:  url(Tafel.png);
                         background-repeat: no-repeat;
                      }

          div.Container_Menuepunkt_Neuigkeiten
                      {
                         position: absolute;
                         bottom:   10px;
                         left:     10px;
                      }

          ul.Menuepunkt_Neuigkeiten
                      {
                         width:   112px;
                         height:  43px;
                         margin:  0;
                         padding: 0;
                      }

          ul.Menuepunkt_Neuigkeiten li
                      {
                         float:   left;
                         margin:  0;
                         padding: 0;
                      }

          ul.Menuepunkt_Neuigkeiten li a
                      {
                         display:    block;
                         background: 0 0 no-repeat;
                         width:      112px;
                         height:     128px;
                         margin:     0;
                         padding:    0;
                      }

          ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten
                      {
                         background-image: url(Textlink_Neuigkeiten.png);
                      }

          ul.Menuepunkt_Neuigkeiten li a.Textlink_Neuigkeiten:hover
                      {
                         background-position: 0 -43px;
                      }
                   //-->
                </style>
             </head>
             <body>
                <div class="Tafel">
                   <div class="Container_Menuepunkt_Neuigkeiten">
                      <ul class="Menuepunkt_Neuigkeiten">
                         <li>
                            <a class="Textlink_Neuigkeiten" href="#"></a>
                         </li>
                      </ul>
                   </div>
                </div>
             </body>
          </html>

          Gruß
          Enrico

          1. Hallo ChrisB,

            das Thema hat sich erledigt, ich setze es jetzt mit Javascript um, das klappt dann bzw. vielleicht komme ich ja über die Javascript-Umsetzung auch auf den (Denk)Fehler im css-Code.

            Gruß
            Enrico

            1. Hallo ChrisB,

              die css-Variante habe ich nun auch umgesetzt bekommen, nachdem ich das Prinzip vollends verstanden habe und von der Liste weggegangen bin.

              Jetzt klappt es wunderbar :-)

              Nochmals Entschuldigung für die Wogen, die ich gestern geschlagen habe.

              Gruß
              Enrico