Foros del Web » Creando para Internet » HTML »

imagen al pasar por link

Estas en el tema de imagen al pasar por link en el foro de HTML en Foros del Web. Hola. Tengo una página con un menú desplegable, cada link al pasar el mouse me muestra una imagen. Correcto. <LI><a href="#">Nombre<span><img src="imagen.gif" alt="logo" tittle="Buscador" width="668" ...
  #1 (permalink)  
Antiguo 06/04/2010, 12:49
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Pregunta imagen al pasar por link

Hola.
Tengo una página con un menú desplegable, cada link al pasar el mouse me muestra una imagen. Correcto.

<LI><a href="#">Nombre<span><img src="imagen.gif" alt="logo" tittle="Buscador" width="668" height="462" /></span></a></li>

Lo que quiero es que me muestre la imagen no al lado del link sino donde yo quiera por ejemplo dentro de una celda específica de una tabla, o en una zona determinada de la página por ejemplo superior derecha.

En el CSS al final tengo
#menu ul li ul li a span {display: none;}
#menu ul li ul li a:hover span {
display:block;
position:absolute;
left:200px;
top:10;
}
  #2 (permalink)  
Antiguo 06/04/2010, 12:58
Avatar de Carlangueitor
Moderador ლ(ಠ益ಠლ)
 
Fecha de Ingreso: marzo-2008
Ubicación: México
Mensajes: 9.968
Antigüedad: 9 años, 8 meses
Puntos: 1314
Respuesta: imagen al pasar por link

Tendrás que ponerle posición absoluta colocarla donde la necesites.
Saludos
__________________
Grupo Telegram Docker en Español
  #3 (permalink)  
Antiguo 07/04/2010, 13:08
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: imagen al pasar por link

Hola, necesito algo más.
No se si tengo que añadir código CSS o bien HTML en las opciones de <img> </img>
El código de principio vale, me muestra una imagen al lado del enlace pero yo lo quiero en la zona superior derecha de la página.
Gracias
  #4 (permalink)  
Antiguo 10/04/2010, 12:11
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: imagen al pasar por link

Hola:

Necesitas esto: HTML y CSS.

Saludos.

  #5 (permalink)  
Antiguo 10/04/2010, 12:27
Avatar de jhsilva  
Fecha de Ingreso: mayo-2009
Mensajes: 85
Antigüedad: 8 años, 6 meses
Puntos: 5
Respuesta: imagen al pasar por link

"El código de principio vale, me muestra una imagen al lado del enlace pero yo lo quiero en la zona superior derecha de la página."

Si deseas posicionarlo en la zona superior derecha de la pagina tienes 2 opciones.

1) Seguir el orden de los divs o elementos del header y dentro de él ubicar a tus elementos para posicionarlos. Recuerda usar margin para posicionarlos de fomra correcta.

2) Si deseas que sea en una posición absoluta usa el atributo position:absolute; y ahi lo posicionas con atributos margin-top , margin-left.

Saludos
  #6 (permalink)  
Antiguo 11/04/2010, 07:20
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: imagen al pasar por link

Muchas gracias pero algo no hago bien pues no funciona.
jhsilva entiendo que el atributo position:absolute debo modificarlo en el CSS, no funciona.
También lo he probado en el link detras de <img src="imagen.gif" position="absolute" margin="top; left" y tampoco funciona.
Qué tal si meto el menú desplegable en una celda y que me muestre la imagen en otra celda?
gracias
  #7 (permalink)  
Antiguo 11/04/2010, 14:40
Avatar de jomaruro
Colaborador
 
Fecha de Ingreso: junio-2002
Ubicación: Naboo
Mensajes: 5.442
Antigüedad: 15 años, 5 meses
Puntos: 361
Respuesta: imagen al pasar por link

Hola:

Cita:
Iniciado por laszarzitas Ver Mensaje
También lo he probado en el link detras de <img src="imagen.gif" position="absolute" margin="top; left" y tampoco funciona.
Normal que no funcione, pero tampoco has hecho caso de lo que te he dicho anteriormente ¿verdad? Prefieres que alguien te ponga el código que necesitas y tu copiar y pegar ¿verdad?

Saludos.

  #8 (permalink)  
Antiguo 12/04/2010, 02:26
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: imagen al pasar por link

Cita:
Iniciado por laszarzitas Ver Mensaje
También lo he probado en el link detras de <img src="imagen.gif" position="absolute" margin="top; left" y tampoco funciona.
mientras no reveas tu css, dudo que te funcione, para empezar


style="position: absolute; margin-top: 3px; margin-left: 3px;"

A leer un poco por favor
saludos
  #9 (permalink)  
Antiguo 12/04/2010, 04:47
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: imagen al pasar por link

Hola emprear, ahí va el código CSS, ya sé que todo está en los libros y en internet!!

* {
PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px; outline: 0
}
HTML {
WIDTH: 100%
}
BODY {
WIDTH: 100%
}
BODY {
background-image: url('fondo_1.gif'); FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif
}
#menu {
FONT-SIZE: 0.7em; font-weight: bold; MARGIN: 20px; WIDTH: 30px; TEXT-ALIGN: center
}
#menu UL {
LIST-STYLE-TYPE: none
}
#menu UL LI.nivel1 {
WIDTH: 162px
}
#menu UL LI.primera {
BORDER-TOP: #fff 1px solid
}
#menu UL LI A {
BORDER-RIGHT: #fff 1px solid; PADDING-RIGHT: 8px; BORDER-TOP: #fff 1px; DISPLAY: block; PADDING-LEFT: 8px; PADDING-BOTTOM: 8px; BORDER-LEFT: #fff 1px solid;
COLOR: #fff; PADDING-TOP: 8px; BORDER-BOTTOM: #fff 1px solid; POSITION: relative; background:#fff url(boton_1a.gif); TEXT-DECORATION: none
}
#menu UL LI:hover {
COLOR: #000; POSITION: relative; BACKGROUND-COLOR: #f93
}
#menu UL LI A:hover {
COLOR: #000; POSITION: relative; BACKGROUND-COLOR: #f93
}
#menu UL LI:hover A.nivel1 {
COLOR: #0000; POSITION: relative; background: url(boton_1b.gif);
}
#menu UL LI A.nivel1 {
DISPLAY: block! important; POSITION: relative
}
#menu UL LI UL {
DISPLAY: none
}
#menu UL LI A:hover UL {
DISPLAY: block; LEFT: 161px; POSITION: absolute; TOP: -1px! important
}
#menu UL LI:hover UL {
DISPLAY: block; LEFT: 161px; POSITION: absolute; TOP: -1px! important
}
#menu UL LI UL LI A {
WIDTH: 160px;
COLOR: #000000; BACKGROUND-COLOR: #0000ff
}
#menu UL LI UL LI A:hover {
COLOR: #ffffff; POSITION: relative; background:#fff url(boton_1c.gif);
}
TABLE.falsa {
BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; FLOAT: left; BORDER-BOTTOM-WIDTH: 0px; POSITION: relative; BORDER-COLLAPSE: collapse; BORDER-RIGHT-WIDTH: 0px
}
#menu ul li ul li a span {display: none;}
#menu ul li ul li a:hover span {
display:block; position:absolute; left:200px; top:10;
}
  #10 (permalink)  
Antiguo 15/04/2010, 16:10
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: imagen al pasar por link

bueno, analizar tu CSS sin todo tu HTML resulta medio caótico. Sin embargo te proporciono una solución para que puedas posicionar las imágenes a tu gusto.
Te dejo una demo en la siguiente dirección

http://foros.emprear.com/mostrarcapa...ar_imagen.html

la script la podes obtener en http://foros.emprear.com/mostrarcapas/vercapa.js

Saludos y a trabajar !!!
  #11 (permalink)  
Antiguo 29/05/2010, 14:01
 
Fecha de Ingreso: julio-2009
Mensajes: 47
Antigüedad: 8 años, 5 meses
Puntos: 0
Respuesta: imagen al pasar por link

Gracias emprear. He estado fuera una temporada.

Etiquetas: link, pasar
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 02:28.