Imagen Mouse Over
Hola, bueno me preguntaba si alguien podría pasarme el código o algún ejemplo de que cuando pasas el mouse por encima de una imagen, cambie... Por ejemplo la del centro, suponiendo que tengo un menú, y una imagen en el centro, entonces al pasar el mouse sobre un elemento del menú, la imagen que cambia sería la del centro... Gracias, espero haberme explicado, saludos...
1 Respuesta
Respuesta de mcalons
1
Esta pregunta ya la resolví recientemente con capas, con <div> lo que te permitirá mover las imágenes a la posición que deses. Ah! Ten cuidado si utilizas el Dreamweaver que según que realices modifica el código, ... bueno, frontape también lo hace aunque no para este caso.
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.
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.
