Ergebnis 1 bis 4 von 4

Thema: hover effekt im menü als liste

  1. #1
    HTML Newbie
    Registriert seit
    03.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard hover effekt im menü als liste

    hallo nochmal,

    ich würde gerne bei folgendem index einen hover effekt machen. und zwar besteht mein menü aus lauter fotos. wenn man mit der maus rüberfährt, soll ein anderes foto erscheinen und man soll per link auf eine andere seite gelangen.
    ich hab schon einiges ausprobiert aber bis jetzt hat nichts funktioniert. kann mir jemand einen konkreten vorschlag machen, wie genau ich welchen code in meinen code einfügen muss, sodass die liste trotzdem weiterhin betehen bleibt.

    vielen dank.

    hier noch mein code:

    </head>


    <body>
    <header>
    <img src="3.png"/>
    </header>


    <div class="content">

    <ul id="navigation">


    <li><a href="mhm9.html"><img src="images/menu/1.jpg"></a></li>
    <li><img src="images/menu/2.jpg"></li>
    <li><img src="images/menu/3.jpg"></li>
    <li><a href="4.html"><img src="images/menu/4.jpg"></a></li>
    <li><img src="images/menu/5.jpg"></li>
    <li><img src="images/menu/6.jpg"></li>
    <li><img src="images/menu/7.jpg"></li>


    </ul>
    </div>
    </body>
    </html>
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: hover effekt im menü als liste

    Wieso müssen es Bilder sein? Das hat viele Nachteile, z.B. auch für Suchmaschinen. Mit so einem Menü wirst Du vermutlich schlechter gefunden werden können, da die Suchmaschinen inhaltliche Zusammenhänge deiner Seite nicht erkennen können.

    Das gewünschte Menü kannst Du jedoch per CSS. Und selbst da gibt es mehrere Wege. Beispiel für einen Weg:

    HTML-Code:
    <ul id="navigation">
    <li><a href="mhm9.html"><img src="images/menu/1.jpg" alt="" class="normal"><img src="images/menu/1hover.jpg" alt="" class="hover"></a></li>
    </ul>
    CSS dazu:
    Code:
    #navigation a img.hover { display: none; }
    #navigation a:hover img.normal { display: none; }
    #navigation a:hover img.hover { display: block; }
    Beachte: Du hast in deinem jetzigen HTML-Code keine alt-Attribute. Diese wie auch entsprechende Texte darin können Suchmaschinen zumindest etwas helfen deine Seite zu lesen und zu bewerten.

    Ein weiterer Weg wäre über Hintergrundbilder für den Link. Wenn Du bei Suchmaschinen dennoch Erfolg haben willst, könntest Du hier auch Texte einfügen. Beispiel:

    HTML-Code:
    <ul id="navigation">
    <li><a href="mhm9.html" id="menupunkt1"><span>Menüpunktbeschriftung</span></a></li>
    </ul>
    CSS dazu:
    Code:
    #navigation a#menupunkt1 span { display: none; }
    #navigation a#menupunkt1 { background-image: url(images/menu/1.jpg); }
    #navigation a#menupunkt1:hover { background-image: url(images/menu/1hover.jpg); }

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    03.06.2013
    Beiträge
    7
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: hover effekt im menü als liste

    dankeschön!!

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: hover effekt im menü als liste

    @threadi
    Für Sehbehinterte oder Blinde werden aber keine Linktexte mehr vorgelesen. Es wird wohl besser sein LI relativ und das SPAN absolut zu positionieren. Mit top:-9999px aus den sichtbaren Bereich schieben. So werden die Linktext für Blinde vorgelesen.

    Gruß
    djheke

Ähnliche Themen

  1. Hover-Effekt
    Von LaLinda im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 25.06.2008, 15:08
  2. Grafik hover effekt
    Von minder im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 29.03.2008, 14:02
  3. hover effekt
    Von Kingdingeling im Forum HTML & CSS Forum
    Antworten: 7
    Letzter Beitrag: 23.12.2006, 00:35
  4. CSS hover-effekt
    Von BendOr im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 20.09.2006, 14:48
  5. hilfe bei hover effekt
    Von sYco im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 25.06.2004, 20:34

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •