Link en etiqueta DIV con CSS

Saludos.

Teniendo lo siguiente:

##############################
1. En mi html tengo esta etiqueta:
<div class="central" id= "test_central"></div>

2. Y la clase "central" está definida así:
.central {
background-image: url(imagenes/central.png);
}
##############################

¿cómo podría poner un link "http" a esa imagen ó a esa etiqueta?

Mil gracias!

JOHNMARTIN

Hola
Usando jQuery puedes acceder a los atributos que necesitas con el siguiente script

Código :

$(document).ready( function(){
   $(".central").each( function(){
      imagen= $(this).css("backgroundImage");
      $(this).append( "<a href=\""+imagen.substring(4, imagen.length-1)+"\">"+$(this).attr("id")+"</a>");
   });
});

Explicando: El script primero busca cada elemento que tenga la clase central. Luego, almacena el valor de la propiedad "background-image" a la variable imagen. Luego, le añade (append) un link al div:

El href es un substring pues el valor retornado de background-image es "url(imagen)", entonces, nosotros nos encargamos de quitar el "url()". Por ultimo, para rellenar el texto del link, usamos el id del div

Espero te funcione. Si no es lo que buscabas... pregunta aqui mismo

Yo hago eso normalmente poniendo una etiqueta <a> en el div:

Código :

<div class="central" id="test_central"><a href="http://www.tu_link.com"><span>texto x (sirve para que quede indexado bien)</span></a></div>

Y luego con css hago el bloque y oculto el texto:

Código :

.central {
background-image: url(imagenes/central.png);
}
.central a {
display: block; // para poder darle altura y ancho
width: 300px; //ancho de la imagen
height: 100px; // altura de la imagen
}
.central a span  {
display: none; // oculto el texto
}

Y listo,. tienes un link transparente encima de la imagen

Perfecto Ramm! Mil gracias, super fácil.

Aunque tengo una pregunta, siendo un link con CSS, cuál sería la opción mas "adecuada" de las dos?

JOHNMARTIN

por que te complicas tanto ???

Código :

<a><img/></a> 

sobre todo teniendo presente que la navegabilidad de un sitio no debe depender ni de los css ni menos aun de los js

La solucion en jQuery es efectiva si tienes muchas imagenes que se actualizan dinamicamente... por ejemplo en una galería... y para eso era que te lo proponía

Siendo el asunto estatico... me parece mucho mejor la solucion de ramm a la de inyaka, pues lo que desea jhonmartin es aplicar imagen a una clase, pues probablemente la imagen la llevaran varios divs o links o lo que sea. De esta manera, queda mas facil asignar:

Código :

<div class="central"><a href="http://www.tu_link.com"><span>Texto 1</span></a></div>
<div class="central"><a href="http://www.otro_link.com"><span>Texto distinto</span></a></div>
<div class="central"><a href="http://www.hey_link.com"><span>Texto otro</span></a></div>

que

Código :

<div class="central"><a href="http://www.hey_link.com"><img src="urllargarynocool.png" title="MismaImagen" /></a></div>
<div class="central"><a href="http://www.hey_link_secundario.com"><img src="urllargarynocool.png" title="MismaImagen" /></a></div>
<div class="central"><a href="http://www.hey_otro_link.com"><img src="urllargarynocool.png" title="MismaImagen" /></a></div>

No siendo mas... saludos!

PD: De hecho la solucion de ramm no depende de tus hojas de estilo, pues si entra un browser basado en texto o un bot, vera el span, ademas del link

Hey JM, hace tiempo que no te vemos por acá.

Pues este tema depende de qué es lo que quieras hacer, si es una imagen que debe ser tratada como imagen dentro de un contexto, lo mejor seria que uses <a><img></a> (el método de inyaka).

Mientras que si es una imagen que se usa solo para el diseño lo mejor seria ponerlo como un fondo en el div y agregar un enlace como un bloque a 100% de tamaño (el método de ramm).

Por otro lado, cuando uno esta un poco limitado y/o quiere agregar un enlace "al vuelo" como un agregado extra, es recomendable usar javascript (el método de lycanthrop).

Y btw, usa la etiqueta [code] para agregar código
Good to see you around.

BOFH note: El comentario del usuario Buzu ha sido borrado por el escaso (nulo) aporte al tema.

Bueno veo que esto se discutió en 2007 y a mí me acabó de salvar!!!!

Vaya, yo no lo consigo

no hay manera, quiero poner el enlace en el css con una foto y en el html poner el enlace

lo he buscado por todas partes

Saludos