zona interactiva con css

[josuenmanuel]

hola :
estoy modificando un web y pues tiene una imagen de fondo, en donde quiero poner en una zona un enlace hacia un sitio web eterno.
la referencia a la  imagen esta en un css, por lo que debo de hacer la zona interactiva desde el css, pero no se como hacerlo, ¿alguna idea? se los agradecere mucho
Este es el codigo del css , donde hace referencia  la imagen

Código: [Seleccionar]

#header {
width: 900px;
height: 256px;
margin-top: 14px;
background: url(images/header.jpg) no-repeat;
position: relative;

}

despues me imagino que debo poner la zona interactiva , aqui es donde necesito su ayuda, gracias

[hkadejo]

A que te refieres con zona interactiva???

[josuenmanuel]

A que te refieres con zona interactiva???

es decir que cuando le de clic a una parte de la imagen esta enlace hacia otro sitio web, en si un vinculo hacia otro sitio web pero desde una zona de una imagen

[rdoggsv]

le han puesto al id header un background, tendrías que quitarla del header y poner en el html algo así como

<div id="header">
<a href="http://link-externo"><img src="source_de_la_imagen" /></a>
</div>

Así como esta ahorita la imagen como background del header, no se me ocurre como le podes poner un link.

[hkadejo]

es decir que cuando le de clic a una parte de la imagen esta enlace hacia otro sitio web, en si un vinculo hacia otro sitio web pero desde una zona de una imagen

Bueno tenes dos opciones para hacer eso: con mapas o con sprites.

Ejemplo de lo primero:
http://www.webreference.com/programming/image_map/

Ejemplo de lo segundo
http://www.alistapart.com/articles/sprites
http://www.alistapart.com/d/sprites/ala-blobs2.html

[rdoggsv]

hkadejo, la cosa es que me imagino que quier que todo el header se convierta en un link

[hkadejo]

hkadejo, la cosa es que me imagino que quier que todo el header se convierta en un link

Ah bueno en ese caso creo que seria algo asi:

Código: [Seleccionar]

<a class="fondo" href="http://link-externo"></a>

a.fondo {
    background: url("imagen.png") no-repeat scroll left center transparent;
    display: block;
    line-height: 50px;   
    padding: 0 0 0 30px;
    text-decoration: none;
    width: 240px;
}

Con eso tu link seria una imagen, solo es que ajustes el ancho y alto segun tu necesidad, lo mismo el padding y el line-height.
Aunque veo la solucion de rdoggsv mas rapida de aplicar. 

[salvadoresc]

en efecto la sugerencia de rdogg es la mejor...


PRO tip
agrega esta clase

Código: [Seleccionar]

a img{border:none;}
pregunta, tenes una razon especial para haberle puesto position relative? 

[josuenmanuel]

pregunta, tenes una razon especial para haberle puesto position relative? 

pues la verdad estoy usando un template, es decir eso ya estaba asi