Ayuda con este efecto que quiero poner en mi blog!!

chukislukis · #1 (**permalink**) 28/05/2010, 00:58

Hola primero voy a presentarme me llamo mario pero mi apodo es chukislukis eso no dare explicación bueno lo que viene.

Mi problema es que en esta pagina tiene un efecto que me gustaria tener en mi blog, ya hable con el webmaster del sitio y me respondio que el no lo hizo si no un diseñador web pero el caso que ya vi este efecto en otro blog pero nada relacionado con el diseñador.

Asi que me gustaria saber que lenguaje usa si es ajax o jquery (No se nada de programación web) pero me gustaria aprender pero por el momento no.

Enlace de la pagina (No estoy haciendo Spam)httvbnp:v5b4n/bf/www.codigogeek.com/

Bueno espero la paciencia y la ayuda que pido.

Si el tema no esta en el foro adecuado por favor haganmelo saber porque puedo perderme Gracias.

jumpeer · #2 (**permalink**) 28/05/2010, 03:49

En primer lugar jquery es un framework (marco de desarroyo) de javascript y ajax, es decir, provee métodos y funciones para simplificar su programación. Probablemente sea un efecto con ajax y probablemente esté hecho con jquery. El efecto consiste en modificar los tooltips. Con estos datos deberías poder encontrar el efecto o al menos uno similar. Busca "tooltip jquery" o similar y acabarás encontrándolo.

Aunque no sepas programación añadir un efecto así es muy sencillo si encuentras el efecto programado en jquery pues será poco más que copiar y pegar el código.

chukislukis · #3 (**permalink**) 28/05/2010, 09:36

Jumpeer gracias por el comentario lo buscare en google si lo encuentro lo publicare, si no mmm seguire como una ladilla fastidiando xD.

chukislukis · #4 (**permalink**) 28/05/2010, 16:06

Hola de nuevo bueno consegui lo que queria :P primero lo que hice es descargar estos scripts
cssglobe.com/lab/tooltip/tooltip.zip

Luego Seleccionamos los archivos .js y colocarlos ennustro servidor FTP en una carpeta espeficica de nuestro theme y poner esas lineas dentro de las etiquetas <head></head>

Código PHP:

Ver original<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/jquery.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/js/main.js"></script>

Luego nos vamos a nuestra hoja de estilo css y ponemos esto (El efecto que les dare es el mismo que mostre en la imagen con la ayuda de Firebug xD)

Código CSS:

Ver original-moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    background: #000;
    color: #FFF;
    display: none;
    font-size: 11px;
    max-width: 280px;
    opacity: .70;
    padding: 3px 5px;
    position: absolute;
 }

Al principio el efeco solo era para firefox pero le puse la linea webkit para que funcionara sin problemas con safari y chrome.

Ahora para hacerlo funcionar hacemos esto.

Código HTML:

Ver original<a href="http://paginaweb.com" class="tooltip" title="Visitar Forosdelweb">Demo tooltip simple </a>

bueno esto es todo la informacion la saque en.

xyberneticos.com/index.php/2008/05/09/generar-vistas-previas-y-tooltip-con-jquery

Tema Solucionado