Kawaii Menu Tab

Hola chicas desde hace un buen que me pidieron este tuto x.x que se trata de poner un menu como el mio que al pasar el cursor sale una imagen ^^ gOmeneee por la tardanza..!!

Empezemos :

Primero identifica donde vas a poner tu menu tab de preferencia se recomiendo ponerlo bajo el header asi como lo muestro..!!

Para ver las imagenes en tamanio grande da clic sobre ellas ^^!!

Copia el siguiente codigo y pegalo en un gadget HTML/Javascript

<div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
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><div class='clear'></div>
<div class='widget html' id='html1'>
<div class='widget-content'>
<script type="text/javascript">
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>

Justo abajo del codigo anterior pega estos codigos:

<a href="URL DE TU BLOG" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Home','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/inicio2-1.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/icicio3-1.png" alt="v" name="Annyz Kawaii Home" width="110" height="80" border="0" /></a>

<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii tutorial','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/tuto3.png&#039;,1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/tuto4.png" alt="Annyz Kawaii tutorial" name="Annyz Kawaii tutorial" width="110" height="80" border="0" /></a>

<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Premios','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/premio3.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/premios4.png" alt="Annyz Kawaii Premios" name="Annyz Kawaii Premios" width="110" height="80" border="0" />

</a><a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Afiliados','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/afi5.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/afi4.png" alt="Annyz Kawaii Afiliados" name="Annyz Kawaii Afiliados" width="110" height="80" border="0" /></a>

<a href="URL DE LA PAGINA DE TU CATEGORIA O ENTRADA" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Annyz Kawaii Afiliame','','http://i1120.photobucket.com/albums/l497/annyz_kawaii/Afiliame4.png',1)"><img src="http://i1120.photobucket.com/albums/l497/annyz_kawaii/afiliame3.png" alt="Annyz Kawaii Afiliame" name="Annyz Kawaii Afiliame" width="110" height="80" border="0" /></a></div></div>

Listo tendras un menu tan bonito como el mio :) kawaiii no??

Notita: puedes ponerle mas categorias si gustas solo copia y pega uno de los codigos y listo =)!

Ahora una explicacion para quien quiera personalizar a su gusto el menu.. ya sea con diferente letra e imagenes. Como ven subraye con diferentes colores algunas lineas

En lo Verde pues ahi va la direccion o url de la entrada o categoria..!!

En el Lila ahi remplaza por tu nombre y el nombre de la categoria..!!

En lo rosita va la url de las imagenes... el menu se forma de 2 letreros una en la que va la imagen y la otra en la que va solo el letrero.. asi se da el efecto de que aparece y desaparece la imagen al pasar el cursor ^^ ( pasa el cursor sobre mi menu arriba para que te des la idea )

ejemplo:

Yo lo puse con 2 colores pero ustedes pueden hacerlo con uno solo para que no sea tanta la complicacion :)!!

Un letrerito con imagen

Un letrerito sin imagen

Yo recomiendo hacer los letreritos con photoshop y fondo trasparente.!!

Chicas he decidido reabrir lOs comentarios ^^

fuente: wanhazel