Que tal, tengo un menucito en el que quiero reemplazar una imagen al pasar el mouse sobre los botones
ghost menu
Hasta ahi va bien la cosa, pero quisiera que al pasar el mouse por el botón este tambien cambiara, por ejemplo el CINCO, cambiara su estado por el botón 5o.jpg (que puse abajo solo para ilustrar el estado del botón)
Es posible agregar una segunda funcion OnMouseOver? o de plano habría que cambiar todo?
Mi documento va asi, cualquier ayuda es apreciada.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<!-- Start hoover image scriopt
-->
<SCRIPT language="JavaScript">
<!--
if (document.images)
{
image_off= new Image(450,338);
image_off.src="images/uno.jpg";
image2= new Image(100,100);
image2.src="images/dos.jpg";
image3= new Image(100,100);
image3.src="images/tres.jpg";
image4= new Image(100,100);
image4.src="images/cuatro.jpg";
image5= new Image(100,100);
image5.src="images/cinco.jpg";
}
function change1(picName,imgName)
{
if (document.images)
{
imgOn=eval(imgName + ".src");
document[picName].src= imgOn;
}
}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
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[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].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[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</SCRIPT>
<!-- Finish hoover script
-->
</head>
<body onload="MM_preloadImages('images/1o.jpg')">
<P>
<A HREF="url" onMouseover="change1('pic1','image2')" onMouseout="change1('pic1','image_off')"><img src="images/2.jpg" border="0" /></A>
<A HREF="url" onMouseover="change1('pic1','image3')" onMouseout="change1('pic1','image_off')"><img src="images/3.jpg" border="0" /></A>
<A HREF="url" onMouseover="change1('pic1','image4')" onMouseout="change1('pic1','image_off')"><img src="images/4.jpg" border="0" /></A>
<A HREF="url" onMouseover="change1('pic1','image5')" onMouseout="change1('pic1','image_off')"><img src="images/5.jpg" border="0" /></A>
<P>
<IMG SRC="images/uno.jpg" name="pic1" width="450" height="338" border="0">
<P><img src="images/5o.jpg" width="161" height="43" />
</body>
</html>