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>

    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
    <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
    <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); }

    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