Estoy creando una plantilla al estilo cuevana (tooltip)

  • Autor Autor edwardmspc
  • Fecha de inicio Fecha de inicio
E

edwardmspc

Gamma
Hola chic@s de foro, una ves mas vengo por aquí a ver si me echan una manito.

Estoy tratando de agregar el tooltip al estilo cuevana alguno sabe como puedo hacer?

http://esblogger.com

PHP:
<div class="inside">
                   <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php woo_get_image('image','100','150'); ?> </a>                                         
<!-- <h4><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h4>-->
                </div>
 
¿En qué la estás creando? ¿en wordpress? ¿en joomla?
 
Wordpress, sep no se como implementar los tooltip, tienes idea?

Alguno tiene idea?
 
Wordpress no es diferente a otra web, los tooltip, efectos jquery, etc.. se aplican de la misma forma, la llamada al .js del script y su evento en html, no tienes mayor dificultad compañero.

Ejemplo:
Insertar CODE, HTML o PHP:
<script type="text/javascript">
var isloaded = new Array();
var loadedinfo = {};
var hidblob = false;
$(document).ready(function() {
$(".rowbox img").hover(function(e) {
	hidblob = false;
	var id = $(this).attr("id");
	$("#blob .blob").html("<div class='float_r'><div class='ratingblob float_l'><div class='ratingblob_in' style='width:"+loadedinfo[id].rat+"px'></div></div><div class='clearleft'></div></div><div class='tit'>"+loadedinfo[id].tit+"</div><div class='txt'>"+loadedinfo[id].txt+"</div>");
	var of = $(this).offset();
	var ex = 111;
	var wid = window.innerWidth;
	if (typeof( wid ) != 'number') wid = document.documentElement.clientWidth;
	if (e.pageX >= (wid/2)) {
		ex = -$("#blob").width()-1;
		$("#blob .blob").removeClass("bleft").addClass("bright");
		$(this).removeClass("ileft").addClass("iright");
	} else {
		$("#blob .blob").removeClass("bright").addClass("bleft");
		$(this).removeClass("iright").addClass("ileft");
	}
	$("#blob").show().css("left",of.left+ex).css("top",of.top);
}, function() {
	$(this).removeClass("iright").removeClass("ileft");
	$("#blob").hide();
});
});
</script>

Su evento:
Insertar CODE, HTML o PHP:
<a href="peliculas/4282/rise-of-the-planet-of-the-apes/">
				<div class="box">
				<div class="img"><img src="http://sc.cuevana.tv/box/4282.jpg" onmouseover="" id="p4282" border="0" width="110" height="147"></div>
				<div class="tit">El Planeta de l...</div>
				</div></a>

				<script type="text/javascript">
				loadedinfo["p4282"] = {rat: "57", tit: "El Planeta de los Simi... (2011)", txt: "<div>Precuela del ya mítico largometraje &quot;El planeta de los simios&quot;. Will Rodman (James Franco) es un joven científico que está investigando con monos para obtener un tratamiento contra el alzheimer, una enfermedad que afecta a su padre (John Lithgow). Uno de esos primates, al que llaman César (Andy Serk...</div><div class='sep'></div><div><b>Reparto:</b> James Franco, Andy Serkis, Freida P...<br /><b>Director:</b> Rupert Wyatt<br /><b>Género:</b> Ciencia Ficción<br /><b>Idioma:</b> Inglés<br /><b>Duración:</b> 110 min</div>"};
				</script>

Luego ya es todo CSS. 🙂

Saludos!
 
Atrás
Arriba