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: