en

Tipmage para colocar notas en tus fotografías

Tipmage para colocar notas en tus fotografíasSeguro que más de una vez has navegado por alguna web como la de Flickr y habrás visto en alguna ocasión como algunas fotografías incluyen pequeños Tips o Notas cada vez que pasamos el cursor en los recuadros de la imagen.

Aplicar dicho efecto a nuestras imágenes es ahora sencillo gracias a tpimage, un script que lleva tiempo rondando por la red y el cual nos permitirá añadir notas sobre las imágenes, cambiarlas de lugar, redimensionarlas o editar su descripción. Este efecto es compatilbe con los navegadores Internet Explorer 5.5+, Firefox 1.0+, Safari 2.0+ y Opera 7.6+

Como aplicarlo a tu blog / How to aply this to your blog

Lo primero de todo: necesitamos incluir el fichero «.js» y «.css» dentro de nuestro blog, para ello se puede incluir la siguiente línea tras la etiqueta < head >.

<script type="URL del fichero .js" src="Tipmage-1.0.js"></script> <link rel="stylesheet" type="text/css" href="URL del fichero .css" /> 

En el lugar donde vayamos a poner la imagen, tendremos que asingarle un ID unico, como por ejemplo «mainImage».

<img src="URL de la imagen" id="mainImage" />

Ahora necesitamos la instancia clase Tipmage: los parametros son los de la ID de la imagen que hemos asignado previamente y podremos indicar si los tooltips son editables (true) o no (false). En este momento podemos indicar algunos tooltips. Los parámetros de los tooltips son horizontal, vertical, anche y alto del rectángulo, así como del texto que se podrá apreciar. Todo ha de estar incluído dentro de las etiquetas < scrip >, tal y como el ejemplo de abajo.

<script type="text/javascript"> var tipmage = new Tipmage('mainImage',true); tipmage.startup(); tipmage.setTooltip(150,80,40,30,'http://www.verasoul.com<br>No, just kidding... ;)'); tipmage.setTooltip(200,185,50,20,'http://digitalhymn.com/argilla/tipmage/'); </script> 

Pruebalo aquí

Download Tpmage.js

Donwload Css

Informar

Comentarios

Deja una respuesta

      Como hacer una antena Wifi de 16Dbi

      Como hacer una antena Wifi de 16Dbi

      Insecto raro en Lituania

      Insecto raro en Lituania