How to add advanced tooltips for people on your photo

January 17, 2008 00:02 by Taggify

This post demonstrates how you can use Taggify widget to enhance your blog with nice functionality showing popup tooltips for people on your photos.

Let's add notes for 2 well-known men on the photo below so people far from IT industry do not mix them up while reading our blog. Move mouse over the image and notes below it to see how it looks in live.

(Photo taken from All Things Digital blog)

Step 1: Install Taggify Widget  on Your Site

First of all you have to install Taggify widget on your blog. Just open Taggify Widget wizard, customize widget appearance and copy / past its code to the bottom of your site before the closing </BODY> tag.

Step 2: Add Taggify Editor bookmarklet to your Favorites

Now you may add Taggify Editor bookmarklet to your favorites for fast on-line editing of image notes. Just do right-click on This link and select "Add to Favorites" command from popup menu. The best practice is to add bookmarklet to browser's Links toolbar as on image below

Step 3: Authorize with Taggify Editor  

Before you start editing notes for images on your site you have to authorize. Launch Taggify Editor by click on stored bookmarklet and enter your login / password those you signed up with.

 

Step 4: Mark Out Persons on the Photo

Now we will designate our persons on the photo with bounding rectangles. For that click on photo at the top-left point of creating rectangle and holding mouse button drag rectange to having required size. Later you can always resize bounding rectangle by dragging it by handles.

Create bounding rectangle    Resize bounding rectangle

Step 5: Add Textual Notes for the Person

Now it's time to add textual notes for designated person. Straight away after you have created new bounding rectangle the widget shows editing form that you have to fill with your notes. There is only one obligatory field - the "Title", other fields are optional. You can use some HTML tags in the "Text" field - <I>, <A>, <B>, <U>, <FONT> and <IMG>. Also you can specify the url that visitor will be redirected to (in a new window) when click on the region. Let's add some brief information about these people from Wikipedia and make reference to the original articles.

 Editing image notes

Now the photo is associated with tooltips describing people on it so your visitors obtain additional information quickly without going to other places and leaving your site. 

 Tooltup with additional information

It's all - adding a notes describing objects on your photos takes a minute using Taggify widget ! We welcome your feedback - please feel free to comment functionality or problems you encountered . 

Taggify.net Team. 

Comments

Mike, January 24. 2008 14:46

I love this idea. I came across your site through Simply-Basic.

The only suggestion I have is if you change this website a bit. The logo is great, but I think if you redesign the site to make it look more web 2.0 like, this thing will gain some serious traction.

I could offer you a hand if you're interested.

Felipe, January 25. 2008 09:06

Nice idea and work, though the script is obstrusive and thus the solution isn't accessible (nothing happens without JS: links below image aren't generated and no hover) and you can't use it with keyboard alone too (tab key).
It could be done with map and area (with alt attribute) or http://www.alistapart.com/articles/cssmaps , depending on whether the information given is more or less important than the photo.
By defaut (JS desactivated), links on area would be normal links to different pages and with JS activated it would give the same effect shown above.

noupe.com, February 3. 2008 06:05

Pingback from noupe.com

Best of Ajax, Dhtml and Javascript- part1

David Jacques-Louis, February 22. 2008 07:21

Amazing, will install on my site for sure!

Robin, March 3. 2008 01:31

Hi, thanks for the good script.

I tried to apply to my site by installing the script and it works. Works GREAT! But somehow, earlier today i found out that the taggified picture was not tagged anymore. I tried to recheck by clicking on the bookmarklet, and the tag is still there. But it's not working. Any advise?

Thanks again.

Andreia Candido, March 14. 2008 10:43

Dear Gentlemen,

My name is Andréia and I am in Brazil. When you enter the site Taggify, my login and password function normally, but when I try to enter the login and password in Taggify Editor, it appears invalid. What should I do?

I look forward soon return.

Thank you,

Andréia

cacalinks.wordpress.com, March 14. 2008 13:22

Pingback from cacalinks.wordpress.com

Crie uma etiqueta visual para suas imagens em blogs e sites « Caça-Links

smashingmagazine.com, April 15. 2008 02:03

Pingback from smashingmagazine.com

60 More AJAX- and Javascript Solutions For Professional Coding | Developer's Toolbox | Smashing Magazine

myukm.com, April 16. 2008 12:08

Pingback from myukm.com

60 More AJAX- and Javascript Solutions For Professional Coding | Blog

serhatyolacan.com, April 18. 2008 10:52

Pingback from serhatyolacan.com

Profesyonel Ajax ve Javascript’ler » Serhat Yolaçan

artslabturkey.com, April 20. 2008 03:19

Pingback from artslabturkey.com

AJAX and Javascript Solutions For Professional Coding - The Arts Lab TurkeY

kamer.wordpress.com, April 25. 2008 04:25

Pingback from kamer.wordpress.com

Profesyonel Ajax ve Javascript’ler « kamer)

makadco.com, May 4. 2008 16:23

Pingback from makadco.com

60 More AJAX- and Javascript Solutions For Professional Coding | Web Tools | Web Design & Graphic Design Blog

noupe.com, May 25. 2008 08:24

Pingback from noupe.com

Best of Ajax, Dhtml and Javascript- part1

Leks001, June 10. 2008 00:20

http://sangilen.ru/224/447.html
are on this page is a picture and a reference to Taggify widget is just before the end of </ body> HTML Code (<script type = "text / javascript" src = "http://www.taggify.net/view.ashx? key = 84e8f893984e49999c942e3b259e4db9 & fade = cccccc & transparency = 50 & border = 333333 & background = eeeeee & width = 5 "language =" javascript "charset =" utf-8 "> </ script>Wink as these polzavatsya now?

tami, June 29. 2008 21:21

i signed up for the site but when i want to login the system does not recognize my name and password. what can i do?

blox.svbasi.com, July 17. 2008 16:38

Pingback from blox.svbasi.com

Blox.Svbasi · 60 More AJAX- and Javascript Solutions For Professional Coding

hurricanesoftwares.com, August 27. 2008 23:03

Pingback from hurricanesoftwares.com

Most Popular Ajax & JavaScript Program list for web developers | Mind Tree

afruj.wordpress.com, August 29. 2008 15:33

Pingback from afruj.wordpress.com

Some Ajax tutorials « The Brook Song - ঝর্ণার গান

webgunlukleri.com, August 30. 2008 09:06

Pingback from webgunlukleri.com

webgunlukleri.com » Blog Archive » Profesyonel Ajax ve Javascript’ler

smashingmagazine.com, September 11. 2008 05:52

Pingback from smashingmagazine.com

75 (Really) Useful JavaScript Techniques | Developer's Toolbox | Smashing Magazine

zappo.net78.net, September 11. 2008 15:37

Pingback from zappo.net78.net

Zappo.net78

thecreativechildren.com, September 11. 2008 16:31

Pingback from thecreativechildren.com

75 (Really) Useful JavaScript Techniques | The Creative Children

vieno.freehostia.com, September 12. 2008 04:08

Pingback from vieno.freehostia.com

Vieno

aboutcreation.nl, September 12. 2008 22:18

Pingback from aboutcreation.nl

75 (Really) Useful JavaScript Techniques | aboutCREATION

polpdesign.com, September 13. 2008 01:24

Pingback from polpdesign.com

75 (Really) Useful JavaScript Techniques | POLPDESIGN

hciidc.in, September 13. 2008 20:43

Pingback from hciidc.in

75 (Really) Useful JavaScript Techniques | The Human Network (HCI IDC Alumni Blog)

skyje.com, September 14. 2008 03:04

Pingback from skyje.com

75 Useful JavaScript Techniques | download

carrero.es, September 16. 2008 18:42

Pingback from carrero.es

75 técnicas (realmente) útiles con JavaScript - Carrero Bitácora de los Hermanos Carrero, David Carrero Fernández-Baillo y Jaime Carrero Fernández-Baillo.

neurosoftware.ro, September 16. 2008 19:07

Pingback from neurosoftware.ro

75 (Really) Useful JavaScript Techniques | Neurosoftware web dev

abbass, September 18. 2008 05:16

nice

rowebdesign.com, September 18. 2008 20:17

Pingback from rowebdesign.com

75 (Really) Useful JavaScript Techniques | rowebdesign

rafdesign.com, September 19. 2008 22:00

Pingback from rafdesign.com

75 (Really) Useful JavaScript Techniques | rafdesign

design-feeder.com, September 20. 2008 13:08

Pingback from design-feeder.com

Design Feeds » Blog Archive » 75 (Really) Useful JavaScript Techniques

alainalemany.com, September 21. 2008 01:23

Pingback from alainalemany.com

70 técnicas JavaScript profesionales + tutoriales avanzados. | AlainAlemany

toanvt.wordpress.com, September 30. 2008 02:45

Pingback from toanvt.wordpress.com

75 (Really) Useful JavaScript Techniques « Where LOVE begins

toanvt.wordpress.com, September 30. 2008 02:54

Pingback from toanvt.wordpress.com

60 More AJAX- and Javascript Solutions For Professional Coding « Where LOVE begins

gencbilgin.com, October 16. 2008 23:04

Pingback from gencbilgin.com

Profesyonel GeniÅŸ Kapsamlı Ajax ve Javascript’ler GB | Gencbilgin.Com - Bilgiyi EÄŸlenerek Öğreten Alem..

intalino.com, October 20. 2008 22:33

Pingback from intalino.com

60+ Ajax & Javascript For Professional Coders | Tech User, Blogger and Designers References

torn.triothailand.com, October 30. 2008 15:40

Pingback from torn.triothailand.com

75 (Really) Useful JavaScript Techniques | Evolution : weblog

saeedeh, December 7. 2008 17:25

When you enter the site Taggify, my login and password function normally, but when I try to enter the login and password in Taggify Editor, it appears invalid. What should I do?

justskins.com, December 7. 2008 20:31

Pingback from justskins.com

20 Tooltips Script usages With Ajax, Javascript And CSS

Amjad, December 19. 2008 19:38

It takes tooooo long to save and just doesnt save! what is wrong?

Riz, January 11. 2009 08:22

Awesome!

Will be nice if we could choose: insert title on the page or not.

spoonfeddesign.com, February 9. 2009 07:14

Pingback from spoonfeddesign.com

100 Best JavaScript Resources | Spoonfed Design

blog.wipartstudios.com, February 27. 2009 01:41

Pingback from blog.wipartstudios.com

Web Pickz » Blog Archive » 75 Useful JavaScript Techniques

ni-limits.com, March 5. 2009 20:25

Pingback from ni-limits.com

NI-Limits Blog » Blog Archive » Free Resources Galore

blog.valontuoja.net, March 14. 2009 02:03

Pingback from blog.valontuoja.net

Linkit 14.3. - 14.3. | Valontuoja

dzineblog.com, March 16. 2009 16:21

Pingback from dzineblog.com

30+ Tooltips Scripts With JavaScript, Ajax & CSS | Dzineblog

forcto.com, March 30. 2009 11:52

Pingback from forcto.com

75 (Really) Useful JavaScript Techniques | forcto.com

tripwiremag.larsvraa.com, April 10. 2009 09:42

Pingback from tripwiremag.larsvraa.com

120+ Javascript, Ajax, jQuery Mega Toolbox | tripwire magazine

ufoss.com, June 29. 2009 19:39

Pingback from ufoss.com

Ajax ve Dhtml Scriptleri Haber Manset Siteleri

SEO, June 29. 2009 20:16


Great article - exactly what I was looking for. I've been scratching my head for hours over this

Add comment


 





 
© Copyright 2007 Taggify.net, All Rights Reserved.|Support|Terms and Conditions