Tema: Mostrar una capa despues de que pase algo
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 11/08/2012, 14:47
Avatar de patilanz
patilanz
 
Fecha de Ingreso: enero-2012
Mensajes: 880
Antigüedad: 12 años, 4 meses
Puntos: 29
De acuerdo Respuesta: Mostrar una capa despues de que pase algo
Cita:
Iniciado por emprear Ver Mensaje
Como yo lo interpreto tiene que suceder esto

Abris la página --> solo se ve la miniatura
haces mouseover sobre la miniatura --> la miniatura se expande hasta 456px y con una pequeña demora se muestra la leyenda
si desplazás el cursor por el resto de la página --> todo que da tal cual
click en la imagen --> se restablece el tamaño a la miniatura y se oculta el mensaje

Ahora, el código que yo te puse hace exactamente eso (IE, Firefox, Opera), pero acabo de descubrir que en Chrome NO, así que es muy probable que estés utilizando Chrome. Desde luego que en IE la transición no se muestra

Para arreglarlo, hice esto

Código HTML: 
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml">
  4.  <head>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  6.   <title>
  7.    Documento sin título
  8.   </title>
  9.   <style type="text/css">
  10. /*<![CDATA[*/
  11.   #imagen {
  12.   width:20px;
  13.   height:20px;
  14.   border:thin;
  15.   border-width:1px;
  16.   border-radius:1px;
  17.   -webkit-transition:all 2s ease;
  18.   -moz-transition:all 1s ease;
  19.   -o-transition:all 1s ease;
  20.   transition:all 1s ease; 
  21.   }
  22.   /*]]>*/
  23.   </style>
  24.   <script type="text/javascript">
  25. //<![CDATA[
  26.   function agrandar(){
  27.   document.getElementById('imagen').style.width='456px';
  28.   document.getElementById('imagen').style.height='473px';
  29.   document.getElementById('imagen').style.borderRadius='20px';
  30.  
  31.   setTimeout('mostrar()', 1500);
  32.   }
  33.   function volver() {
  34.   document.getElementById('imagen').style.width='20px';
  35.   document.getElementById('imagen').style.height='20px';
  36.   document.getElementById('imagen').style.borderRadius='1px'
  37.   document.getElementById('mostrar').style.visibility = 'hidden';
  38.   document.getElementById('mostrar').style.opacity = '0.01';
  39.   }
  40.   function mostrar() {
  41.   var imagen = document.getElementById('imagen').style.width;
  42.   if(imagen == '456px'){
  43.   document.getElementById('mostrar').style.visibility = 'visible';
  44.   document.getElementById('mostrar').style.opacity = '1';
  45.   }
  46.   }
  47.   //]]>
  48.   </script>
  49.  </head>
  50.  <body>
  51.   <img src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" alt="" name="imagen" /> <span style=
  52.   "position:absolute; left: 480px; top: 146px; width: 210px; height: 41px; background-color:#0CF; padding:10px; border-radius:10px; visibility:hidden; opacity: 0.01; -webkit-transition:all 2s ease; -moz-transition:all 1s ease; -o-transition:all 1s ease; transition:all 1s ease;"
  53.   id="mostrar">Pulse en la imagen para volver a su estado anterior.</span>
  54.  </body>
  55. </html>

Es decir, utilizo
var imagen = document.getElementById('imagen').style.width;
if(imagen == '456px'){
en lugar de
var imagen = document.images[0].width;
if(imagen == 456){

demo:
[url]http://foros.emprear.com/html/agrandar.html[/url]

Salvo por lo de la transición, en ahora en todos hace lo mismo, incluido Chrome
Si no es eso lo que estás buscando, sinceramente no lo entiendo

Saludos
Gracias por tu respuesta !

La verdad esq ahora si me funciona perfectamente como queria en chrome pero en firefox y iexplorer que tambien los tengo instalados al ir con el raton la imagen directamente se pone grande sin el efecto. Sera que tengo algo desactivado en ellos?

Gracias