Cómo aplicar efectos a tus textos con JQuery

Una forma de aplicar efectos a los textos de tu theme, cuando pasas el ratón por encima de ellos, es utilizando imágenes y Javascript. Hoy aprenderemos a hacerlo sin imágenes y con la librería JQuery.

jQuery es una biblioteca de JavaScript, de código abierto, con la que se puede interactuar con los documentos HTML. Con ella, crearás animaciones y cualquier tipo de efecto, de forma muy simple, además de poder interactuar con las páginas web, utilizando AJAX.

Lo que te proponemos hoy, como introducción a la herramienta JQuery, es aplicar un efecto más elegante al texto que se visualiza por defecto cuando se pasa el ratón por encima de él y que se ha codificado con el parámetro “title” en el HTML. Lo puedes ver en la imagen siguiente, bajo el icono de Twitter.

Lo único que necesitas hacer es definir el uso de JQuery y descargar e instalar el script TipTip. Para ello, sigue las siguientes pasos.

1. Carga la librería JQuery, en el archivo header.php de tu theme activo, antes de la etiqueta </header>:

<?php wp_enqueue_script(“jquery”); ?>
<?php wp_head(); ?>

2. Ve al sitio Drew Wilson Code, descarga el archivo comprimido tipTipv13.zip, descomprímelo y sube a la carpeta “js” de tu theme activo, los ficheros con extensión “.js”. El contenido del fichero tipTip.css pégalo al final de la hoja de estilo CSS del theme (style.css).

3. Debajo de <?php wp_head(); ?>, en el archivo header.php, añade las siguiente líneas:

<script src=”<?php bloginfo(‘template_directory’); ?>/js/jquery.tipTip.js” type=”text/javascript”></script>
<script type=”text/javascript”>
jQuery(function(){
jQuery(“.tooltip”).tipTip();
});
</script>

4. Y para que todo funcione, solo queda que añadas lo siguiente, después del atributo title, dentro de la sentencia “href” de tus enlaces.

class=”tooltip”

Por ejemplo:

<a href=”http://www.blogpocket.com” title=”La locura de los weblogs dentro de uno” class=”tooltip”>Blogpocket</a>

Vía | Web Resources Depot

Imprimir

Esta entrada fue escrita el Martes, 20 de septiembre de 2011 a las 9:00 y archivada en Blog, Infomática. Puedes seguir cualquier respuesta a esta entrada a través del feed RSS 2.0. Puedes dejar una respuesta, o trackback desde tu propio sitio web.