Möchte man auf einem grösseren CSS-Hintergrundbild einen Link anbringen, z.B. um den Bereich des Logos mit der Homepage zu verlinken, so muss man ein bisschen in die Trickkiste greifen, denn Imagemaps oder dergleichen lassen sich nur auf direkt im HTML platzierte Bilder anwenden.
Zudem scheint es sinnvoll, dass Link und Logotext auch im Quelltext sauber und mit semantischer Bedeutung aufgeführt sind, damit auch Suchmaschinen und Screenreader von dieser Information profitieren können.
Folgendes Bild soll im Kopfbereich einer Website als Hintergrundbild eingefügt werden:
Dazu verwende ich folgenden Code:
und im CSS:
#header {
background: url(/pictures/css_tut_header.jpg) no-repeat;
height: 120px;
}
Nun soll der Bereich, wo das Logo im Bild steht verlinkt werden. In den div setzte ich deshalb eine Überschrift, in der ich einen sinnvollen, dem Logo entsprechenden Text verlinke.
Und schon fast geschafft; noch einige Zeilen CSS: Nun wird der div noch relativ positioniert, damit wir den h1 absolut dazu ausrichten können. Im h1 a Selektor nun noch den Link als Block definieren, die genaue Grösse des klickbaren Linksbereichs angeben und die Positionierung vornehmen. Zu guter Letzt bleibt uns nur noch den Text mit einem grossen negativen Wert aus dem Browser-Viewport schieben:
#header {
background: url(/pictures/css_tut_header.jpg) no-repeat;
height: 120px;
position: relative;
}
#header h1 a {
position: absolute;
top: 15px;
left: 14px;
display: block;
width: 238px;
height: 45px;
text-indent: -9999px;
}
Die fertige Version ist hier zu finden.
Schreibe einen Kommentar