header cliccabile

[alg1983]

<div id="header"></div>

Ha un'immagine come background e vorrei che l'header fosse cliccabile, come posso fare?
Grazie

[seed_squall_it]

Usi una tecnica di image replacement. Dato che l'header presumo occupi un'area abbastanza grande, puoi usare la Pixy Cover-Up Span.

<h1>Titolo del sito<span></span></h1>

h1 {
font-size: 1px; /* Opzionale: serve a rimpicciolire il testo in modo che non "esca" dall'area dell'elemento <h1> se viene aumentata la dimensione del carattere */
width: XXpx;
height: XXpx;
padding: 0;
margin: 0;
position: relative;
}

h1 a {
width: 100%;
height: 100%;
display: block;
cursor: pointer; /* Mostra la "manina" anche su IE 6 */
}

h1 a span {
background-image: url(IMMAGINE DI SFONDO);
background-repeat: no-repeat;
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
left: 0;
}

Ovviamente, le dimensioni dell'elemento <h1> devono essere uguali a quelle dell'immagine di sfondo. Inoltre l'immagine non deve avere trasparenze. L'unico "inconveniente" è che su IE 5, la "manina" non compare quando sposti il mouse sopra l'area cliccabile. Questo perché IE 5 ha un'implementazione CSS diversa della proprietà cursor. Per IE 5, dovresti impostare il valore di cursor su "hand", ma questo valore non è accettato dal W3C e quindi il CSS risulterebbe non valido.