Problema Mouseout

smith_visual · #1 (**permalink**) 23/11/2012, 18:53

Estimados,

Un gusto en saludarlos, necesito si me pueden orientar con un problema que tengo, resulta que tengo una tabla html, con la que cree un pequeño menú(que pronto integrare en otro proyecto) e intento mostrar en una celda un texto y al posesionar el mouse sobre la celda debe mostrar una imagen(en un div) y al salir debe ocultar esa imagen, me funciona perfecto en IE8, pero en Firefox y chorme no funciona..

, les adjunto el codigo para ver si me puden orientar, por favor.

Código:

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" Inherits="_Default" %>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Pruba Con Imagenes</title>
    <script language="Javascript">
            function ocultar(objeto)
             {
                 if ((objeto != 'undefined') && (objeto != null)) 
                 {
                     document.getElementById(objeto).style.display = "none";
                     document.getElementById(objeto).style.visibility = "hidden";
                  } //visibility = "hidden"; }
                 
             }

             function mostrar(objeto)
             {
                 document.getElementById(objeto).style.visibility = "visible";
                 document.getElementById(objeto).style.display = "block"; //POSITION: absolute;
                 document.getElementById(objeto).style.position = "absolute"; //POSITION: absolute;
             }
 
    </script>
    <style type="text/css">
        .divprincipal
         {
            padding-bottom : 1px; BACKGROUND: white; COLOR: white; PADDING-TOP: 0px
         }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <table cellspacing="0" cellpadding="1">
      <tr>
        <td>
			<div class="divprincipal" onmouseover="mostrar('div_img1');" onmouseout="ocultar('div_img1');" >
				 <div style="WIDTH: 133px; FONT-FAMILY: Arial, Helvetica, sans-serif;color:White; 
                             BACKGROUND: rgb(205,43,63); FLOAT: left; HEIGHT: 36px; FONT-SIZE: 12px; FONT-WEIGHT: bold">
						     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						     &nbsp;&nbsp;&nbsp;&nbsp;
						     <br />
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                             La;&nbsp;Granja  
      				    <div id="div_img1" style="visibility:hidden;display:block; position:absolute;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
							 <img id="img1" onmouseout="ocultar();" 
							      style="WIDTH: 300px; HEIGHT: 350px" src="https://si0.twimg.com/profile_images/2284174786/1ppm9vhwkifs03rdebow_normal.png" /> 
						</div>
				  </div>
			 </div>
		 </td>
	  </tr>
      <tr>
        <td>
			<div class="divprincipal" onmouseover="mostrar('div_img2');"  onmouseout="ocultar('div_img2');" >
				 <div style="WIDTH: 133px; FONT-FAMILY: Arial, Helvetica, sans-serif;color:White; 
                             BACKGROUND: rgb(205,43,63); FLOAT: left; HEIGHT: 36px; FONT-SIZE: 12px; FONT-WEIGHT: bold">
						     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
						     &nbsp;&nbsp;&nbsp;&nbsp;
						     <br />
                             &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
                             La&nbsp;Casona  
      				     <div id="div_img2" style="visibility:hidden;display :  block; position:absolute;" >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
							<img style="WIDTH: 300px; HEIGHT: 350px" src="http://r18.imgfast.net/users/1814/33/64/22/avatars/21373-38.png"/> 						
					    </div>
				  </div>
			</div>  
	    </td>
	  </tr>
    </table>					
    </div>
    </form>
</body>
</html>

smith_visual · #2 (**permalink**) 23/11/2012, 19:21

Sería ideal, poder usar un css en vez del javascript. algo asi

Código HTML:

.div_principal:hover #div_img1 
{
   visibility: visible;
}

El problema es que no se como sería para ocultarlo

thanos · #3 (**permalink**) 24/11/2012, 05:13

Yo también usaría css, en css3 tienes la propiedad opacity que toma valores de 0 a 1.