Imagen de fondo de capa con enlace externo a otra web

Por favor, necesito averiguar cómo puedo hacer en CSS que el fondo me lleve a otra web.

Este es el CSS:


#menuLateral{
float: left;
display: block;
width: 230px;
height:auto;
padding-top:5em;
background-repeat:no-repeat;
background-image:url(../img/img_home/educacion.gif);
}


Necesito que esto: background-image:url(../img/img_home/educacion.gif); tenga un enlace a una web, haciendo clic.


Por favor es urgente!!!! alguien sabe? he estado buscando en la web....y nada....no encuentro nada...

En el html dentro del div #menuLateral crea el link, por ejemplo asi:

Código HTML :

<div id="menuLateral"><a href="http://www.tupagina.com">Tu Pagina</a></div>

Y en el css agregarias unas reglas mas para ese link

Código HTML :

#menuLateral a{
display:block;
width: 230px;
height:50px; /*Esto lo puse yo*/
text-indent:-9999px
}

Te puse la propiedad height porque es necesaria que la especifiques, y tambien en #menuLateral debes ponerle altura y quitar ese padding-top, a menos que tengas una buena razon para el. Suponiendo que la altura de la imagen sea 50px tu css debe quedar asi:

Código HTML :

#menuLateral{
float: left;
display: block;
width: 230px;
height:50px;
background-repeat:no-repeat;
background-image:url(../img/img_home/educacion.gif);
}

#menuLateral a{
display:block;
width: 230px;
height:50px;
text-indent:-9999px
}

GRacias!! me funciona, pero se me descolocan todas las capas que tengo en mi web!!!y es un lio!!

No puedo hacer una capa transparente o algo asi que me sirva de enlace?

Asi la puedo situar mas o menos donde la imagen......o en la propia imagen del fondo del css poner el enlace?

Necesito algun modo para que no se me descoloquen todas las capas!!!

Creando nuevas capas con enlaces se me van!!

No se si existe otro modo de hacerlo......por favor ayudame!!!

Se podrí mapear la imagen en css?

Puedes mapear simplemente agregando los enlaces con posiciones absolutas, y con el mismo metodo que te expuse en el post anterior,puedes tener un enlace <a> con un alto, ancho y display:block;

Y el div contenedor de todo esto debe tener position:relative; para que los absolutos no se te vayan a cualquier otro lado.

Te pongo un ejemplo ficticio:

Asi seria un html:

Código HTML :

<div id="imagen">
   <a href="tupagina.html" id="map1">Mapa 1</a>
   <a href="tupagina.html" id="map2">Mapa 2</a>
   <a href="tupagina.html" id="map3">Mapa 3</a>
</div>

Y asi el css

Código HTML :

/*este selector tiene la imagen a mapear, con su alto y ancho*/
#imagen {width:500px; height:500px; background:url(tuimagen.jpg) no-repeat; position:relative}

/*Reglas generales para los enlaces (les pongo un color para que los veas mejor) */
#imagen a {display:block; position: absolute; text-indent:9999px; background:pink}

/*Los enlaces dentro de la imagen (el mapeo) */
#imagen a#map1 {display:block; height:50px; width:50px; top:0; left: 50px}
#imagen a#map2 {display:block; height:100px; width:30px; top:300px; left: 200px}
#imagen a#map3 {display:block; height:40px; width:80px; top:20px; right: 0px}

Una pequeña correccion que no me di cuenta, en los 3 selectores del mapeo, estoy repitiendo display:block; no deberia estar ahi, ya que lo tengo en la regla general de #imagen a, los individuales solo deben tener alto, ancho y posicion, si en tu caso el alto y ancho es igual para todos, lo pones en las reglas generales, este es el corregido:

Código HTML :

/*este selector tiene la imagen a mapear, con su alto y ancho*/ 
#imagen {width:500px; height:500px; background:url(tuimagen.jpg) no-repeat; position:relative} 
 
/*Reglas generales para los enlaces (les pongo un color para que los veas mejor) */ 
#imagen a {display:block; position: absolute; text-indent:9999px; background:pink} 
 
/*Los enlaces dentro de la imagen (el mapeo) */ 
#imagen a#map1 {height:50px; width:50px; top:0; left: 50px} 
#imagen a#map2 {height:100px; width:30px; top:300px; left: 200px} 
#imagen a#map3 {height:40px; width:80px; top:20px; right: 0px}