Bild als Überschrift - und das als Link

[Regina Müller]

Moin,

auf einer Seite ersetze ich eine h1-Überschrift durch ein Bild. Der html-Quellcode sieht so aus:

<h1><span>Überschriftstext</span></h1>

Das dazugehörende CSS so:

h1  
{  
background:transparent url(überschriftsbild.jpg) no-repeat;  
display:block;  
height:120px;  
margin:0 auto;  
width:350px;  
}  
  
h1 span  
{  
display:none;  
}

Das funktioniert (ohne CSS sieht man den Überschriftstext, mit CSS statt dessen das Bild) und ist laut Validator valide.

Nun möchte ich das ganze zu einem Link machen. Und zwar so, dass nur der 350*120px Bereich des Bildes ein Link ist.

Ich seh den Wald vor lauter Bäumen nicht. Wie schreib ich da den Quelltext bzw. das CSS richtig, so dass die Seite valide bleibt? Das <a> vor dem <h1> liefert beim Validator eine Fehlermeldung. Das <a> vor oder nach dem <span> bringt zwar eine valide Seite, aber ohne Link.

Danke!

Regina