Foros del Web » Creando para Internet » CSS »

Poner enlace a una foto por CSS

Estas en el tema de Poner enlace a una foto por CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 03/06/2009, 00:06
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Poner enlace a una foto por CSS

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?
  #2 (permalink)  
Antiguo 03/06/2009, 00:08
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

Cita:
Iniciado por RGT Ver Mensaje
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.
  #3 (permalink)  
Antiguo 03/06/2009, 00:33
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

como puedo hacer eso, podrias explicarme por favor, que codigos debo poner?
  #4 (permalink)  
Antiguo 03/06/2009, 00:36
 
Fecha de Ingreso: marzo-2009
Mensajes: 4
Antigüedad: 8 años, 8 meses
Puntos: 0
Respuesta: Poner enlace a una foto por CSS

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.
  #5 (permalink)  
Antiguo 03/06/2009, 01:36
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 10 años
Puntos: 68
Respuesta: Poner enlace a una foto por CSS

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/
__________________
No diseñes usando tablas.
  #6 (permalink)  
Antiguo 03/06/2009, 03:12
 
Fecha de Ingreso: diciembre-2007
Mensajes: 194
Antigüedad: 10 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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.
  #7 (permalink)  
Antiguo 03/06/2009, 04:54
Avatar de talmente  
Fecha de Ingreso: noviembre-2007
Mensajes: 233
Antigüedad: 10 años, 1 mes
Puntos: 4
Respuesta: Poner enlace a una foto por CSS

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.
  #8 (permalink)  
Antiguo 03/06/2009, 09:49
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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
  #9 (permalink)  
Antiguo 03/06/2009, 10:08
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner enlace a una foto por CSS

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:
Ver original
  1. #header a {
  2. width: /*la misma que #header*/;
  3. height: /*la misma que #header*/;
  4. display: block;
  5. float:left; /*prescindible*/
  6. margin:0;
  7. padding:0;
  8. z-index: 5;
  9. text-decoration: none;
  10. }
Y en el html:
Código html:
Ver original
  1. <div id="header">
  2. <a href="http://www.forosdelweb.com/f53/poner-enlace-foto-por-css-705765/.........." title: "Ir a..." ></a>
  3. </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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #10 (permalink)  
Antiguo 03/06/2009, 10:35
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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?
  #11 (permalink)  
Antiguo 03/06/2009, 10:50
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner enlace a una foto por CSS

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

Mira este código y ya comentas...
Código html:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es-es">
  3. <title>todo el coco es un enlace</title>
  4. <style type="text/css">
  5. * {margin:0; padding: 0; position: relative;}
  6. html, body {
  7. background-color: #cdcdcd;
  8. }
  9. #header {
  10. width: 90%;
  11. height: 150px;
  12. background-color: #444;
  13. overflow:hidden;
  14. margin: 10px auto 0;
  15. }
  16. #header a {
  17. width: 100%;
  18. height: 150px;
  19. display: block;
  20. margin:0;
  21. padding:0;
  22. z-index: 5;
  23. text-decoration: none;
  24. }
  25. </head>
  26. <div id=header>
  27. <a href="http://www.forosdelweb.com/f53/poner-enlace-foto-por-css-705765/"></a>
  28. </div>
  29. </body>
  30. </html>

Un saludo
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #12 (permalink)  
Antiguo 03/06/2009, 10:58
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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?
  #13 (permalink)  
Antiguo 03/06/2009, 11:13
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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?
  #14 (permalink)  
Antiguo 03/06/2009, 12:42
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Poner enlace a una foto por CSS

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
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #15 (permalink)  
Antiguo 03/06/2009, 13:23
RGT
Usuario no validado
 
Fecha de Ingreso: noviembre-2008
Mensajes: 505
Antigüedad: 9 años
Puntos: 5
Respuesta: Poner enlace a una foto por CSS

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
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 20:15.