Poner enlace a una foto por CSS

[RGT]

Hola en mi css tengo agregado una imagen

Código:

background-image: url(images/rborder.jpg);

cual es el codigo para que tambien por CSS yo le pueda agregar un enlace, un link a esa foto?

[MiLLeN]

Iniciado por RGT

Hola en mi css tengo agregado una imagen

Código:

background-image: url(images/rborder.jpg);

cual es el codigo para que tambien por CSS yo le pueda agregar un enlace, un link a esa foto?

Lo que intentas con CSS no se puede amigo, lo que tienes que hacer es utilizar javascript y un evento onclick por ejemplo.

[RGT]

como puedo hacer eso, podrias explicarme por favor, que codigos debo poner?

[grafo0]

Hola RGT,
En mi primera página en css tuve un problema similar al intentar hacer que una capa con background-image funcionara como botón con link, la solucion que encontré fue agregar una imagen transparente de la misma dimensión como link, el codigo que use fue:
(no se si sera la solución mas ortodoxa a ojos de expertos, pero funciona) ;)

En CSS tienes:

.tubodyclass #tucapa {background-image:url( )}

Y en el HTML lo siguiente:

<div id="tucapa"><a href="aqui va el link.html"><img src"aqui la imagen transparente.gif"></a></div>

Consideraciones:
*1* La imagen transparente debe ser de la misma dimensión que la capa y la imagen background.
*2* Se puede usar como boton y agregar un atributo "hover" para que al pasar el mouse por encima de la capa cambie de imagen, simulando un boton dinamico con esta sentencia en la pagina de estilos:

.tubodyclass #tucapa:hover {background-image:url(la otra imagen aqui )}

Saludos.

[hades87]

o al div le puedes poner un display: block creo que es y te actúa como un botón, sino mriate esta forma de hacer menús para entenderlo

http://www.cristalab.com/tutoriales/...-listas-c130l/

[MiLLeN]

Grafo y hades, aunque vuestras soluciones son correctas y funcionan, si no me equivoco, lo que el compañero pide es convertir un <div> en un boton sin necesidad de tener que utilizar un <img>, y en ese caso lo unico que puede hacer, es utilizar javascript.


Para eso, hay varias opciones, puedes ponerle por ejemplo al div el evento onclick, seria algo asi:

<div onclick="funcionQueSea('direccionPagina.xxx');"></div>

y luego tienes

<script type="text/javascript">
function funcionQueSea(url){
window.location = "http://" + url;
}
</script>

Aunque yo prefiero usar jQuery y utilizar los eventos de esta libreria para hacerlo.

[talmente]

Hola, si no entiendo mal tu lo que quieres hacer es esto:

Código:

a {
	background: url(imagenes/azulamerica.jpg);
	display: block;
	height: 350px;
	width: 400px;
	text-indent: -2000px;
}
a:hover {
	background: url(imagenes/azul-belleza.jpg) 4px 5px;
	display: block;
	height: 350px;
	width: 400px;
}

HTML:

<a href="http://images.google.es/imgres?imgurl=http://hablasonialuz.files.wordpress.com/2009/05/azulamerica.jpg&imgrefurl=http://hablasonialuz.wordpress.com/2009/05/04/azul-bellisima-nuestra-casa-imagenes-de-la-tierra-desde-el-espacio/&usg=__2K-IoFk257TLdipVmgfn9n_f_EY=&h=345&w=460&sz=24&hl=es&start=252&um=1&tbnid=Re30tpoSBLEu-M:&tbnh=96&tbnw=128&prev=/images%3Fq%3Dimagenes%26ndsp%3D20%26hl%3Des%26sa%3DN%26start%3D240%26um%3D1">Link</a>

Hay otra manera con una sola imagen, pero bueno mira esto y después si quieres te digo la otra manera, que es un reinvento de Mikmoro. En el link llevas el enlace a las fotos.

Te pongo solo <a> y <a:hover> espero sea lo que querias.

[RGT]

Hola amigo, gracias por su ayuda, pero ninguno funciono.

en mi css tengo

Código:

#header {
	background:url(img/header.jpg) 0 0 no-repeat;
	height:120px;
	border-bottom:1px solid #A6A6A6;
}

y en el html tengo

Código:

<div id="header">

no ecuentro forma de ponerle un link oh una foto encima transparente con un link para que la foto no este sin un enlace, ya que se ve anti profesional

hay otra forma

[kseso?]

Hola RGT
¿Lo que quieres es que todo el #header sea un enlace sin que tenga nada más que la imagen de fondo?

Bueno, no te recomiendo que uses la vía del background para dotar de contenido la cabecera de la imagen, pero eso es tema aparte.

Buenos, veamos:
Supongo que #header tiene por herencia: "position: relative". No dices la anchura de #header, deberías darle una.

en el css yo añadiría:

Código css:

#header a {
width: /*la misma que #header*/;
height: /*la misma que #header*/;
display: block;
float:left; /*prescindible*/
margin:0;
padding:0;
z-index: 5;
text-decoration: none;
}
 

Y en el html:

Código html:

<div id="header">
<a href="http://www.forosdelweb.com/f53/poner-enlace-foto-por-css-705765/.........." title: "Ir a..." ></a>
</div>
 

Lo anterior se puede adornar algo más.

Pero ya te comento de los peligros de que no carguen las imágenes: cabecera vacía.

Espero te sirva
Un saludo

[RGT]

Hola,
pues hice lo queme dijiste
y no aparece un enlace en la foto
no seria mejor agregar otra imagen transparente con un link y listo?

[kseso?]

Tienes razón. Las prisas y no verificar la respuesta

Mira este código y ya comentas...

Código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
<head>
<title>todo el coco es un enlace</title>
<style type="text/css">
* {margin:0; padding: 0; position: relative;}
html, body {
background-color: #cdcdcd;
}
#header {
width: 90%;
height: 150px;
background-color: #444;
overflow:hidden;
margin: 10px auto 0;
}
#header a {
width: 100%;
height: 150px;
display: block;
margin:0;
padding:0;
z-index: 5;
text-decoration: none;
}
</style>
</head>
<body>
<div id=header>
<a href="http://www.forosdelweb.com/f53/poner-enlace-foto-por-css-705765/"></a>
</div>
</body>
</html>
 

Un saludo

[RGT]

Eres un DIOS, ya la foto tiene link, pero tengo una preocupacion

no hay forma de poner el codigo CSS mas pequeño, creo que hay cosas que estan demas o no?

[RGT]

Bueno, no importa, funciona.

otra preguntica, hay una forma con el css o algun otro codigo de poner que se muestre imagenes aleatorias cada vez que se recargue la web?

puede ser 2 imagenes aleatorias o 3...
se podria?

[kseso?]

A lo primero: no lo soy, dimití porque no me hacía caso nidios
Quieres aligerar el css? Como mi código lo tendrás que ajustar a tus necesidades, sigue la regla de 1 cambio por vez: haz un cambio, mira los resultados y si todo correcto, sigue, si no, deshacer.

A lo segundo: con css no podrás rotar imágenes. Necesitarás otro lenguaje: con algún script, php... pero eso ya es otro tema (vamos, que no tengo ni idea).

Un saludo

[RGT]

se que necesitare codigo php
pero que codigo es mejor, recomiendenme uno php para que muestre una de las imagenes ejemplo:
foto1.jpg, foto2, foto3, etc..

y otro codigo para el css para que muestre la imagen