safettito: Hover mit Grafikbutton Hilfe !

Hi,
Stehe ziemlich am Anfang der Materie und habe ein kleines Problem mit der CSS Angabe für der Hover Effekt bei Button die mittels Grafikeinbindung erstellt wurden.

Würde gerne nun den Hover Effekt mittels zweiter Grafik (Wechselgrafik) für alle Buttons zufügen oder anderer Variante wo man den Hover effekt optisch gut bemerkt.
Die zweite Frage die Sich ergibt die Buttons haben zur Zeit keinen Textinhalt sollte man diesen mittels (X)HTML deklarieren oder eher die Button mittels Grafikprogramm beschreiben ?
Hoffe habe alles deutlich erklärt, vielen Dank im Voraus für jede Hilfe

CSS:

.menu li, .menu img{
float:left;
list-style-type:none;
}

Quellcode:

<ul class="menu">
<li><a href="#"><img src="images/but1.jpg" alt="" width="135" height="36" /></a></li>
<li><a href="#"><img src="images/but2.jpg" alt="" width="130" height="36" /></a></li>
<li><a href="#"><img src="images/but3.jpg" alt="" width="130" height="36" /></a></li>
<li><a href="#"><img src="images/but4.jpg" alt="" width="130" height="36" /></a></li>
<li><a href="#"><img src="images/but5.jpg" alt="" width="130" height="36" /></a></li>
<li><img src="images/butclean.jpg" alt="" width="111" height="36"/> </li>
</ul>

  1. Liebe(r) safettito,

    in diesem Zusammenhang benutzt man eigentlich keine <img>-Elemente, sondern Hintergrundbilder, die per CSS ausgetauscht werden. Das Bild, welches als <img>-Element eingebunden wurde, kannst Du mit CSS nicht austauschen.

    <li><a href="#"><img src="images/but1.jpg" alt="" width="135" height="36" /></a></li>

    Wenn der Browser das Bild (aus welchem Grund auch immer) nicht anzeigen kann, hat der Benutzer keine noch so geringe Möglichkeit, zu wissen, welcher Link für welches Linkziel bestimmt ist, da es keinen ALTernativtext gibt.

    Warum nicht so?

    <li><a href="#" id="home">Home</a></li>  
    <li><a href="#" id="impressum">Impressum</a></li>
    ~~~ usw.  
      
    Liebe Grüße,  
      
    Felix Riesterer.
    
    -- 
    ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    
    1. Om nah hoo pez nyeetz, Felix Riesterer!

      in diesem Zusammenhang benutzt man eigentlich keine <img>-Elemente, sondern Hintergrundbilder, die per CSS ausgetauscht werden.

      optimal sind sprites

      Matthias

      --
      1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
    2. Liebe(r) safettito,

      in diesem Zusammenhang benutzt man eigentlich keine <img>-Elemente, sondern Hintergrundbilder, die per CSS ausgetauscht werden. Das Bild, welches als <img>-Element eingebunden wurde, kannst Du mit CSS nicht austauschen.

      <li><a href="#"><img src="images/but1.jpg" alt="" width="135" height="36" /></a></li>

      Wenn der Browser das Bild (aus welchem Grund auch immer) nicht anzeigen kann, hat der Benutzer keine noch so geringe Möglichkeit, zu wissen, welcher Link für welches Linkziel bestimmt ist, da es keinen ALTernativtext gibt.

      Warum nicht so?

      <li><a href="#" id="home">Home</a></li>

      <li><a href="#" id="impressum">Impressum</a></li>

      
      >   
      > Liebe Grüße,  
      >   
      > Felix Riesterer.  
        
      Hallo,  
        
      Danke vielmals für den Tipp, habs jetzt so abgeändert, bin noch ziemlich am Anfang von CSS und habe nicht so den Durchblick..  
        
      Habe jetzt die Buttons als Hintergrund für den Linktext, dieser erscheint nun etwas zu hoch, align-center brint nur die vertikale mittlere Ausrichtung aber nicht die Horizontale gegenüber der Buttongrafik die als Hintergrund eingestellt ist.  
        
      Wie kann man diese nun zentrieren und kann ich den Textlink nach wünschen formatieren ohne diesen unterstrichene z.b.  
        
      Vielen Dank und liebe Grüsse zurück  
        
      Tito (♂) 
      
      1. Lieber safettito,

        da ich keinen blassen Schimmer habe was Du tust, kann ich Dir auch nicht helfen.
        </hilfe/charta.htm#tipps-fuer-fragende>

        Liebe Grüße,

        Felix Riesterer.

        --
        ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
        1. Lieber safettito,

          da ich keinen blassen Schimmer habe was Du tust, kann ich Dir auch nicht helfen.
          </hilfe/charta.htm#tipps-fuer-fragende>

          Liebe Grüße,

          Felix Riesterer.

          Hi,

          Sorry vielmals für die Unverständnis,

          Also ich möchte einfach eine Navi nebeneinander aufstellen, nicht untereinander, als Hintergrund sollen diese But.jpg dienen. 5-6 Navpunkte bzw. Verlinkungen besitzen, heißt für jeden Link ein But.jpg als Hintergrund.
          Der Linktext soll mittig in jedem But.jpg sein.
          Hoffe du kannst etwas mit meiner Beschreibung anfangen.

          Grüsse
          Tito

          1. Lieber safettito,

            Deine Beschreibung hilft mir nicht weiter. Mir ist schon klar was Du erreichen willst, dazu brauche ich Deine Beschreibung nicht. Was ich nicht sehe ist das, was Du bisher getan hast, und wo Du jetzt alleine nicht weiter kommst. Wenn Du keinen Link postest, oder auch keinen Code Deines bisherigen Versuchs, wie soll ich Dir da helfen?

            Du willst Doch nicht etwa fertigen Code gepostet bekommen, oder...?

            Liebe Grüße,

            Felix Riesterer.

            --
            ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)