imagen al pasar por link

[laszarzitas]

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;
}

[Carlangueitor]

Tendrás que ponerle posición absoluta colocarla donde la necesites.
Saludos

[laszarzitas]

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

[jomaruro]

Hola:

Necesitas esto: HTML y CSS.

Saludos.

[jhsilva]

"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

[laszarzitas]

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

[jomaruro]

Hola:

Iniciado por laszarzitas

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.

[emprear]

Iniciado por laszarzitas

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

[laszarzitas]

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;
}

[emprear]

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 !!!

[laszarzitas]

Gracias emprear. He estado fuera una temporada.