Layers en MouseOver
Necesito solucionar una cuestión lo antes posible. Agradecería cualquier ayuda.
El caso es que quiero manejar layers para que aparezcan al hacer mouseover sobre una imagen o botón y desaparezcan al hacer mouseout.
He visto algunas cosillas pero me gustaría algo sencillo, ya que no tengo mucho tiempo.
Muchas gracias a todos!
El caso es que quiero manejar layers para que aparezcan al hacer mouseover sobre una imagen o botón y desaparezcan al hacer mouseout.
He visto algunas cosillas pero me gustaría algo sencillo, ya que no tengo mucho tiempo.
Muchas gracias a todos!
Respuesta de mcalons
1
Te adjunto este script que podrás incorporar a tus webs de forma fácil, hay una función ocultar y otra mostrar así como una función init que se carga onLoad y que distingue entre netscape e IExplorer, así que te funcionara en ambos buscadores. En el ejemplo pongo 2 objetos para que veas como añadir más objetos, block0 block1. Sobre Mostrar/Ocultar esta el mouseover/out y el resto al hacer click muestra u oculta uno u otro objeto.
Respecto a la imagen, recuerda variar el código hacia una imagen de tu disco
Aquí tienes el código, dentro del head pon
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block0 = document.blockDiv0
block1 = document.blockDiv1
if (ie4) block0 = blockDiv0.style
block1 = blockDiv1.style
}
// Show/Hide functions for pointer objects
function showObject(obj,num) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
Si no te funcionara el javascript ten cuidado con los espacios y tabulaciones que se crean según el editor de texto y pensaras que el script no funciona y puedo asegurarte que va perfectamente tanto en Netscape como IExplorer.
Dentro del body esto:
<BODY BGCOLOR="#FFFFFF" onLoad="init()">
<a href=# onmouseOver="hideObject(block0)"; onmouseOut="showObject(block0)">Mostrar/Ocultar</a>
<A HREF="javascript:showObject(block0)">show ROJO</A> - <A HREF="javascript:hideObject(block0) ">hide ROJO</A>
<p>
<A HREF="javascript:showObject(block1)">show AZUL</A> - <A HREF="javascript:hideObject(block1)">hide
AZUL</A>
<DIV ID="blockDiv0" STYLE="position:absolute; left:50px; top:100px;"><img src="images/paginas/apache_pb.gif">
</DIV>
<DIV ID="blockDiv1" STYLE="position:absolute; left:300px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:blue; layer-background-color:blue;">
</DIV>
</BODY>
Es un trabajo sencillo pero útil pues funciona sin excesivo código, si bien por ejemplo podrías hacer esto mismo con Dreamweaver fácilmente, también te generaría multitud de código ininteligible.
Respecto a la imagen, recuerda variar el código hacia una imagen de tu disco
Aquí tienes el código, dentro del head pon
<script language="JavaScript">
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
function init() {
if (ns4) block0 = document.blockDiv0
block1 = document.blockDiv1
if (ie4) block0 = blockDiv0.style
block1 = blockDiv1.style
}
// Show/Hide functions for pointer objects
function showObject(obj,num) {
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideObject(obj) {
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
//-->
</SCRIPT>
Si no te funcionara el javascript ten cuidado con los espacios y tabulaciones que se crean según el editor de texto y pensaras que el script no funciona y puedo asegurarte que va perfectamente tanto en Netscape como IExplorer.
Dentro del body esto:
<BODY BGCOLOR="#FFFFFF" onLoad="init()">
<a href=# onmouseOver="hideObject(block0)"; onmouseOut="showObject(block0)">Mostrar/Ocultar</a>
<A HREF="javascript:showObject(block0)">show ROJO</A> - <A HREF="javascript:hideObject(block0) ">hide ROJO</A>
<p>
<A HREF="javascript:showObject(block1)">show AZUL</A> - <A HREF="javascript:hideObject(block1)">hide
AZUL</A>
<DIV ID="blockDiv0" STYLE="position:absolute; left:50px; top:100px;"><img src="images/paginas/apache_pb.gif">
</DIV>
<DIV ID="blockDiv1" STYLE="position:absolute; left:300px; top:100px; width:30px; height:30px; clip:rect(0px 30px 30px 0px); background-color:blue; layer-background-color:blue;">
</DIV>
</BODY>
Es un trabajo sencillo pero útil pues funciona sin excesivo código, si bien por ejemplo podrías hacer esto mismo con Dreamweaver fácilmente, también te generaría multitud de código ininteligible.
