JMiur [E]

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;
}

12 comentarios:

*D@S  

Saludos desde http://daslive.blogspot.com/

Responder
Aymará  

Hola JMiur!!! me contó un pajarito (desde el escaparate de Rosa) que tu blog cumple años hoy. Felicitaciones!!!
Siempre me doy una vuelta por estos lados porque hay cosas nuevas para probar...
Gracias por todo tu trabajo y tu buena predisposición.
Saludos desde Mendoza!!

Responder
Stellaluna  

Hmm, luego voy a probarlo para ver si funciona....para mí....

Por cierto, hacerca de los followerz: Blogger cree que los hispanos somos tontos :P
Pues cambié el idioma del blog a inglés y adivina que.... FUNCIONA
Pero...si lo vuelvo a cambiar a espanñol...
"The Followers widget is not yet available in this language so it will not appear on your blog until you switch back to English."

Prefiero dejarlo en ingles :P

Responder
JMiur  

Gracias, Aymará. A decir verdad fue hace unos dias pero la fiesta continua :D
Por cierto, también le agradezco a Rosa el mensaje en su Twitter :D

Stellaluna: No se me había ocurrido semejante cosa XD
En realidad, no me extraña porque somos el último orejón del tarro :(

Responder
LacraX  

J.Miur quiero un SuperTuto de JavaScript! , haz uno y me conformo , ¡Que sea tan bueno como el de HTML!

Responder
JIM UTFSM  

Bueno, si fuera en tiempo de ejecución sería como facebook, aunque hay que hacer mucho más.. no creo que se puede en blogger, debido al poco acceso a los datos y clases críticas.

BTW, bastante bueno tu blog, lo llevo leyendo hace unos días... creo que te dejaré unas correcciones menores que he encontrado en algunos posts...

Saludos desde Chile

Responder
GeR0  

Hola! tengo una duda (tipico): ¿Qué programa me recomendarias para pasar archivos en ppt a video? Y que además no me dejeuna marca de agua o algun logo. Gracias!

Responder
JMiur  

No sabría decirte de ninguno.

Responder
Anónimo  

Esta muy interesante este tema me puedes ayudar a guardar esto en una base de datos para que lo que marque se guarde cuando refresque la pagina, de antemano te agradezco

Responder
Anónimo  

Estimado JMiur me podrias ayudar a guardar los comentarios de las fotos a una base de datos :( te estare muy agradecido.

Responder
JMiur  

Eso es algo que sólo podría hacerse con PHP y es algo que me excede :)

Responder
Anónimo  

Bueno muchas gracias investigare para hacerlo con PHP, esta excelente tu sitio web! :)

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR