Imagenes q no aparecen. Ayuda ^^

Hiruma-Sama · #1 (**permalink**) 10/07/2008, 16:54

Hola como les va, les comento que en una web que habia echo, use un codigo CSS ... el cual lo que hace es, que al uno posarse sobre un link, por ejemplo una palabra ... "entrada" a la derecha de la misma, aparezca una imagen la cual hace referencia a dicha palabra ... y si uno hace click en la palabra nos lleva a la misma foto pero pudiendola descargar.

ahora bien, me funciona perfecto en Mozilla firefox e incluso en Internet Explorer a algunos les anda bien, pero hay otros que no les anda ... osea no ven las imagenes, digamso que no aparecen ...

les dejo el link del sitio para que vean ... como es el caso, si pueden visualicenlo con ambos navegadores.

http://www.fullfun.com.ar/default.htm

aqui el codigo:

Cita:

/**Con la siguiente porcion de codigo, podemos hacer que al posar el mouse, sobre una palabra,**/
/**o tambien una frase, podamos hacer que aparezca, en determinada posicion de la web, una Imgaen.**/

div#links {width: 250px; height: 230px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 0px 3px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #000000; }
div#links a:hover {color: #FF0000;}

div#links a img {height: 0; width: 0; border: 3px #cb62ff;}
div#links a:hover img {position: absolute; top: 155px; left: 300px; height: 200px; width: 200px;}

Alguna solucion o algo que me digan que me pueda ayudar, para que funcione correctamente y en todos lados por igual ? ? ? ? ?

birkin72 · #2 (**permalink**) 10/07/2008, 20:58

Que rollo man ps la neta ni vi tu codigo man pero tengo un menu que tambien funciona igual que tus <div> checalo tambien carga imagenes

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
/* TABS */
#tabs {
background:#F6F6F6 url('/images/conthead.gif') repeat-x bottom;
height:24px;
}
#tabs .b {
margin:0 0 0 5px;
border-right:1px solid #FFF;
border-left:1px solid #666;
float:left;
display:inline;
}
#tabs a {
display:block;
float:left;
/*width:120px;*/
border-right:1px solid #666;
border-left:1px solid #FFF;
text-decoration:none;
font-size:12px;
font-weight:bold;
color:#111;
padding:4px 15px 6px 15px;
}
#tabs a:hover {
background:url('/imagenes_pagina/averde.png') repeat-x bottom;
color:#666;
text-decoration:none;
padding:3px 15px 7px 15px;
}
#tabs #current {
background-image:url('/imagenes_pagina/averde.png');
}
#tabs #current a {
color:#999;
}

/*END TABS */
</style>
</head>

<body >
<div id="tabs"><table style="border-collapse:collapse;font-family:Tahoma,Arial, Helvetica, sans-serif;font-size:10pt;"><tr><td style="margin:0px; padding:0px; border:0px;"><a href="contacto.asp">CONTACTO</a></td><td style="margin:0px; padding:0px; border:0px;"><a href="alta_vacante.asp">ALTA VACANTE</a></td></tr></table></div>
</body>
</html>

Hiruma-Sama · #3 (**permalink**) 10/07/2008, 22:06

gracias por responder ^^

pero bueno, mi problema radica en que en algunos Internet Explorer 6.0 ... no pueden ver las imagenes (no aparecen) cuando uno se posa sobre el contenido, cosa q en firefox siempre se cumple, y no si es un error de mi codigo o es otra cosa >_<!

Mikmoro · #4 (**permalink**) 11/07/2008, 04:40

El asunto es largo de explicar, pero básicamente es que en IE6, el "a:hover" necesita tener posición relativa, porque si no no muestra lo que tiene dentro (la imagen en este caso)

div#links a:hover {position:relative;}

Si pones esto se verán las imágenes con IE6, pero te encontrarás otro problema: la posición absoluta de las imágenes ahora no será con respecto a la página, sino a los enlaces, y no saldrán todas en el mismo sitio, sino en un lugar con respecto a cada enlace, y arreglarlo tiene batante jaleo.

Mikel.

Hiruma-Sama · #5 (**permalink**) 11/07/2008, 11:09

ah muchisimas gracias :D
entiendo el problema que contrae, se puede arreglar de alguna manera ?
por que en si yo con que se vea y quede en un lugar logico o que no se interpone a otra cosa, me alcanza.

gracias por el dato :P

Mikmoro · #6 (**permalink**) 11/07/2008, 17:28

Te pongo un ejemplo para que veas por dónde va la cosa. Es en tres pasos:

1.- en la cabecera de tu html debes añadir esto justo después de la etiqueta </style>:

Cita:

2.- Ahora en la css debes hacer estos cambios:

Cita:

div#links {width: 250px; height: 230px; font: 10px Verdana, sans-serif; z-index: 100;}
div#links a {display: block; text-align: center; font: bold 1em sans-serif;
padding: 0px 3px; margin: 0 0 1px; border-width: 0;
text-decoration: none; color: #000000;}
div#links a:hover {color: #FF0000;position:relative;}
div#links a img {display: none; border: 3px #cb62ff;}
div#links a:hover img {position: absolute; height: 200px; width: 200px;display: block;}
.uno, .dos, .tres, .cuatro {left: 240px;}
.uno {top:4px;}
.dos {top:-9px;}
.tres {top:-22px;}
.cuatro {top:-35px;}

copia y pega tal cual

3.- En el html debes poner una clase a cada imagen:

Cita:

<div id="links">
<a href="http://fullfun-test.iespana.es/Frente.gif">Frente<img class="uno" src="Frente.gif" /></a>
<a href="http://fullfun-test.iespana.es/Entrada.gif">Entrada<img class="dos" src="Entrada.gif" /></a>
<a href="http://fullfun-test.iespana.es/Salon.gif">Salón<img class="tres" src="Salon.gif" /></a>
<a href="http://fullfun-test.iespana.es/Escritorio.gif">Escritorio<img class="cuatro "src="Escritorio.gif" /></a>
</div>

copia y pega también para ver el ejemplo.

A ver si te orienta de por dónde va la cosa.

Mikel.

Hiruma-Sama · #7 (**permalink**) 11/07/2008, 19:51

Bueno muchisimas gracias ^^.
me a funcionado correctamente en Internet Explorer y en Opera.
en el firefox, la imagen me aparece por debajo del link, pero pareciera que no se actualiza correctamente la pagina .html ; seguro sera algo de las cookies, pero lo importante es que ahora me anda bien en IE.

Estare al tanto para que me funcione correctamente en los diferentes navegadores, y seguire probando y haciendo pruebas...

Gracias.

PD: el primer codigo que me pasaste, va tal cual lo pusiste no ? ... ademas q es como un "comentario de codigo" ?

me refiero a:

Cita:

saludos. ^^

Mikmoro · #8 (**permalink**) 12/07/2008, 05:14

Sí, tal cual te lo puse. Eso es un comentario condicional, que sólo entiende Explorer, y se usa para poner reglas específicas sólo para él.

Mikel.

Hiruma-Sama · #9 (**permalink**) 14/07/2008, 15:43

Realmente Muchisimas gracias, me a funcionado de maravilla ^^

Mikmoro · #10 (**permalink**) 14/07/2008, 15:47

De nada, es un placer.

Saludos.

Mikel.