lunes, 1 de noviembre de 2010

Cabecera o Header de Blogger con efecto hover

Buenas, este es mi primer blog, mi primera entrada y mi primer problema fue éste: quería una cabecera en la que se iluminaran las letras al pasar el puntero por encima. Encontré multitud de tutoriales para poner una imágen como cabecera pero ninguno para lograr el efecto deseado.

Sabiendo HTML y un poco de CSS esperaba no tener problemas hasta que vi el código de la plantilla, un poco diferente de lo que esperaba. Decidí probar primero en un archivo HTML suelto, teniendo las dos imágenes editadas a mi gusto era hora de empezar con el código. El primer intento no fue demasiado bien y en mi segundo intento decidí apostar sobre seguro y lo hice con JavaScript no lo domino demasiado pero suficiente para esto:

<html>
<head>
    <script>
header_imgsrc=new Array();
header_imgsrc[1]="imagen1.gif";
header_imgsrc[2]="imagen2.gif";

header_img =new Array();
for (i=0; i< header_imgsrc.length; i++) {
header_img[i]=new Image();
header_img[i].src=header_imgsrc[i];
}

function header_change(number, picture) {   {
document[picture].src=header_img[number].src;
   } }
</script>
</head>
<body>
   <header>
<div style="width:828px">
<a href='http://sisternes.blogspot.com/'
onmouseover="header_change('1','header_1')"
onmouseout="header_change('2','header_1')" name="header_1">
<img name="header_1" src="imagen1.gif">
</a>
</div>
</header>
</body>
</html>

Funciona perfectamente suelto pero a la hora de incrustarlo a la plantilla de Blogger no funciona, al menos como yo lo he probado. Otro "Fail!". Intento cambiar de estrategia y tras una busqueda llego aquí. Un pequeño pero excelente tutorial. Después de unir las dos imagenes en una, tal y como dice el tutorial, empiezo de nuevo con el code:

<html>
<head>
    <style type="text/css">
#nav{
width:828px;
}
#nav a{
text-indent:-9999px;
height:161px;
background:url('banner.gif') no-repeat;
display:block;
}
a#prova{
background-position:0 0;
width:828px;
}
a:hover#prova{
background-position:0 -161px;
}
</style>
</head>
<body>
<div id="nav">
<a id='prova'
href='http://sisternes.blogspot.com/' style='display: block'>
Algo
</a>
</div>

</body>
</html>

Funciona perfectamente y si, por fin al insertarlo en el template también funciona como podeis comprobar. Bueno espero que le sirva de ayuda a alguien, saludos y feliz halloween!

3 comentarios:

Lidia dijo...

Muy interesante,Gracias=)

Anónimo dijo...

necesitas 2 imagenes, yo prove el segundo codigo y no funciono, como le ago

rsister dijo...

Hola, el segundo código funciona perfectamente, es el que yo tengo. Debes tener una imágen en la que la mitad superior sea lo que quieres que se muestre cuando no tienes el ratón por encima, y la otra mitad lo que quieres que se muestre cuando se pasa el puntero. Debes ajustarlo con:
a:hover#xxx{
background-position:0 -161px;
}
Donde la segunda cifra debe ser la altura a la que se divide la imagen entre una y otra, espero haberme explicado, si no dimelo y te subo un ejemplo.
Un saludo!