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: