• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Hoverschaltflächen via CSS

Status
Für weitere Antworten geschlossen.
G

gurbelunder

Neues Mitglied
Hallo Leute,
habe in dem Menü meiner Internetseite Bilder als Links in Nutzung.
Siehe hier: EDV-Leipzig - Ihr Computerfachgeschäft in Leipzig
Nun möchte ich das via CSS versuchen, dass meim drübergehen mit der Maus über den Link sich die Bilder verändern. Dafür habe ich gedacht, dass ich zwei Bilder für einen Link habe, eins mit schwarzem Hintergrund und eins mit rotem Hintergrund, und beim drübergehen wechselt das schwarze Bild mit dem roten.
Ist dies möglich, und, wenn ja, wie?
Hier mein CSS - Layout:

Code: 
a:link         {     color:white;
                        text-decoration:none
                    }
a:visited     {     color:white;
                        text-decoration:none
                    }
a:hover         {     color:red;
                        text-decoration:none
                    }
a:active     {     color:white;
                        text-decoration:none
                    }
a:focus         {     color:red;
                        text-decoration:none
                    }
img.btn        {    border-left:0px;
                        border-right:0px;
                        border-top:0px;
                        border-bottom:0px;
                        width:131px;
                        height:19px
                    }    
.bild          {    background-color:#636363
                     }
div.text      {     font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        font-weight:bold
                     }
table.taba  {    table-layout:fixed;
                        width:18%;
                        float: left
                     }
tr.tra         {    table-layout:fixed;
                     }
td.tda         {    table-layout:fixed;
                        font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        text-align:center;
                        font-weight:bold
                     }
table.tabb  {    table-layout:fixed;
                        width:82%;
                        float: right
                    }
tr.trab         {    table-layout:fixed;
                        width:100%;
                        height:30%
                     }
td.tdab         {    table-layout:fixed;
                        font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        text-align:center;
                        font-weight:bold;
                        font-size:200%;
                     }
td.tabbild    {    font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        width:7%;
                        background-image:url(../Bilder/Tux.jpg);
                        width:61px;
                        height:100px
                    }
tr.trbb         {    table-layout:fixed;
                        width:100%;
                     }
td.tdbb         {    table-layout:fixed;
                        font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        font-weight:bold
                     }
tr.w3c         {    table-layout:fixed;
                     }
td.w3c         {    table-layout:fixed;
                        font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        font-weight:bold
                     }
td.kontakt    {    table-layout:fixed;
                        font-family:Tahoma,sans-serif;
                        font-style:normal;
                        font-variant:normal;
                        color:white;
                        text-align:center;
                        font-weight:bold
                    }
 
ja dies ist natürlich möglich.

Code: 
td {
background-color:black;
background-image:url(img/black.gif);
}

td:hover {
background-color:red;
background-image:url(img/red.gif);
}
Oder eben ähnlich...
 
Habe das nun folgendermaßen gemacht:

Code: 
	a.s:link 	{ 	background-color:black;
						background-image:url(../Bilder/startseite_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.s:visited { 	background-color:black;
						background-image:url(../Bilder/startseite_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.s:hover 	{ 	background-color:red;
						background-image:url(../Bilder/startseite_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.s:active 	{ 	background-color:black;
						background-image:url(../Bilder/startseite_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
	
	a.s:focus 	{ 	background-color:red;
						background-image:url(../Bilder/startseite_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}

	a.u:link 	{ 	background-color:black;
						background-image:url(../Bilder/unternehmen_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.u:visited { 	background-color:black;
						background-image:url(../Bilder/unternehmen_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.u:hover 	{ 	background-color:red;
						background-image:url(../Bilder/unternehmen_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.u:active 	{ 	background-color:black;
						background-image:url(../Bilder/unternehmen_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
	
	a.u:focus 	{ 	background-color:red;
						background-image:url(../Bilder/unternehmen_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}

	a.d:link 	{ 	background-color:black;
						background-image:url(../Bilder/dienst_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.d:visited { 	background-color:black;
						background-image:url(../Bilder/dienst_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.d:hover 	{ 	background-color:red;
						background-image:url(../Bilder/dienst_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.d:active 	{ 	background-color:black;
						background-image:url(../Bilder/dienst_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
	
	a.d:focus 	{ 	background-color:red;
						background-image:url(../Bilder/dienst_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}

	a.a:link 	{ 	background-color:black;
						background-image:url(../Bilder/ankauf_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.a:visited { 	background-color:black;
						background-image:url(../Bilder/ankauf_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.a:hover 	{ 	background-color:red;
						background-image:url(../Bilder/ankauf_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.a:active 	{ 	background-color:black;
						background-image:url(../Bilder/ankauf_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
	
	a.a:focus 	{ 	background-color:red;
						background-image:url(../Bilder/ankauf_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.k:link 	{ 	background-color:black;
						background-image:url(../Bilder/kontakt_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.k:visited { 	background-color:black;
						background-image:url(../Bilder/kontakt_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.k:hover 	{ 	background-color:red;
						background-image:url(../Bilder/kontakt_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
					
	a.k:active 	{ 	background-color:black;
						background-image:url(../Bilder/kontakt_schwarz.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}
	
	a.k:focus 	{ 	background-color:red;
						background-image:url(../Bilder/kontakt_rot.jpg);
						border-left:0px;
						border-right:0px;
						border-top:0px;
						border-bottom:0px;
						width:131px;
						height:19px
					}

Nun ist aber das Problem, dass ich im <a> - Tag der HTML - Datei trotzdem einen Wortlink angeben muss, der das Bild überlappt. Ausserdem werden die Bilder nicht vollständig angezeigt.
Genaueres siehe hier: EDV-Leipzig - Ihr Computerfachgeschäft in Leipzig
Mann muss dazu sagen, dass ich nur auf der Startseite (index.html) den <a> - Tag einen Wortlink gegeben habe (meine damit das zwischen <a>***</a>, also hier ***). Bei alen anderen Seitenhabe ich dies ausgelassen, hier werden dann aber nicht einmal die Bilder angezeigt.
Kann ich das überhaupt mit <a> oder muss ich das via Tabellen machen? Vielleicht mach ich auch nur eine Kleinigkeit falsch?
 
Erst einmal würde ich das mit einem Bild machen und das bei hover mit background-positon verschieben.
(ein Bild erstellen, dass die beiden Bilder hintereinander anzeigt- Beispiel)
Bsp background-position:
background-position: -10px 0; (Verschiebung des Bilds um 10px nach links)
background-position: 10px 0; (Verschiebung des Bilds um 10px nach rechts)

Der zweite Wert wäre für vertikale Verschiebung.


Wenn die Texte auf den Bilder gleich mit drauf sind, dann setze einfach ein text-indent: -9999px; Dann kannst du Text in den a-tag schreiben, der um -9999px nach links verschoben ist.

Sind es verschiedene Bilder musst du jedem Link eine id zuweisen
Bsp:
Code: 
<style>
#Startseite{..
#Startseite:hover{background-position:...
</style>
<body>
<a href="#" id="Startseite">Startseite</a>
</body>

Ist es immer das gleiche Bild, kannst es mit einer einheitlichen "class" machen.
 
Habe einige deiner Ratschläge befolgt. Allerdings sitzen die Wortlinks (trotz text-indent) immernoch über den Bildern drüber und die Bilder haben immer noch nicht ihre volle Größe. Alle bilder müssten gleichgroß sein.
Siehe wieder hier: EDV-Leipzig - Ihr Computerfachgeschäft in Leipzig
Das ist nun der Abteil der CSS:

Code: 
	a.s:link 	{ 	background-color:black;
						background-image:url(../Bilder/start.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.s:visited { 	background-color:black;
						background-image:url(../Bilder/start.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.s:hover 	{ 	background-color:red;
						background-image:url(../Bilder/start.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.s:active 	{ 	background-color:black;
						background-image:url(../Bilder/start.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
	
	a.s:focus 	{ 	background-color:red;
						background-image:url(../Bilder/start.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}

	a.u:link 	{ 	background-color:black;
						background-image:url(../Bilder/unternehmen.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.u:visited { 	background-color:black;
						background-image:url(../Bilder/unternehmen.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.u:hover 	{ 	background-color:red;
						background-image:url(../Bilder/unternehmen.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.u:active 	{ 	background-color:black;
						background-image:url(../Bilder/unternehmen.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
	
	a.u:focus 	{ 	background-color:red;
						background-image:url(../Bilder/unternehmen.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}

	a.d:link 	{ 	background-color:black;
						background-image:url(../Bilder/dienst.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.d:visited { 	background-color:black;
						background-image:url(../Bilder/dienst.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.d:hover 	{ 	background-color:red;
						background-image:url(../Bilder/dienst.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.d:active 	{ 	background-color:black;
						background-image:url(../Bilder/dienst.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
	
	a.d:focus 	{ 	background-color:red;
						background-image:url(../Bilder/dienst.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}

	a.a:link 	{ 	background-color:black;
						background-image:url(../Bilder/ankauf.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.a:visited { 	background-color:black;
						background-image:url(../Bilder/ankauf.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.a:hover 	{ 	background-color:red;
						background-image:url(../Bilder/ankauf.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.a:active 	{ 	background-color:black;
						background-image:url(../Bilder/ankauf.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
	
	a.a:focus 	{ 	background-color:red;
						background-image:url(../Bilder/ankauf.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.k:link 	{ 	background-color:black;
						background-image:url(../Bilder/kontakt.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.k:visited { 	background-color:black;
						background-image:url(../Bilder/kontakt.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
					
	a.k:hover 	{ 	background-color:red;
						background-image:url(../Bilder/kontakt.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
					
	a.k:active 	{ 	background-color:black;
						background-image:url(../Bilder/kontakt.bmp);
						background-position: -262px 0;
						text-indent: -9999px
					}
	
	a.k:focus 	{ 	background-color:red;
						background-image:url(../Bilder/kontakt.bmp);
						background-position: 131px 0;
						text-indent: -9999px
					}
 
Hi,

was ich mich die ganze Zeit über frage, auch noch nachdem ich Deinen Link angeklickt habe, warum müssen das eigentlich Bilder sein? Wo ist der Effekt, den man mit Text und CSS nicht hinbekommt?

Ach und aus der semantisch inkorrekten Tabelle könntest Du auch einfach eine Liste machen, wenn Du schon dabei bist :-)
 
Das mit dem rot und schwarz ist nur vorübergehend. Später sollen richtig designte Buttons die Flächen ersetzen.
Werde einfach mal hingenen, und den Button ohne Text entwerfen. Den Text von <a> lasse ich dann stehen.
 
gurbelunder schrieb:
Werde einfach mal hingenen, und den Button ohne Text entwerfen. Den Text von <a> lasse ich dann stehen.
Zum Vergrößern anklicken....
Das hätte ich als nächstes gesagt. Hat nur einen Nachteil: Was passiert, wenn der Nutzer die Schriftgröße ändert?
Und ändern können sollte er es bei so einem wichtigen Element wie der Navigation. Womöglich kann er es sonst nicht lesen.

Gruß,
-Efchen
 
Hab versucht, damit abhilfe zu schaffen, die Schrift an sich schon groß sein zu lassen.

Hab nun nurnoch ein Bild und eine class in der CSS - Datei. Allerdings wird immer noch nicht die Größe des Bildes angenommen. Was mach ich den falsch?
Wieder zum schauen: EDV-Leipzig - Ihr Computerfachgeschäft in Leipzig
Und hier die CSS wieder:

Code: 
	a.s:link 	{ 	background-color:black;
						background-image:url(../Bilder/button.jpg);
						background-position: -262px 0;
						color:white
					}
					
	a.s:visited { 	background-color:black;
						background-image:url(../Bilder/button.jpg);
						background-position: -262px 0;
						color:white
					}
					
	a.s:hover 	{ 	background-color:red;
						background-image:url(../Bilder/button.jpg);
						background-position: 131px 0;
						color:white
					}
					
	a.s:active 	{ 	background-color:black;
						background-image:url(../Bilder/button.jpg);
						background-position: -262px 0;
						color:white
					}
	
	a.s:focus 	{ 	background-color:red;
						background-image:url(../Bilder/button.jpg);
						background-position: 131px 0;
						color:white
					}
 
gurbelunder schrieb:
Hab versucht, damit abhilfe zu schaffen, die Schrift an sich schon groß sein zu lassen.
Zum Vergrößern anklicken....
Das ist keine Lösung. Schrift muss frei skalierbar sein. Vielleicht will jemand die Schrift verkleinern, weil sie ihm zu groß ist, weil er vielleicht nur ein kleines Browserfenster hat und mehr von der Seite auf einmal sehen möchte?

Was mach ich den falsch?
Zum Vergrößern anklicken....
Ich würd die Tabelle endlich wegschmeißen, eine Liste draus machen, die Listenelemente in der gewünschten Größe definieren, den Link zum Blockelement machen, die selbe Größe vergeben, und gut ist.

Bei Dir ist der Fehler wahrscheinlich, dass Dein <a> kein Block-Element ist. a ist ein Inline-Element. Von Inline-Elementen kann man die Größe nicht verändern, ohne ihnen vorher zu sagen, sie sollen sich wie ein Block-Element verhalten.
 
Habe nun folgendes gemacht:

Code: 
    li.nav        {    list-style-type:none;
                        text-align:center;
                        list-style-position:inside
                    }

ol.nav        {    margin: auto 0;
                      text-align:center
                 }
Die Navigationstabelle ist hier zu sehen: EDV-Leipzig - Ihr Computerfachgeschäft in Leipzig

Habe nun nurnoch das Problem mit Blocksatz (<= kenn den Befehl nicht) und wieder mit der Größengeschichte.
Wäre nett, wenn ihr mir nochmal helfen könntet.
 
Zuletzt bearbeitet:
hey,

ich verstehe immernoch nicht warum du alles in tabellen verschachtelst.
du hast den tipp bekommen, dein menü in eine liste zu verpacken, das solltest du mal angehen.
 
Status
Für weitere Antworten geschlossen.

Neueste Beiträge

Zurück
Oben