Rollover
Hola:
Me gustaria saber como puedo hacer un rollover para que me cambie no la imagen donde se pone el ratón sino otra que está en otro lugar de la página.
Intento hacer un menú que cuando se pasa el mouse por una de las opciones se me ponga una imagen en otra parte de la pantalla.
Gracias por tu ayuda y un saludo.
Me gustaria saber como puedo hacer un rollover para que me cambie no la imagen donde se pone el ratón sino otra que está en otro lugar de la página.
Intento hacer un menú que cuando se pasa el mouse por una de las opciones se me ponga una imagen en otra parte de la pantalla.
Gracias por tu ayuda y un saludo.
1 respuesta
Respuesta
1
Es bastante sencillo, todo dependo de cómo hagas tú el rollover, mediante una función o directamente escribes el script en la imagen. Básicamente lo que debes cambiar es el atributo name de la imagen que efectúa el evento.
Si me mandas código, le echo un vistazo.
De todas formas te mando un ejemplo: las imágenes se llaman ic1.gif, ic2.gif, ic3.gif
Al pasar por ic1, se cambia ic2 por ic3.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('ic_notic.gif')">
<a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img2','','ic3.gif',1)">
<img src="ic1.gif" name="img1" border="0">
</a>
<img src="ic2.gif" width="20" height="20" name="img2">
</body>
</html>
Si me mandas código, le echo un vistazo.
De todas formas te mando un ejemplo: las imágenes se llaman ic1.gif, ic2.gif, ic3.gif
Al pasar por ic1, se cambia ic2 por ic3.
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('ic_notic.gif')">
<a href="javascript:;" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('img2','','ic3.gif',1)">
<img src="ic1.gif" name="img1" border="0">
</a>
<img src="ic2.gif" width="20" height="20" name="img2">
</body>
</html>