dynamisches CSS Menü mit Grafiken

[Auge]

Hallo

am liebsten hätte ich eine im css-sheet eingebundene Definition nach dieser Art:

a#Name
         {
display:block;
         background-image:url(_picz/log.gif);
         width:44px; height:105px;
         }
a#Name:hover
         {
         background-image:url(_picz/log_ho.gif);
         }

leider weiß ich nicht wo und wie ich das einbinden kann so, daß ich für jeden <li><a href= usw. ein anderes Bild (Hintergrund) verwenden kann das dann mit einem zugehörigen Pendant ausgetauscht wird.

Willst du nun ein Hintergrundbild für die Links oder Bilder _anstatt_ der Linktexte?

Im ersten Fall bist du mit obigem Code auf der richtigen Spur. Man nehme für a:link (evtl. auch für a:visited) ein Bild und für andere Zustände a:hover, a:focus, a:active ein oder mehrere andere Bilder. Effektiver wird das ganze noch, wenn man _ein_ Bild mit allen möglichen Zuständen nimmt, und dieses über background-position jeweils anders ausrichtet.

Im zweiten Fall brauchst du für jeden Link eine ID und ein zusätzliches Element innerhalb des Links. Das sähe dann so aus: <a href="..." id="bla">Bla<span></span></a>. Der Linktext garantiert, dass sowohl Suchmaschinen als auch Nutzer, die keine Bilder anzeigen lassen (können), mit dem Link etwas anfangen können. Das Bild wird im <span> als Hintergrund definiert und selbiges so positioniert, dass es über dem Text liegt. Kann das Bild angezeigt werden, verdeckt es den Text. Ansonsten ist dort einfach nur ein leeres <span> ohne Auswirkung auf die Anzeige.

Replacing Text By An Image (Beispiel 2 (hier für eine Überschrift))
Fast Rollovers Without Preload

Tschö, Auge