Complemento de este hoover

dennyboy · #1 (**permalink**) 24/11/2009, 18:02

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>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic1','image3')" onMouseout="change1('pic1','image_off')"><img src="images/3.jpg" border="0" /></A>
&nbsp;&nbsp;
<A HREF="url" onMouseover="change1('pic1','image4')" onMouseout="change1('pic1','image_off')"><img src="images/4.jpg" border="0" /></A>
&nbsp;&nbsp;
<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>

eseceve · #2 (**permalink**) 24/11/2009, 19:50

No es necesario que uses Javascript, es más, te recomendaría CSS, ya que si la persona tiene bloqueados los script no verá tu sitio como corresponde.
Para hacerlo con usa lo siguiente

HTML
-------
<a HREF="url" id="uno">algo</a>
<a HREF="url" id="dos">algo2</a>

CSS
#uno { background: url("imagenA.png"); }
#dos { background: url("imagenB.png"); }

#uno:hover { background: url("imagenAH.png"); }
#dos:hover { background: url("imagenBH.png"); }

dennyboy · #3 (**permalink**) 25/11/2009, 12:42

Ok, no se ni papa de CSS recien comeinzo en esto, pero lo voy a intentar, gracias por responder :D