Banners para publicidad con efecto spotlight y tooltip incluido

La publicidad es tambien algo importante para nuestro blog, por lo tanto tambien debemos cuidar su aspecto como cualquier otro elemento de nuestra pagina. Por eso mismo os traigo este diseño pensado para los tipicos banners de 125x125 que ponemos en la sidebar o columna lateral. Con un poco de CSS y otro poco de jQuery, se consigue un efecto 'spotlight' (o foco, en castellano) al pasar el cursor por uno de los banners. Esto quiere decir, como podeis ver en el ejemplo de abajo, que al pasar el raton por una de las imagenes, esta es la que se ve principalmente, mientras que las demas se ven casi transparentes con una opacidad muy baja. Ademas, aparece un 'tooltip' (texto informativo) que indica el tamaño de la imagen, en este caso como ya he dicho, de 125x125.

Si quieres añadir este widget a tu blog, copia y pega el siguiente codigo en un gadget HTML. Lo que esta en color azul lo cambias por la direccion URL que desees, como por ejemplo tu pagina de contacto. En color rojo estan las URLS de los banners, en este caso estan las que he puesto en la demo, sustituyelas por las de las imagenes que quieras poner para los anunciantes. Si quieres añadir mas de 4 banners, agrega la linea <a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125"  target="_blank"><img src="http://1.bp.blogspot.com/-F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a> a continuacion de las otras, tantas veces como quieras.
ver codigo<div id="banner">
<a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125"  target="_blank"><img src="http://1.bp.blogspot.com/-F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a>
<a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125"  target="_blank"><img src="http://1.bp.blogspot.com/-F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a>
<a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125"  target="_blank"><img src="http://1.bp.blogspot.com/-F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a>
<a class="anuncio" href="TU ENLACE" title="Anunciate aqui Tamaño 125 x 125"  target="_blank"><img src="http://1.bp.blogspot.com/-F7v0oVCWDpg/UvJzftKr3iI/AAAAAAAALpQ/7QGHXSCu_hA/s1600/anunciateaqui.png"/></a>
</div>
<style>
div#banner a { text-decoration:none; color:#fff; text-align:center;padding:3px;}
div#banner { width:262px; margin:0 auto; }
#banner .anuncio { display:block; width:125px;height:125px;float:left; position:relative;}
#banner .anuncio img{ display:block;width:125px;height:125px;}
#banner .anuncio .textoinfo { position:absolute; top:90px;left:8px;font:bold 10px arial; width:110px; display:none; background:#000;border-radius:5px;color:#cdcdcd !important;padding:2px;}
.effect { box-shadow: 0 0 10px #cdcdcd;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'/>
<script type="text/javascript"> $(document).ready(function () { $('#banner .anuncio').each(function () { title = $(this).attr('title'); $(this).append('<span class="textoinfo">' + title + '</span>'); $(this).attr('title',''); }); $('#banner .anuncio').hover( function () { $(this).siblings().css({'opacity': '0.1'}); $(this).css({'opacity': '1.0'}).addClass('effect'); $(this).children('.textoinfo').show(); }, function () { $(this).children('.textoinfo').hide(); } ); $('#banner').mouseleave(function () { $(this).children().fadeTo('100', '1.0').removeClass('effect'); }); }); </script>