Páginas

martes, 17 de julio de 2012

Botones laterales que cambian al pasar el ratón por encima

Con este código podrás poner una imagen al lateral de tu tumblr que al clickarla te redireccione a una pagina y al pasar el ratón por encima salga una segunda imagen que has elegido.


Botón a la izquierda
Código:
<a href="URL_de_la_pagina_al_clickarla"><img src="URL_IMAGEN_1" onmouseover="this.src='URL_IMAGEN_2';" onmouseout="this.src='URL_IMAGEN_1';" style="position: fixed; top: 40%; left: 0;"/></a>

Botones a la derecha
Código:
<a href="URL_de_la_pagina_al_clickarla"><img src="URL_IMAGEN_1" onmouseover="this.src='URL_IMAGEN_2';" onmouseout="this.src='URL_IMAGEN_1';" style="position: fixed; top: 32%; right: 0;"/></a>


URL_de_la_pagina_al_clickarla: La página que se abrirá al pulsar el botón.
URL_IMAGEN_1: La URL de la imagen que se muestra cuando NO se pone el ratón por encima.
URL_IMAGEN_2: La URL de la imagen que se muestra cuando se pone el ratón por encima.

Para elegir donde poner el botón solamente edita el % que esta después de position: fixed; top:



EJEMPLOS:
Creador de memes:


<a href="http://lostumblrykenny.tumblr.com/creador%20de%20memes"><img src="http://i.imgur.com/lueJ2.png" onmouseover="this.src='http://i.imgur.com/DD47I.png?1?8344';" onmouseout="this.src='http://i.imgur.com/lueJ2.png';" style="position: fixed; top: 15%; left: 0;"/></a>



Blogger:

<a href="http://codigoshtmlparatumblr.blogspot.com.es/"><img src="http://www.soloelectronica.net/AYUDA_128.png" onmouseover="this.src='http://desmond.imageshack.us/Himg215/scaled.php?server=215&filename=bloggerqz.png&res=crop';" onmouseout="this.src='http://www.soloelectronica.net/AYUDA_128.png';" style="position: fixed; top: 85%; left: 0;"/></a>


Twitter:

<a href="https://twitter.com/#!/Lostumblrykenny"><img src="http://i.imgur.com/if6vT.png?1?9494" onmouseover="this.src='http://www.mellamoadrian.com/wp-content/themes/mandigo/images/icons/twitter-sigueme.png';" onmouseout="this.src='http://i.imgur.com/if6vT.png?1?9494';" style="position: fixed; top: 30%; right: 0;"/></a>


Youtube: 

<a href="http://www.youtube.com/user/FunGamer013"><img src="http://alexisrh76.files.wordpress.com/2011/12/youtubelogo.png?w=64&h=64" onmouseover="this.src='http://www.miprimeracorde.com/images/youtube.png';" onmouseout="this.src='http://alexisrh76.files.wordpress.com/2011/12/youtubelogo.png?w=64&h=64';" style="position: fixed; top: 55%; right: 0;"/></a>

1 comentario: