Mouseover-Effekt mit Grafiken

    hallo!

    ich stehe an und weiß nicht weiter. ich hoffe jemand kann mir helfen.
    ich habe insgesamt 9 verschiedene bilder. dazu 9 verschiedene "Hoverbilder". dh jedes Bild hat ein anderes hover. diese bilder sollten nahtlos aneinander aufgereiht werden und ein menü bilden.

    hier mein code:

    ich hoffe ich bin nicht komplett am holzweg ;( aber das hover funktioniert einfach nicht ;(

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html lang="de">
    <head>
    <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
    <title>test</title>

    <style>

    #test1
    a { float:left;
    background-image:url(test01.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover01.jpg); }

    #test2
    a { float:left;
    background-image:url(test02.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover02.jpg); }

    #test3
    a { float:left;
    background-image:url(test03.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover03.jpg); }

    #test4
    a { float:left;
    background-image:url(test04.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover04.jpg); }

    #test5
    a { float:left;
    background-image:url(test05.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover05.jpg); }

    #test6
    a { float:left;
    background-image:url(test06.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover06.jpg); }

    #test7
    a { float:left;
    background-image:url(test07.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover07.jpg); }

    #test8
    a { float:left;
    background-image:url(test08.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover08.jpg); }

    #test9
    a { float:left;
    background-image:url(test09.jpg);
    width:65px; height:430px }
    a:hover { background-image:url(testover09.jpg); }

    </style>
    </head>

    <body>
    <div id="test1"><a href="test1.htm"></a></div>
    <div id="test2"><a href="test2.htm"></a></div>
    <div id="test3"><a href="test3.htm"></a></div>
    <div id="test4"><a href="test4.htm"></a></div>
    <div id="test5"><a href="test5.htm"></a></div>
    <div id="test6"><a href="test6.htm"></a></div>
    <div id="test7"><a href="test7.htm"></a></div>
    <div id="test8"><a href="test8.htm"></a></div>
    <div id="test9"><a href="test9.htm"></a></div>

    </body>

    </html>

    liebe grüße und vielen dank im voraus

    vielen dank...

    weiß zwar nicht wieso es mit div nicht funzt, aber jetzt geht es ;)

    danke

    liebe grüße

    Da müsstest du etwas rechnen:
    Du könntest ul eine bestimmte Breite geben.
    Davon abziehen: Anzahl der Links x deren Einzelbreite.
    Den Rest teilen durch (Anzahl Links - 1), ergibt dann den Zwischenabstand.
    Dieses Ergebnis verwendest du als margin-right-Wert.
    Dem letzten Listenpunkt darf dieser Wert dann jedoch nicht zugewiesen werden.

    dh es gibt keine möglichkeit das ganze ohne rechnen/abstand etc... zentriert darstellen zu lassen?

    liebe grüße