imagen.style.visibility

zhengya · #1 (**permalink**) 31/10/2012, 10:28

Hola, me he encontrado con un problema con el evento " imagen.style.visibility". lo uso para q me "dibuje" una linea en la parte de arriba de mi menu. Es una imagen que por defecto esta oculta, y al pasar el ratón por encima, la hace visible. El código me funciona bien en explorer, firefox, pero no en el chrome.... cosa que me parece rara, os dejo pegado el código :

<body>
<div id="general">
<div id="cabecera">
<script>
function onmouseover_imagen(imagen){
imagen.style.visibility = "visible";
}
function onmouseout_imagen(imagen){
imagen.style.visibility = "hidden";
}
</script>
<div id="logo">
<img class="logo" src="img/logo.png">
</div>
<div id="social">
<img class="siguenos" src="img/siguenos.png">
<img class="faceico" src="img/faceico.png">
<img class="twico" src="img/twico.png">
</div>
<div id="barras">
<img id="imagen1" class="bdescubre" src="img/barramenu/descubre.png" style="visibility: hidden">
<img id="imagen2" class="bservicios" src="img/barramenu/servicios.png" style="visibility: hidden">
<img id="imagen3" class="bpromociones" src="img/barramenu/promociones.png" style="visibility: hidden">
<img id="imagen4" class="bchequesregalo" src="img/barramenu/chequesregalo.png" style="visibility: hidden">
<img id="imagen5" class="bnovedades" src="img/barramenu/novedades.png" style="visibility: hidden">
<img id="imagen6" class="bcontacto" src="img/barramenu/contacto.png" style="visibility: hidden">
</div>
<div id="menu">
<img onmouseover="onmouseover_imagen(imagen1);" onmouseout="onmouseout_imagen(imagen1);" class="descubre" src="img/descubre.png">
<img onmouseover="onmouseover_imagen(imagen2);" onmouseout="onmouseout_imagen(imagen2);" class="servicios" src="img/servicios.png">
<img onmouseover="onmouseover_imagen(imagen3);" onmouseout="onmouseout_imagen(imagen3);" class="promociones" src="img/promociones.png">
<img onmouseover="onmouseover_imagen(imagen4);" onmouseout="onmouseout_imagen(imagen4);" class="chequesregalo" src="img/chequesregalo.png">
<img onmouseover="onmouseover_imagen(imagen5);" onmouseout="onmouseout_imagen(imagen5);" class="novedades" src="img/novedades.png">
<img onmouseover="onmouseover_imagen(imagen6);" onmouseout="onmouseout_imagen(imagen6);" class="contacto" src="img/contacto.png">
</div>
</div>

</div>
<div id="footer">
<center>
<a class="pie">XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX XXXXX</a>
</center>
</div>
</body>

Muchas gracias de antemano.

chwc · #2 (**permalink**) 31/10/2012, 16:34

por que no usas en ves de visibility opacity ¿?

Código Javascript:

Ver originalfunction onmouseover_imagen(imagen){
imagen.style.opacity = 1;
} 
function onmouseout_imagen(imagen){
imagen.style.opacity = 0;
}

tambien puedes usar un valor como 0.3 para opacity (para que se vea solo un poco)

zhengya · #3 (**permalink**) 02/11/2012, 04:42

Hola, recién lo acabo de cambiar, y me sigue sin funcionar. A alguno se le ocurre otra manera de hacerlo funcionar? u otro método que me lleve el mismo fin......

caricatos · #4 (**permalink**) 02/11/2012, 05:21

Hola:

Si usas imagen1 sin entrecomillar, debería existir una variable con ese nombre... explorer genera variables con el nombre del id de cada etiqueta, pero no todos los navegadores funcionan igual... la solución es entrecomillar el parámetro, por supuesto alternando comillas simples con las dobles, y en tus funciones usar document.getElementById(el_parámetro)...

Saludos

zhengya · #5 (**permalink**) 02/11/2012, 05:58

Hola, acabo de "intentar" poner en practica lo que comentas, pero me he perdido un poco.

<img onmouseover="onmouseover_imagen('imagen1');" onmouseout="onmouseout_imagen('imagen1');" class="descubre" src="img/descubre.png">

aquí le puse comillas simples a al parámetro......

después en la función

<script>
function onmouseover_imagen(document.getElementById(imagen) ){
imagen.style.visibility = "visible";
}
function onmouseout_imagen(document.getElementById(imagen)) {
imagen.style.visibility = "hidden";
}
</script>

me da errores el compilador y no estoy seguro de poner, o entender bien lo que dices.....

De nuevo muchas gracias!

caricatos · #6 (**permalink**) 02/11/2012, 06:12

Hola:

Código:

<script>
function onmouseover_imagen(imagen) {
document.getElementById(imagen).style.visibility = "visible";
}

// ... te queda el resto...
</script>

Saludos

zhengya · #7 (**permalink**) 02/11/2012, 06:28

Muchas gracias, ya me funciona perfectamente. Soy nuevo en estas lindes y me pierdo un montón! xDDD de nuev muchas Gracias.