Anstatt "hover" nur den Hintergrund ändern

[disser2]

Hallo Community,

ich habe es bisher so gemacht das ich zum Beispiel das als CSS gemacht habe:

.beispiel {
display: block;
height: 175px;
width: 175px;
background-image: url(egal);
}
.beispiel:hover {
background-image: url(egalhover);
}

und dann das in den Body:

<a href="http://irgendwas.de/" class="Beispiel"></a>

Aber die Bilder unterscheiden sich nur in sofern das es ein Wort mit verschiedenen Hintergründen ist.

Kann man das denn nicht irgendwie in CSS kürzer machen? Denn das braucht immer bis er alle Hover-Bilder geladen hat.

Also ich möchte, das wenn die Maus über dem Text schwebt, ein ganz bestimmter Bereich seine Hintergrundfarbe ändert.

lg disser2

 

[prm]

Wenn sich nur die Hintergrundfarbe ändern soll, dann kannst du auch mit background-color arbeiten und brauchst keine Grafiken einzubinden.

Sind die Links einheitlich formatiert, kannst du auf die Klassenangabe verzichten.
Du definierst dann
a:link
a: visited
a:hover

Zum Verständnis:
Links unterschiedlich gestalten
Link-Buttons

Sonst wüsste ich nicht, was man da vereinfachen könnte.
Vielleicht konkretisierst du deine Frage noch etwas.

 

[Junny]

Beachte zunächst, was prm geschrieben hat. Möchtest Du immer noch die Bilder ändern, hier eine Lösung für Links mit festen Abmaßen in Pixeln:

Du fügst beide Hintergrundbilder in ein Bild ein und ordnest sie direkt übereinander an. Da das Bild dann doppelt so groß ist wie der Link, wird nur ein Teil des Bilds angezeigt (der obere Teil). Bei Überfahren mit der Maus kannst Du mit background-position das Hintergrundbild um die Höhe des Links nach oben verschieben, um den anderen Teil des Bilds anzeigen zu lassen. Somit entfallen die Ladezeiten (die nicht aufgrund des langen CSS-Quelltextes entstehen, sondern durch das Nachladen der Hover-Hintergrundbilder). Beide Hintergrundbilder werden beim Seitenaufruf geladen und bei Bedarf wird jeweils der Hintergrund so verschoben, dass das entsprechende angezeigt wird.

Ausführliche Anleitungen findest Du im Internet.

Noch zwei Hinweise darüber hinaus:

• Achte darauf, dass Deine Seite stets bei ausgeschalteten Grafiken nutzbar bleibt. Zum Testen solltest Du regelmäßig mal im Browser das Laden vom Grafiken abschalten und Deine Seite besuchen.
• Überprüfe stets, ob das Vergrößern der Schriftgröße per Browser möglich bleibt und keine Inhalte dadurch unlesbar werden.

Gruß
Junny

 

[disser2]

Danke für eure Antworten. Ich kann euch einfach mal die Bilder zeigen um die es geht:

Normal: Link
Hover: Link

Ich weiß nicht ob sich das überhaupt lohnt zu verändern, da ich ja auch noch den Rahmen mit rein tun muss...

lg disser2

 

[Junny]

Dafür ist kein Bild erforderlich. Du kannst Dir ganz einfach einen Link erstellen und ihn dann mit CSS formatieren.

Beispiel:

<a href="fussball.html">Fu&szlig;ball</a>

body {
  font-size: 100.01%; /* Gegen Browserfehler */
}
a {
  display: block;
  font-size: 5em;
  width: 8em;
  height: 8em;
  padding-top: 3.5em;
  text-align: center:
  border: 3px solid #0000FF;
  background-color: #FFFFFF;
  color: #000000;
}
a:hover {
  background-color: #DDDDDD;
}

Gruß
Junny