elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Los 10 CVE más críticos (peligrosos) de 2020


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  ayuda con imagen en html		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: ayuda con imagen en html  (Leído 2,707 veces)
young0320

Desconectado Desconectado

Mensajes: 60


Ver Perfil
ayuda con imagen en html
« en: 15 Enero 2012, 01:52 am »
Buenas,

 Estoy haciendo mi primera página estática con html, css y js. Entonces quiero mostrar una imagen que al hacerle click se abra en una nueva ventana esa misma imagen. Para ello he puesto el código que indico a continuación

Código:
<p><a href="http://www.../motogp1.jpg" target="_blank"><img src="velocidad/images/motogp/motogp1.jpg" width="380px" height="180px"></a></p>

Con esto el resultado es positivo pero no completamente, debido a que el link se me sale de la imagen, es decir si hago click a la derecha o izquierda de la imagen pero fuera de la misma pues también se me abre.

A ver si alguien puede hacer el favor de indicarme qué sucede o alguna pista para apañarlo,

Muchas gracias
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: ayuda con imagen en html
« Respuesta #1 en: 15 Enero 2012, 02:01 am »
Hola, no veo nada raro.

Utilizas CSS ? Si es así, muéstranos lo para a ver que tienes puesto ahí.


Saludos
En línea
young0320

Desconectado Desconectado

Mensajes: 60


Ver Perfil
Re: ayuda con imagen en html
« Respuesta #2 en: 15 Enero 2012, 02:16 am »
Te comento que he tomado una plantilla de los layout gala, es muy simple vienen con etiqueta style y yo he copiado el contenido en un css externo y lo he enlazado. El contenido del css es el siguiente

Código:
html,body{margin:0;padding:0}
body{font: 76% arial,sans-serif;text-align:center}
p{margin:0 10px 10px}
a{display:block;color: #981793;padding:10px}
div#header h1{height:80px;line-height:80px;margin:0;
  padding-left:10px;background: #FF0000;color: #000000}
div#container{text-align:center}
div#content p{line-height:1.4}
div#navigation{background:	#32CD32}
div#extra{background:#32CD32}
div#footer{background: #32CD32;color: #FFF}
div#footer p{margin:0;padding:5px 10px}

div#container{width:1350px;margin:0 auto}
div#wrapper{float:left;width:100%}
div#content{margin: 0 150px}
div#navigation{float:left;width:150px;margin-left:-1350px}
div#extra{float:left;width:150px;margin-left:-150px}
div#footer{clear:left;width:100%}
En línea
#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: ayuda con imagen en html
« Respuesta #3 en: 15 Enero 2012, 02:22 am »
Hola,

Al parecer, en el CSS el elemento a (enlace), tiene definida la propiedad padding como 10.

Eso significa, que todo elemento dentro de un enlace, llevara un margen en el cual tambien sera posible hacer click..

Adicionalmente, también tiene display:block;. Esto significa que pondrá todo enlace en una linea nueva, cosa que puede resultar problemática.


Para resolver esto, elimina lo siguiente  del elemento a en tu CSS.
Código
  1. padding:10px;
Código
  1. display:block;

El css resultante sera:
Código
  1. html,body{margin:0;padding:0}
  2. body{font: 76% arial,sans-serif;text-align:center}
  3. p{margin:0 10px 10px}
  4. a{color: #981793;}
  5. div#header h1{height:80px;line-height:80px;margin:0;
  6.   padding-left:10px;background: #FF0000;color: #000000}
  7. div#container{text-align:center}
  8. div#content p{line-height:1.4}
  9. div#navigation{background:	#32CD32}
  10. div#extra{background:#32CD32}
  11. div#footer{background: #32CD32;color: #FFF}
  12. div#footer p{margin:0;padding:5px 10px}
  13.  
  14. div#container{width:1350px;margin:0 auto}
  15. div#wrapper{float:left;width:100%}
  16. div#content{margin: 0 150px}
  17. div#navigation{float:left;width:150px;margin-left:-1350px}
  18. div#extra{float:left;width:150px;margin-left:-150px}
  19. div#footer{clear:left;width:100%}


Edit: Correcciones hechas. Andaba un poco ido de la cabeza   :silbar:

Saludos
« Última modificación: 15 Enero 2012, 02:31 am por drvy | BSM » En línea
young0320

Desconectado Desconectado

Mensajes: 60


Ver Perfil
Re: ayuda con imagen en html
« Respuesta #4 en: 15 Enero 2012, 02:28 am »
Es lo que iba a comentarte, acabo de ver que el enlace es en esa línea completa, te lo agradezco mucho.

Lo que no entiendo es por que iba a querer alguien enlazar una línea completa, y sobre todo por defecto.

Muchas gracias,
Saludos
En línea
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Mostrar codigo fuente escondido por HTML Protector, HTML Guardian, Altrise, etc.
Desarrollo Web 		sirdarckcat 1 13,884 Último mensaje 10 Enero 2012, 09:40 am
por gm-vl
Extraer url de imagen en codigo html
PHP 		octavioxd 2 7,799 Último mensaje 14 Julio 2010, 20:54 pm
por Shell Root
Ruta de una imagen con html y las tildes
Desarrollo Web 		Aikanáro Anário 2 4,689 Último mensaje 9 Junio 2011, 18:22 pm
por Aikanáro Anário
Duda imagen HTML
Desarrollo Web 		Lecram 2 2,334 Último mensaje 3 Agosto 2011, 07:58 am
por bomba1990
Recortar o seleccionar una sección de una imagen en HTML
Desarrollo Web 		rolomo 3 9,369 Último mensaje 8 Febrero 2012, 02:58 am
por rolomo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines