Blog Reacción Estudio

¡Tu zona de aprendizaje!

ipicture

Tooltips en imágenes con iPicture

iPicture es un plugin de jQuery que sirve para poner Tooltips en imágenes. Con este plugin podemos configurar distintas animaciones, podemos agregar todos los tooltips que queramos sobre una imagen, cambiar de color los botones de los tooltips, podemos cambiar la fuente, etc.

Su uso es realmente sencillo, vamos a ver paso a paso la demo que trae iPicture en su index.hmtl:

HTML

<ul id="iPicture">
  <li id="picture1" style="background: url('images/image1.jpg')"></li>
  <li id="picture2" style="background: url('images/image2.jpg')"></li>
  <li id="picture3" style="background: url('images/image3.jpg')"></li>
  <li id="picture4" style="background: url('images/image4.jpg')"></li>
</ul>

Insertamos 4 imágenes en nuestro HTML. Las imágenes debemos ponerlas como fondo de la lista.

CSS

  #picture1, #picture2, #picture3, #picture4{
	 width: 900px;	  //images width
	 height: 528px;	 //images height
	 position: relative;
	 margin:0 auto;
  }

Definimos el ancho y alto de las listas que contienen las imágenes de fondo.

jQuery

  jQuery(document).ready(function(){
	$( "#iPicture" ).iPicture({
	  animation: true,
	  pictures: ["picture1","picture2","picture3"],
	  moreInfos:{
		"picture1":[
		  {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
		  {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
		  {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
		  {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}]}
	});
  });

En “pictures” definimos los “IDs” de la imagen o imágenes que van a tener los tooltips.

En “moreInfos” es donde declaramos los Tooltips de cada imagen. En este código solo se definen los Tooltips de la primera imagen (picture1). Cada línea es un tooltip, primero se define el id del tooltip, luego el contenido del tooltip, después definimos su posición en la imagen con el “top” y el “left”.

Si por ejemplo queremos definir los tooltips de 2 imágenes, sería así de fácil:

jQuery(document).ready(function(){
	$( "#iPicture" ).iPicture({
	  animation: true,
	  pictures: ["picture1","picture2","picture3"],
	  moreInfos:{
		"picture1":[
		  {"id":"picture1-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
		  {"id":"picture1-more3","descr":"exclusive wheel design","top":"459px","left":"248px"},
		  {"id":"picture1-more6","descr":"special exterior design","top":"196px","left":"187px"},
		  {"id":"picture1-more7","descr":"better drag coefficient","top":"46px","left":"545px"}]}
                 "picture2":[
		  {"id":"picture2-more1","descr":"led for better lighting ","top":"307px","left":"367px"},
		  {"id":"picture2-more2","descr":"exclusive wheel design","top":"459px","left":"248px"},
		  {"id":"picture2-more3","descr":"special exterior design","top":"196px","left":"187px"},
		  {"id":"picture2-more4","descr":"better drag coefficient","top":"46px","left":"545px"}]}
	});
  });

Podeis ver varios ejemplos y descargar el plugin en los siguientes enlaces:

Ver ejemplo

Página oficial

Descargar

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR