Agregando tooltips en las imágenes

TipImage es un script que permite agregar notas (tooltips) en una imagen cualquiera a la manera en que lo hace Flickr.

Una nota es un rectángulo dentro de la imagen que sólo es visible cuando colocamos el cursor del mouse dentro del objeto y que contiene un texto cualquiera.

La particularidad de este script es que puede trabajar en dos modos; en modo normal, simplemente se muestran y en modo edición pueden modificarse y agregarse aunque claro, para que esos cambios sean permanentes se requiere disponer de un servicio adecuado. En Blogger esos cambios sólo serán temporales ya que no podemos modificar la base de dato que contiene los posts pero, en otros servicios como WordPress podría llegar a implementarse alguna función extra que los preserve. Sea como sea, su utilidad no es mucha pero es una curiosidad y bastante sencilla de implementar (algo para jugar un rato).

Lo que necesitamos es descargar el script y alojarlo en un servidor propio. Luego; lo insertamos en la plantilla antes de </head>:

<script type="text/javascript" src="URL_Tipmage-1.0.js"></script>

Como no es posible aplicarla sobre dos imágenes diferentes en una misma página, también podíramos colocar el script directamente en un post utilizando la misma sintaxis.

La forma en que se verán esas notas se determina con CSS y para eso hay un ejemplo de hoja de estilo que puede descargarse y aplicarse directamente . Con ese archivo podemos hacer varias cosas; lo alojamos en un servidor y lo agregamos a la plantilla:

<link rel="stylesheet" type="text/css" href="URL_Tipmage-1.0.css" />

O en el post con:

<style type="text/css">@import url("URL_Tipmage-1.0.css");</style>

Y si no, copiamos su contenido y lo pegamos en la plantilla o en el post entre etiquetas style:

<style type="text/css">
  [ ... aquí pegamos el contenido ... ]
</style>

Para usar el script, sólo necesitamos una imagen y que esta tenga un id (un nombre único).

Para definir las notas a mostrar, debajo de la imagen colocamos el script con los parámetros. En el ejemplo sería algo así:

<img src="URL_imagen" id="mainImage"/>

<script type="text/javascript">
  var tipmage = new Tipmage('mainImage',true);
  tipmage.startup();
  tipmage.setTooltip(250,15,120,80,'El sombrero de la señora');
  tipmage.setTooltip(240,210,100,100,'Esta es una nota<br/>con <b>HTML</b>');
  tipmage.setTooltip(10,200,120,70,'Y esto, claro, esto es un pie');
</script>

La sintaxis para cada tooltip a agregar es sencilla:

tipmage.setTooltip(posicionX,posicionY,ancho,alto,'el texto');

posicionX y posicionY son las coordenadas donde comienza la nota (donde 0 y 0 son la esquina superior izquierda de la imagen)
ancho y alto definen el tamaño de la nota (en pixeles)
el texto es lo que veremos y puede tener algunas etiquetas HTML

/* el rectángulo que se ve al hacer colocar el cursor en la imagen */
.tmRect {
  border: 1px solid #000000;
}
.tmRectContrast {
 border: 1px solid #999999;
}

/* el rectángulo seleccionado */
.tmRectSelected {
 border: 1px solid #FF9933;
}
.tmRectContrastSelected {
 border: 1px solid #FFFFFF;
}

/* el bloque de la nota visible */
.tmTooltip {
  background-color: #225599;
  border: 2px groove #2277FF;
  padding: 0 10px;
}

/* el texto de la nota */
.tmText {
  color: #FFFFFF;
  font-family: Tahoma;
  font-size: 11px;
  text-align: center;
}

/* el bloque cuando se edita la nota */
.tmRectMod {
  border: 1px dashed #000000;
}
.tmRectContrastMod {
  border: none;
}
.tmCorner {
  background-color: #BBBBBB;
  border: 1px solid #000000;
}

/* la ventanita donde se editan las notas */
.tmForm {
  background-color: #445566;
  margin: 0;
  padding: 0;
}

/* el área de textos para edición */
.tmTextArea {
  border: 3px solid #445566;
  font-size: 11px;
  height: 50px;
  margin: 0;
  padding: 5px;
  width: 204px;
}

/* los botones de edición */
.tmButton {
  font-size: 11px;
  margin: 2px;
}