Verweiß-Grafik. Hover?

Webdesign & Technik HTML & CSS
1

Hallo! :slight_smile: Ich hab eine Frage, bei dir ich einfach nicht weiterkomm. Wenn ich eine Grafik als Verweiß einbinde, wie kann ich eine andere Grafik als Hover/Activ verwenden?

Danke schonmal im vorraus!! :wink:

2

Verweis?

Sofern das Bild keinen relevanten Inhalt enthält,
bindest du das erste Bild als CSS-Hintergrundbild ein und
wechselst dieses dann wenn :hover zutrifft gegen ein anderes
Hintergrundbild.
Bei einem Verweis bietet es sich an, zudem den Verweis als
Text auszubilden, wodurch die Lösung mit einem Hintergrundbild
erneut hilft, diese Idee umzusetzen, statt etwa Text als
Pixelbrei im Bild unterzubringen.

Ist das Bild von Relevanz, so kann man immer noch die
Anzeigeeigenschaften display:none/inline nutzen, um ein
Bild anzuzeigen oder auch nicht, das kann dann von der
normalen Situation zu :hover gewechselt werden, dazu wird
das :hover auf das Elternelement der beiden Bilder angewendet.

3

Mhh, irgendwas versteh ich noch nicht so ganz.

Mein Link sieht jetzt so aus:

Der wird mit CSS formatiert, zB:

a:link { 
  background-image:url(Punkt.jpg); 
  }
a:hover { 
  background-image:url(Home.jpg);
  }

Richtig?

Wie krieg ich das ganze jetzt auf meine gewünscht Größe von 100x100 Px? Und wie mach ichs das der Text “Home” des Links nicht mehr angezeigt wird? Danke schon im vorraus!!! :slight_smile:

4

ich weiß nicht obs so funktioniert aber ich schreib einfach mal.

Display:none sorgt dafür dass home weggeht

background-size sorgt dafür, dass du deine grafik auf 100x100px skalieren kannst.

grüße

5 
<a class="klapp" href="index.html"><span class="klapp">Home</span></a>
a:link.klapp
{
display: inline-block;
height: 100px;
width: 100px;
background: red url(Punkt.jpg)
}
a:link:hover.klapp
{
background: red url(Home.jpg)
}
a:link.klapp span.klapp
{
display: none
}

Ggf. mußt du für ältere browser statt inline-block einfach block
nehmen, weil es inline-block erst seit CSS2.1 gibt. Das mag dann
noch gewisse weitere Korrekturen am sonstigen Layout erfordern.

Spandauer007: background.size scheint aus einem Arbeitsentwurf
für CSS3 zu stammen, das ist zweifellos noch deutlich schlechter
implementiert als inline-block und sollte keineswegs für mehr
verwendet werden, als den Arbeitsentwurf zu testen ;o)

6

[quote=“hoffmann”]Spandauer007: background.size scheint aus einem Arbeitsentwurf
für CSS3 zu stammen, das ist zweifellos noch deutlich schlechter
implementiert als inline-block und sollte keineswegs für mehr
verwendet werden, als den Arbeitsentwurf zu testen ;o)[/quote]

Stimmt habs auch gerade gesehen :slight_smile:

Danke für die Info… :slight_smile:

7

Danke an alle - besonders hoffmann - für die sehr hilfreichen Antowrten! Das klappt jetzt wie ichs wollte!! :wink: Danke! Ich zeig noch mal die Codes wie es jetzt funktioniert:

a:link.dot {
  display: inline-block; 
  background: url(Punkt.jpg);
  height: 100px;
  width: 100px; 
  }
a:visited.dot {
  display: inline-block; 
  background: url(Punkt.jpg);
  height: 100px;
  width: 100px; 
  }
a:hover.dot { 
  background: url(Home.jpg); 
  }
a.dot span.dot {
  display: none;
  }

:wink:

Grüße