Webdesign / Tipps / Symbolische Links [IE|M|O|G]

   Symbole:                      
   Weitere Symbole:                

<style type="text/css">
 a.mailto_link {
 background-image: url(letter.gif);
 padding-right: 16px;
 background-repeat: no-repeat;
 background-position: right;
}

 a.extern_link {
 background-image: url(link.gif);
 padding-right: 16px;
 background-repeat: no-repeat;
 background-position: right;
}

 a.download_link {
 background-image: url(download.gif);
 padding-right: 16px;
 background-repeat: no-repeat;
 background-position: right;
}

 a.prev_link {
 background-image: url(prev.gif);
 padding-left: 16px;
 background-repeat: no-repeat;
 background-position: left;
}

 a.next_link {
 background-image: url(next.gif);
 padding-right: 16px;
 background-repeat: no-repeat;
 background-position: right;
}

 a.up_link {
 background-image: url(up.gif);
 padding-left: 12px;
 background-repeat: no-repeat;
 background-position: left;
}

 a.down_link {
 background-image: url(down.gif);
 padding-left: 12px;
 background-repeat: no-repeat;
 background-position: left;
}
</style>

Link zu meiner <a href="http://www.homepage.de"
 class="extern_link">Homepage</a>

Eine E-Mail an <a href="mailto:info@homepage.de"
 class="mailto_link">Rainer Zufall</a> genügt.

Das Programm <a href="programm.zip"
 class="download_link">programm.zip</a> (2 MB).

<a href="#" class="prev_link">Zurück</a>

<a href="#" class="next_link">Weiter</a>

<a href="#" class="up_link">Nach oben</a>

<a href="#" class="down_link">Nach unten</a>

<style type="text/css">
a[href^='http://'] {
    padding-right: 17px;
    background: url(extern.gif) right no-repeat;
}
</style>

<style type="text/css">
a[target^='_blank'] {
 padding-right: 14px;
 background: url(extern.gif) center right no-repeat;
}
</style>

<style type="text/css">
a[href$='.zip'] {
    padding-right: 17px;
    background: url(download.gif) right no-repeat;
}
</style>

<style type="text/css">
a[href*='/glossar/'] {
    padding-right: 14px;
    background: url(glossar.gif) right no-repeat;
}
</style>