Foros del Web - Ver Mensaje Individual

KarlanKas · #7 (**permalink**) 02/09/2005, 02:18

He modificado un poco tu página: los onmouseover y onmouseout los he puesto en las imágenes en vez de en los enlaces. También he añadido una pequeña función para que permanezca como decías.

Tiene una pequeña carga: la imagen "apagada" debe llamarse loquesea.gif y la imagen encendida ha de llamarse loquesea2.gif (es decir, que la imagen encendida se distingue de la apagada en el 2 de detrás).

Así logro evitar hacer lo que decía lantrax con los array y demás.

Sería así:

Código PHP:

  <HTML>

<HEAD>

<TITLE>arriba</TITLE>

<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">

<script language="JavaScript">

<!--

function MM_findObj(n, d) { //v4.0

  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 && document.getElementById) x=document.getElementById(n); return x;

}

 
function MM_showHideLayers() { //v3.0

  var i,p,v,obj,args=MM_showHideLayers.arguments;

  for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args[i]))!=null) { v=args[i+2];

    if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v='hide')?'hidden':v; }

    obj.visibility=v; }

}

 
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_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];}

}

 
var antiguo="*";

function marcar(esto){

if(antiguo!="*" && antiguo!=esto){

antiguo.src=antiguo.src.split("2.gif").join(".gif");

}

antiguo=esto;

 
}

//-->

</script>

<STYLE>

a:link  {

    color : #000000;

    text-decoration : none;

}

 
a:visited  {

    color : #000000;

    text-decoration : none;

}

 
a:active  {

    color : #000000;

    text-decoration : none;

}

 
a:hover  {

    color :#800000;

    text-decoration : none;

}

</STYLE>

</HEAD>

<BODY BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onLoad="MM_preloadImages('botones/laempresa2.gif','botones/nuestrosproductos2.gif')">

<P>

<table width=643 border=0 cellpadding=0 cellspacing=0>

  <tr> 

    <td colspan=11> <img src="Images/botons_01.jpg" width=643 height=1 alt=""></td>

  </tr>

  <tr> 

    <td> <img src="Images/botons_02.gif" width=1 height=18 alt=""></td>

    <td width="74" height="18"> 

      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">HOME</font></b></font></div>

    </td>

    <td> <img src="Images/botons_04.jpg" width=1 height=18 alt=""></td>

    <td width="112" height="18"><a href="la_empresa3.html"target="iframe"><img  onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" onMouseOver="if(antiguo!=this){MM_swapImage('La Empresa','','botones/laempresa2.gif',1)}"  onclick="marcar(this)" name="La Empresa" border="0" src="botones/laempresa.gif" width="112" height="18"></a></td>

    <td> <img src="Images/botons_06.jpg" width=1 height=18 alt=""></td>

    <td width="170" height="18"><a href="nuestros_productos2.html" target="iframe"><img onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" onMouseOver="if(antiguo!=this){MM_swapImage('Nuestros Productos','','botones/nuestrosproductos2.gif',1)}" onclick="marcar(this)" name="Nuestros Productos" border="0" src="botones/nuestrosproductos.gif" width="170" height="18"></a></td>

    <td> <img src="Images/botons_08.jpg" width=1 height=18 alt=""></td>

    <td width="152" height="18"> 

      <div align="CENTER"><font face="Arial" size="1"><b>FILOSOFIA GOURMET</b></font></div>

    </td>

    <td> <img src="Images/botons_10.jpg" width=1 height=18 alt=""></td>

    <td width="129" height="18"> 

      <div align="CENTER"><font face="Arial" size="1"><b><font color="#000000">CONTACTO 

        Y VENTA</font></b></font></div>

    </td>

    <td> <img src="Images/botons_12.jpg" width=1 height=18 alt=""></td>

  </tr>

  <tr> 

    <td colspan=11> <img src="Images/botons_13.jpg" width=643 height=1 alt=""></td>

  </tr>

</table><iframe name="iframe"></iframe>

</BODY>

</HTML>

La función nueva es:

Código PHP:

  var antiguo="*";

function marcar(esto){

if(antiguo!="*" && antiguo!=esto){

antiguo.src=antiguo.src.split("2.gif").join(".gif");

}

antiguo=esto;

 
}

y la forma de tratar los enlaces quedaría así:

Código PHP:

      <a 

        href="nuestros_productos2.html" 

        target="iframe">

        <img 

            onMouseOut="if(antiguo!=this){MM_swapImgRestore()}" 

            onMouseOver="if(antiguo!=this){MM_swapImage('Nuestros Productos','','botones/nuestrosproductos2.gif',1)}" 

            onclick="marcar(this)" 

            name="Nuestros Productos" 

            border="0" 

            src="botones/nuestrosproductos.gif" 

            width="170" 

            height="18">

    </a>

Si tienes alguna duda pregunta!