Menú Blanco-negro a color - Diseños y Skins foros

Machacateclados

#1•19/Dic/2009, 17:56•Editado por RikkuTenjou

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:

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:

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:

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!

Lost_717 Usuario habitual
#2•05/Ene/2010, 08:11 gracias por el detalle lo pruebo y te digo que tal

Anterior Siguiente Arriba

Responder

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

Inicio

Servicio Foros

Diseños y Skins foros

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

Tema	Usuarios	Respuestas	Visitas	Actividad
Temas similares
Cambiar ese color blanco Por: PDiamond, el 21/Feb/2011, 13:03		5	2k	Mar/11