Icon bei Links, aber nicht bei Bilder - wie?

html.de-Forum HTML, XHTML & CSS
1

Hallo,

ich nutze

#left_div a{text-decoration:none; background: url(…/images/icon.jpg) 100% 50% no-repeat; usw. bla bla}
Somit habe ich wie gewünscht neben jedem Link so ein kleines Icon-Symbol.

Nun habe ich aber das Problem, das es bei verlinkten Bildern auch ist.
Aber da stört es ja. :slight_smile: Wie kann ich das machen das das Icon nur bei Textlinks angezeigt wird aber nicht bei verlinkten Bildern?

2

gib den links mit bildern einfach ein klasse und änder die Eigenschaft

3

Hätte ich schon probiert, aber entweder mach ich da was falsch oder es klappt nicht.

Hab eine extra a und a:hover Klasse angelegt, un dem background nur eine Farbe gegeben, keine Grafik dazu.

Einbinden hab ich versucht mit

  • <a href....
  • <a id=„extra_klasse“ href…
  • <a href…

Die gleichen 3 Varianten auch mit class statt id versucht
Keine Reaktion, ändert sich nicht daran, das Icon wird trotzdem angezeigt.

:???:

4

Du machst was falsch ^^

CSS

#left_div a {
  text-decoration :none; 
  background : url(../images/icon.jpg) 100% 50% no-repeat;
}
#left_div a .bild {
  text-decoration : none; 
  background-image : none;
}

HTML

<div id="left_div">
<a href="google.de">Das ist ein link</a><br>
<a href="google.de" class="bild">Hier bild rein</a>
</div>
5

Das habe ich vermutet. Aber immerhin war ich schon nahe dran. :slight_smile:

So wie du sagtest, hab ichs auch schon probiert, geht genauso nicht.
Jetzt hab ich es grad nochmals versucht, aber ganz genau so wie du es mir erklärt hast. Keine Chance, das Icon ist trotzdem da. ;ugl

Aber weist wie es funktioniert, so:
…

Dann ist das Icon weg. Aber leider so halt nicht wirklich sinnvoll. Dadurch vergrößere ich ja nur unnötig den Source wenn ich das bei jedem Bild einfüge. Versteh ich nicht warum es dann mit der Class nicht geht, die ja das gleiche sagt?
6

Ich habe es mal bei mir auf dem localhost gemacht und so hat es bei mir funktioniert:

CSS

#left_div a:link, #left_div a:visited, #left_div a:active, #left_div a:hover
{
  text-decoration : none; 
  background-image : url(../images/icon.jpg);
  background-position : 100% 50%;
  background-repeat : no-repeat;
}
#left_div a.bild:link, #left_div a.bild:visited, #left_div a.bild:active, #left_div a.bild:hover,
{
  background-image : none;
}

HTML

<div id="left_div">
  <a href="google.de">google.de mit bild</a>
  <br /><br />
  <a href="google.de" class="bild">google.de ohne bild</a>
</div>
7

Ja also mit #left_div a.bild:link usw gehts, danke!
Das funktioniert, war vorher anders, aber so gehts ja.

Allerdings auch wieder nicht so wie es sein soll. :slight_smile:
Nun ist das Icon zwar nicht ersichtlich, aber fahr mal mit der Maus neben das verlinkte Bild. Dann ist genau der Platz wo sonst das Icon ist, mitverlinkt. Man sieht es nicht mehr, aber der Platzt ist irgendwie trotzdem da.