Alpha-Kristall: CSS Hover Menü

Hi Leute,

ich habe schon mein nächstes Problem.
Und zwar folgendes: Ich möchte, dass wenn man mit der Maus auf eine Grafik geht, mehrere Grafiken darunter erscheinen, die bei daraufklicken irgendwohin linken.
Also eine Art Hover Menü.
Falls das möglich ist, kann es mir jemand erklären, bzw. ein Link zu einem verständlichen Tutorial geben?

Ich habe lange gesucht, aber noch nichts gefunden.

Danke im Vorraus für Antworten!

  1. @@Alpha-Kristall:

    nuqneH

    Ich habe lange gesucht, aber noch nichts gefunden.

    Deine Suchstrategie ist verbesserungsbedürftig.

    Wo hast du gesucht? In http://de.selfhtml.org/@title=SELFHTML? Click.

    Den Themenbereich http://de.selfhtml.org/css/index.htm@title=CSS hast du selbst erkannt. Click.

    Nach der Einführung folgen Beschreibungen von Syntax und Sprachumfang, zuletzt Anwendungen: <http://de.selfhtml.org/css/layouts/index.htm@title=CSS-basierte Layouts>. Click.

    Darin etwas zu http://de.selfhtml.org/css/layouts/navigationsleisten.htm@title=Navigationsleisten. Click.

    Nun aber SELF weiter.

    Qapla'

    --
    Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
    (Mark Twain)
  2. ich habe schon mein nächstes Problem.

    Eine Vorwarnung:
    Vermeide Doppelpostings. Wenn du in Zukunft CSS-Probleme hast, bleibe in diesem Thread.
    Ich respektiere, dass dein anderer Thread eine andere Problematik anspricht.

    Und zwar folgendes: Ich möchte, dass wenn man mit der Maus auf eine Grafik geht, mehrere Grafiken darunter erscheinen, die bei daraufklicken irgendwohin linken.
    Also eine Art Hover Menü.
    Falls das möglich ist, kann es mir jemand erklären, bzw. ein Link zu einem verständlichen Tutorial geben?

    Die Bilder hast du als CSS-Backgrounds zu verstehen.
    Abgesehen davon suchst du nach einem CSS-Menu.

    Ich habe lange gesucht, aber noch nichts gefunden.

    http://de.selfhtml.org/css/layouts/navigationsleisten.htm

    und zum Thema CSS-Backgrounds:

    http://de.selfhtml.org/css/eigenschaften/hintergrund.htm

    Wobei eine sogenannte Image-Replacement-Technik zur Anwendung kommt.

    Beispiel:
    <ul id="navigation">
      <li><a id="menu1">Linklabel</a></li>
      ...
    </ul>

    Phark-Methode darauf angewendet:
    CSS

    #navigation a {  
      display:block;  
      width: ...px;  
      height:...px;  
      background: url(spritemap.png);  
      text-indent:-999px;  
    }  
    #navigation #menu1 {background-position:0px 0px;}  
    
    

    Eine Spritemap ist ein Bild, das viele Teilbilder enthält.
    In jedem Menulink wird aus dem Spritemap ein anderer Ausschnitt eingeblendet.

    mfg Beat

    --
    ><o(((°>           ><o(((°>
       <°)))o><                     ><o(((°>o
    Der Valigator leibt diese Fische
    1. Achso, entschuldige bitte vielmals, ich habe das mit dem Doppelpost nicht gewusst. Ich dachte, das hier ist wie in anderen Foren.

      Auf jeden Fall danke für die Antwort.
      Allerdings komme ich trotz langem rumprobieren nicht weiter.
      Kannst du mir mal einen Beispielcode für die Spritemap.
      Wäre sehr nett, da ich mich mit CSS serh wenig auskenne, ich ich dementsprechend mit dem Code nur rumprobieren konnte =(

      Danke im Vorraus für Antworten!

      1. Kannst du mir mal einen Beispielcode für die Spritemap.
        Wäre sehr nett, da ich mich mit CSS serh wenig auskenne, ich ich dementsprechend mit dem Code nur rumprobieren konnte =(

        Eine Spritemap ist eine übliche Grafik, kein Code. Es ist ein Bild das viele Bilder enthält, zum Beispiel ein Iconset.
        Die Praktische Anwendung im CSS habe ich dir schon gezeigt.

        Der Vorteil von Spritemaps gegenüber vielen einzelnen Bildern ist, dass du nur einen Request absetzen musst.

        Erkundige dich selber.

        mfg Beat

        --
        ><o(((°>           ><o(((°>
           <°)))o><                     ><o(((°>o
        Der Valigator leibt diese Fische
        1. Nochmals hallo.

          Ich probiere jetzt schon seit zwei Stunden rum, und irgendwie bin ich zu blöd, auch nur die Spritemap richtig zu nutzen >.<
          Schon beim zweiten Menüpunkt hab ich Probleme:

          <head>
          <title>Geteilte Navigationsleisten</title>
          <style type="text/css">

          #navigation a {
            display:block;
            width: 100px;
            height: 30px;
            background: url(http://www.loaditup.de/files/521634.png);
            text-indent:-999px;
           }
           #menu1 {
           background-position:0px -15px;

          }
           #menu2 {
           background-position:0px -15px;

          </style>
          </head>

          <body>
            <h1 id="Beispiel">Geteilte Navigationsleisten</h1>

          <ul id="navigation">
            <li><a href="http://www.google.de" id="menu1"></a></li>
            <li><a href="http://www.ebay.de" id="menu2"></a></li>
            </ul><div></div></div>

          </body>

          Das mit Google und ebay sind nur Testseiten.
          Kann jemand den Fehler suchen, und mir mitteilen?
          Wäre sehr dankbar...

          1. Hi,

            #navigation a {
              display:block;
              width: 100px;
              height: 30px;
              background: url(http://www.loaditup.de/files/521634.png);
              text-indent:-999px;
            }
            #menu1 {
            background-position:0px -15px;

            }
            #menu2 {
            background-position:0px -15px;

            </style>

            Das ruleset zum Selector #menu2 ist unvollständig, es fehlt die }

            <body>
              <h1 id="Beispiel">Geteilte Navigationsleisten</h1>
              <ul id="navigation">
              <li><a href="http://www.google.de" id="menu1"></a></li>
              <li><a href="http://www.ebay.de" id="menu2"></a></li>
              </ul><div></div></div>

            Wo werden denn die 3 div geöffnet, die Du hier schließt?

            cu,
            Andreas

            --
            Warum nennt sich Andreas hier MudGuard?
            O o ostern ...
            Fachfragen per Mail sind frech, werden ignoriert. Das Forum existiert.
      2. Om nah hoo pez nyeetz, Alpha-Kristall!

        Kannst du mir mal einen Beispielcode für die Spritemap. Wäre sehr nett, da ich mich mit CSS serh wenig auskenne, ich ich dementsprechend mit dem Code nur rumprobieren konnte =(

        CSS-Sprites

        Matthias

        --
        http://www.billiger-im-urlaub.de/kreis_sw.gif