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. 

Related posts

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.

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

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

noupe.com, May 25. 2008 08:24

Pingback from noupe.com

Best of Ajax, Dhtml and Javascript- part1

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

Pingback from blox.svbasi.com

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

smashingmagazine.com, September 11. 2008 05:52

Pingback from smashingmagazine.com

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

thecreativechildren.com, September 11. 2008 16:31

Pingback from thecreativechildren.com

75 (Really) Useful JavaScript Techniques | The Creative Children

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

abbass, September 18. 2008 05:16

nice

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

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?

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

code4free.wordpress.com, September 6. 2009 04:32

Pingback from code4free.wordpress.com

Free JavaScript Tutorial, Auto suggestion, CSS Sprites,Flash Chart « freeCode's Blog

millionaire.websitesuperhero.com, September 19. 2009 17:01

Pingback from millionaire.websitesuperhero.com

How to add advanced tooltips for people on your photo

9tricks.com, October 2. 2009 14:58

Pingback from 9tricks.com

75 (Really) Useful JavaScript Techniques | 9Tricks.Com - Tips - Tricks - Tutorials

mageatack.com, November 28. 2009 22:42

Pingback from mageatack.com

Profesyonel GeniÅŸ Kapsamlı Ajax ve Javascript’ler MG - MG Blog

vandelaydesign.com, December 1. 2009 23:47

Pingback from vandelaydesign.com

25 Useful Scripts for Tooltips | Vandelay Design Blog

jkookserv.com, December 2. 2009 09:45

Pingback from jkookserv.com

35 Useful Scripts for Tooltips | JKookServ Hosting Blog

tech.oncolorz.com, December 2. 2009 17:37

Pingback from tech.oncolorz.com

35 Useful Scripts for Tooltips | OnColorz Technology News - New Technology, Internet News, Software, Telecom, Computer Science

gizlikale.com, December 5. 2009 02:03

Pingback from gizlikale.com

tooltip uygulamaları | Blog GizliKale Güncel Linkler

susuzkuyu.com, December 18. 2009 06:56

Pingback from susuzkuyu.com

35 Useful Scripts for Tooltips — susuzkuyu

susuzkuyu.com, December 18. 2009 06:56

Pingback from susuzkuyu.com

35 Useful Scripts for Tooltips — susuzkuyu

slicingpsdtohtml.com, January 10. 2010 04:56

Pingback from slicingpsdtohtml.com

75 (Really) Useful JavaScript Techniques « PSD to HTML , Slicing PSD to HTML

iphonewp.neuroninc.com, January 24. 2010 08:25

Pingback from iphonewp.neuroninc.com

Neuron Technologies Inc – 60 More AJAX- and Javascript Solutions For Professional Coding

doupie.com, February 5. 2010 14:55

Pingback from doupie.com

75 (Really) Useful JavaScript Techniques » 逗派

graphicstreasure.com, February 27. 2010 16:28

Pingback from graphicstreasure.com

Best technique of Ajax, Dhtml and Javascript with example :: Graphics Treasure

craftyman.net, April 22. 2010 14:57

Pingback from craftyman.net

10+ mejores librerías Javascript para Tooltips | Craftyman Blog

endyear2012.com, May 5. 2010 17:21

Pingback from endyear2012.com

final test pingback from « End Year 2012

iBCIS.NET - Technology @ Heart, May 8. 2010 20:52

Trackback from iBCIS.NET - Technology @ Heart

25 Useful Scripts for Tooltips

ufoss.com, May 11. 2010 22:58

Pingback from ufoss.com

Ajax ve Dhtml Scriptleri Haber Manset Scriptleri

51.jordanbrandallamerican.com, May 20. 2010 04:27

Pingback from 51.jordanbrandallamerican.com

Dts Stops Alcohol Withdrawal Syndrome, Dts Discount

dxjo.net, May 30. 2010 06:51

Pingback from dxjo.net

60 More AJAX- and Javascript Solutions For Professional Coding | DX Articles

webphp.ru, May 31. 2010 07:41

Pingback from webphp.ru

60 профессиональных AJAX и JavaScript решений « Блог веб-разработчика

taiwangeek.com, June 13. 2010 13:11

Pingback from taiwangeek.com

Geek is a Lift-Style. »Archive » 60 More AJAX- and Javascript Solutions For Professional Coding

ailevadisi.net, July 31. 2010 00:57

Pingback from ailevadisi.net

75 kullanýþlý javascript tekniði - WWW.aiLeVadiSi.NeT

websiteofthestate.interactiveinfonet.info, August 14. 2010 08:19

Pingback from websiteofthestate.interactiveinfonet.info

Web site of the state - Web site - State of california official web site

mesuthazen.com, August 19. 2010 23:02

Pingback from mesuthazen.com

Mesut HAZEN » Blog Archive » Profesyonel Ajax Çözümleri 1

alabamaweddings.interactiveinfonet.info, August 24. 2010 21:43

Pingback from alabamaweddings.interactiveinfonet.info

Alabama weddings - Place wedding - Wedding place in alabama

blog.4rwebsolutions.com, August 26. 2010 03:49

Pingback from blog.4rwebsolutions.com

4r Web Solutions Blog » AJAX – and Javascript Solutions For Professional Coding

csshunt.com, September 10. 2010 03:23

Pingback from csshunt.com

Taggify | CSSHunt showcasing best hunted web and logo designs - CSSHunt.com

webdesignshock.com, November 4. 2010 02:59

Pingback from webdesignshock.com

Best tooltip scripts & plugins, a complete analysis « Web Design Blog – WebDesignShock

increasewebknowledge.wordpress.com, November 4. 2010 07:50

Pingback from increasewebknowledge.wordpress.com

Best tooltip scripts & plugins, a complete analysis « Web Design Blog – WebDesignShock | increasewebknowledge

dzineblog.com, January 8. 2011 07:46

Pingback from dzineblog.com

30+ Tooltips Scripts With JavaScript, Ajax & CSS | DzineBlog.com

bina-web.com, January 30. 2011 18:38

Pingback from bina-web.com

Ajax » Blog Archive » Top Ajax Script 2011

topdesignmag.com, March 10. 2011 14:56

Pingback from topdesignmag.com

100 Awesome CSS/Javascript Plugins and Coding Techniques | Top Design Magazine - Web Design and Digital Content

asyourways.com, March 12. 2011 07:02

Pingback from asyourways.com

Everything is as your ways : Awesome CSS/Javascript technique

curtainfabric.homeinfous.in, March 28. 2011 01:06

Pingback from curtainfabric.homeinfous.in

Discount curtain fabric

scriptsbytes.com, March 31. 2011 22:27

Pingback from scriptsbytes.com

55 Great AJAX And Javascript Resources For Website Developers | SCRIPTSBYTES

xtrawebsolutions.com, July 2. 2011 03:39

Pingback from xtrawebsolutions.com

Top 100 Best CSS/Javascript Plugins and Coding Techniques | xtra web solutions

topdesignmag.com, July 11. 2011 12:57

Pingback from topdesignmag.com

100 Awesome CSS/Javascript Plugins and Coding Techniques | Top Design Magazine - Web Design and Digital Content

zoomzum.com, September 3. 2011 03:08

Pingback from zoomzum.com

20 Highly Useful jQuery Tooltip Plugins | ZoomZum

news.howtoadmin.com, September 3. 2011 13:31

Pingback from news.howtoadmin.com

20个非常有用的jQuery工具提示插件 | IT News - 发布最新IT信息

designerterminal.com, September 7. 2011 05:55

Pingback from designerterminal.com

20 Wonderful jQuery Tooltip Solutions

ziluobo.com, September 7. 2011 07:33

Pingback from ziluobo.com

jQuery提示工具解决方案 – 紫萝卜 | 所有与设计有关

1stepwebdesign.com, September 8. 2011 22:51

Pingback from 1stepwebdesign.com

28 CSS/Javascript Plugins and Coding Techniques | 1 step web design

glamourhits.com, September 10. 2011 19:39

Pingback from glamourhits.com

20 Highly Useful jQuery Tooltip Plugins | Templates, Scripts, CMS, Graphics, Fonts, Flash, E-Books, 3D, Tutorials, Wallpapers.

openews.net, November 7. 2011 01:23

Pingback from openews.net

20 helpful jQuery ToolTip plugin - Open News

webdesignshock.com, November 23. 2011 22:06

Pingback from webdesignshock.com

jQuery Tooltip, 100 fresh resources! - WebDesignShock

stylescenter.com, December 14. 2011 03:50

Pingback from stylescenter.com

jQuery Tooltip, 100 fresh resources! | Free Website Template Center

kythuatlaptrinh.com, December 20. 2011 01:51

Pingback from kythuatlaptrinh.com

Kỹ thuật lập trình .com
» Jquery Effect

» 100 Awesome CSS/Javascript Plugins and Coding Techniques

w2.com.ua, January 19. 2012 16:22

Pingback from w2.com.ua

30 Tooltip техник использующих JavaScript, Ajax и CSS | Интернет журнал Web 2.0 - Всё о Бизнесе в Сети

sanzrao.com, February 3. 2012 23:23

Pingback from sanzrao.com

Add Visual Tags To Images On Your Site — Internet Leashed

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