Ocultar Fila

Citar

Escrito el 27 Mar 2012 01:31 am

Hola, soy muy nueva en esto de la programación :oops:

lo que quiero hacer es que la fila donde esta la imagen quede oculta desde el principio y que al pasar el mouse sobre las letras aparezca, ya tengo hecho que aparezca y desaparezca, lo que no se como hacer es que la imagen desde el principio este oculta.

mi código

Código :

<script language="JavaScript">
<!--
function ocultarFila(num,ver) {
  dis= ver ? '' : 'none';
  tab=document.getElementById('tabla');
  tab.getElementsByTagName('tr')[num].style.display=dis;
  
}
function ocultarColumna(num,ver) {
  dis= ver ? '' : 'none';
  fila=document.getElementById('tabla').getElementsByTagName('tr');
  for(i=0;i<fila.length;i++)
    fila[i].getElementsByTagName('td')[num].style.display=dis;
}
 
</script>  
</head>

<body>
<table width="612" border="0" cellspacing="0" cellpadding="0" id="tabla">
  <tr>
    <td onmouseover="ocultarFila(1,true)" onmouseout="ocultarFila(1,false)">blablabla</td>
  </tr>
  <tr>
    <td ><img src="images/papper_03.png" width="76" height="57" /></td>
  </tr>
  <tr>
    <td>blablalbla</td>
  </tr>
</table>
</body>
</html>

Como se ve hasta ahora:

http://altitux.com/prueba/prueba2.html

lo que quiero es que la estrella este oculta desde el principio.
Gracias!

Por tahita

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Mar 2012 03:14 am

display: none....

Por HtrMancera

Claber

342 de clabLevel

1 tutorial

Genero:Masculino

Envíale un mensaje privado Web

Front-end Developer

Citar

Escrito el 27 Mar 2012 03:21 am

gracias, pero si le pongo display:none no aparece nunca la imagen aunque pase el mouse encima de las letras

Por tahita

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Mar 2012 09:04 am

que complicado!! me refiero al código, supongo que es tuyo.

a veces hay que usar la lógica, y los códigos fluyen de forma más sencilla... a ver si quieres ocultar una imagen, ¿por qué no lo haces? es decir porque usas tablas. El código en bruto sería algo asi.

Código HTML :

<div id='l1' onmouseover="accion()"> Esta es una frase </div>
<div id='l2'><img src="imagen a ocultar.jpg"></div>
<div id='l3'> esta otra frase </div>

bien teniendo esta estructura... es actuar sobre el estilo.. que se podría usar visibility más acorde con lo que queremos.

la función en este caso nos ocultaría 'l2', por ejemplo... si usamos visibility.. la opcion sería hidden o collapse (si queremos que no reserve el espacio). Y para verlo visible.

la funcion es simple incluso al ser visible/no visible, se podría aprovechar todo en una acción.

PD:para los meticulosos, esto es a grandes rasgos... no el código depurado.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 27 Mar 2012 03:09 pm

muchas gracias, yo no hice el código, soy muy nula así que lo copié y trate de implementarlo, tal vez es muy viejo y complicado para lo que quiero, gracias por tu consejo de simplificar lo malo es que no se como ponerle la acción, sería la de collapse, lleva algún javascript ? o en los puros divs se pone la acción?

perdón, realmente estoy en ceros en programación :oops:

Por tahita

5 de clabLevel

Envíale un mensaje privado

Citar

Escrito el 27 Mar 2012 03:48 pm

jop... no soy partidario del copy/pastea ver si en un momento te subo el codigo entero.

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 27 Mar 2012 05:29 pm

bueno aqui te dejo el codigo y todo funcionando... (en bruto)

Código Javascript :

<script>

function ocultar(){

var VarTemp="none";
var ControlTemp = document.getElementById("l2").style.display

if (ControlTemp=="none"){ VarTemp="";}else{ VarTemp="none";}
document.getElementById("l2").style.display=VarTemp;
}

</script>

Código :

<body >

<div id='l1' onmouseover="javascript:ocultar();" onmouseout="javascript:ocultar();" > Esta es una frase </div>
<div id='l2' ><img src="http://altitux.com/prueba/images/papper_03.png"></div>
<div id='l3' > esta otra frase </div>

</body>

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 27 Mar 2012 06:03 pm

una pequeña modificación..... para que se abra sin ser visible.

<body >

<div id='l1' onmouseover="javascript:ocultar();" onmouseout="javascript:ocultar();" > Esta es una frase </div>
<div id='l2' style="display:none;"><img src="http://altitux.com/prueba/images/papper_03.png"></div>
<div id='l3' > esta otra frase </div>

</body>

Por Silvestre_

391 de clabLevel

1 tutorial

Envíale un mensaje privado Web

"un simple aficionado", pero acepto propuestas de trabajo

Citar

Escrito el 27 Mar 2012 06:25 pm

aaaah perfecto, eso es lo que andaba buscando (y)