Avatar Image
Machacateclados
Machacateclados

Hola a todos :3! vengo a enseñaros un menú que estamos utilizando ahora mismo en el sakurai, y que hicimos entre uno de mis users y yo, intentando crear algo bonito que vimos, aunque al final terminó quedando distinto xD

Spoiler:

Como veis, este menú actúa cuando pasas por encima de él, dejando todo en blanco y negro menos la zona en la que estas situado.  No es que sea especialmente útil, pero queda bastante bien y hace que el menú importante resalte mas que el resto. A continuación explicaré paso a paso como se lleva a cabo:

1. Lo primero que debéis hacer es crear las imágenes que queráis, del tamaño que queráis, pero recordar que necesitaremos dos imágenes de cada, una en blanco y negro y la otra a color para después añadirlas al código.

Ejemplo:

Spoiler:

2. Una vez ya tenemos todas las imágenes terminadas y preparadas para la acción (xD) Es hora de crear el código, en general pueden ponerlo donde mas lo necesiten, en mi caso yo lo coloqué en un espació HTML  de los que se usan para los menús laterales del portal y similar (como pueden ver arriba) eso ya depende de cada persona.

Lo primero que tenemos que insertar, la primera parte de todo es esto: (no hay que modificar nada)

Cita:

<script type="text/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[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

}

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_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>

3. Lo siguiente ya es por fin crear el menú con las imágenes, y para llevarlo a cabo pondremos estos codigos a continuación de los anteriores:

Cita:

<a href="LINK DEL DESTINO"><img src="LINK DE LA IMAGEN EN BLANCOyNEGRO" width="180" height="38" border="0" id="Image1" onmouseover="MM_swapImage('Image1','','LINK DE IMAGEN A COLOR',1)" onmouseout="MM_swapImgRestore()" /></a><br />

Deben hacer una cosa muy importante: ven estas dos partes? id="Image1" ('Image1' ? En cada parte del menú deben asegurarse de poner el mismo numero, por ejemplo, la primera imagen se llamará Image1 para que el código funcione y cambie de color.

Les pongo un ejemplo por si me a quedado algo lioso:

Cita:

<a href="http://instituto-sakurai.mforos.com/1797998-periodico-del-instituto/" ><img src="http://img64.imageshack.us/img64/8365/periodicoblanconegro.jpg" width="180" height="38" border="0" id="Image1" onmouseover="MM_swapImage(\'Image1\',\'\',\'http://img187.imageshack.us/img 187/6467/periodicocolor.jpg\',1)" onmouseout="MM_swapImgRestore()" /></a><br />

<a href="http://instituto-sakurai.mforos.com/1671192/8385816-afiliate-normas/" ><img src="http://img18.imageshack.us/img18/9459/afiliablanconegro.jpg" width="180" height="38" border="0" id="Image2" onmouseover="MM_swapImage(\'Image2\',\'\',\'http://img64.imageshack.us/img6 4/8483/afiliacolor.jpg\',1)" onmouseout="MM_swapImgRestore()" /></a><br /></center>

Otra cosa que deben tener en cuenta es que pueden cambiar el tamaño de la imagen cuando gusten con este mismo codigo:

width="180" height="38"

Y bueno, aquí termina mi primer aporte de códigos HTML xD me ha quedado algo lioso, pero por algo se empieza! si tienen alguna duda solo preguntenme, y a la próxima intentaré explicarme mejor xDDDD saludos!

Avatar Image
Usuario habitual
Usuario habitual

gracias por el detalle

lo pruebo y te digo que tal

ATENCIÓN: Este tema no tiene actividad desde hace más de 6 MESES,
te recomendamos abrir un nuevo tema en lugar de responder al actual
Opciones:
Ir al subforo:
Permisos:
TU NO PUEDES Escribir nuevos temas
TU NO PUEDES Responder a los temas
TU NO PUEDES Editar tus propios mensajes
TU NO PUEDES Borrar tus propios mensajes
Temas similares
TemaUsuariosRespuestasVisitasActividad
Por: , el 21/Feb/2011, 13:03
PDiamond 100x100net pabli7052kMar/11