[cisco007]

[bbcodet]Titulo:[/bbcodet] jquery imagen con tooltip
[bbcodet]Descripción:[/bbcodet] usando jquery se puede poner una imagen en tus mensajes con un pequeño tooltip al poner el raton sobre la imagen
[bbcodet]Autor(es)/or Enlace:[/bbcodet] cisco007 codigo de aqui: jquery_tooltip
Pedido?:
no
[bbcodet]Notas:[/bbcodet]
a mi me gusta poner en enlace de el jquery dentro de el reemplazo de html para no poner muchos jqueries en el header, pero si a ustedes no les importa, pues pongan esta linea:

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}js/jquery.tools.min.js"></script>

antes de esto en su styles/tuestilo/template/overall_header.html

Code: Select all

</head>

[i_i][bbcodet]Uso BBcode:[/bbcodet]

Code: Select all

[img_tooltip={URL}]{SIMPLETEXT}[/img_tooltip]

[/i_i]
[i_i][bbcodet]Reemplazo HTML:[/bbcodet]

Code: Select all

<script type="text/javascript" src="{ROOT_PATH}js/jquery.tools.min.js"></script>
<style type="text/css">
 /*<![CDATA[*/
/* tooltip styling. by default the element to be styled is .tooltip  */
.tooltip {
	display:none;
	background:transparent url("images/bbcodes/black_arrow.png");
	font-size:12px;
	height:70px;
	width:160px;
	padding:25px;
	color:#fff;
}

/* style the trigger elements */
#demo img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}
 /*]]>*/
</style>
<div id="demo">
<img src="{URL}" style="width: 50%;height:50%;" title="{SIMPLETEXT}"/>
</div>
<script language="JavaScript" type="text/javascript">
$("#demo img[title]").tooltip();
</script>

[/i_i]
[i_i][bbcodet]Línea de ayuda:[/bbcodet]

Code: Select all

[img_tooltip=enlace de imagen]texto[/img_tooltip]

[/i_i]
[i_i][bbcodet]Ejemplo:[/bbcodet]

Code: Select all

[img_tooltip=http://www.image-restore.co.uk/blog/wp-content/staris2_instone_small.jpg]just a test[/img_tooltip]

[/i_i]
[bbcodet]DEMO:[/bbcodet]
[img_tooltip=http://www.image-restore.co.uk/blog/wp- ... _small.jpg]solo un test para ver como funciona esto[/img_tooltip]

[bbcodet]Descarga[/bbcodet]

[cisco007]

[cisco_note]Reservado para autor![/cisco_note]