Selecting Specific Part Of Image And Adding Description Please help

[apple 0]

Many of you would have noticed that on flickr, there's feature that you can select some part of the picture (usually there' a small box) and add description for that part when you upload.

Can someone tell me what kind of feature it is, and how it can be made ? im very keen to learn about that.

I have attached the image below, there' you can see the boxes on the picture.. i want to learn how to make that feature.. please help me.

Thanks.

 

Sami.

 

[BuffaloHelp 24]

Looks like the combination of Tool Tip (jhaslip as written a topic about this) and image layer code to combine two sets of images to form one.The photo would behave as the background and the Tool Tip overlay acts as the item description.It would be nice to see if Xisto master coders can manufacture something similar and post it under Programming section.

[jlhaslip 4]

Hmmmmm.... Image map and the Tooltip Pop-up combination... Might have to have a look at that possibility...

[rvalkass 5]

Been searching around and by the looks of it no-one has tried anything like it and written a tutorial or any code for it. There are, however, a few similar things that might be of use for some code and ideas.
This uses JS to do a similar thing to Google Maps, so perhaps it could be adapted for any image. I don't have time to go through it, but it might be useful.
This script applies tooltips to the various parts of an imagemap, but there is no box image or indication there is a tooltip there.
Finally, this page goes into a little more detail about applying a fancy tooltip to an imagemap, but again there is no indication that a tooltip is there.

[shadowx 0]

Using an image map as jlhaslip said you can use the "alt" attribute of a link to display a smal box with text in it but its very uncustomizable. I havent used the tooltip thing so ill leave that for someone else!

The HTML for what i done is simple:

<CENTER><IMG SRC="hover.bmp" USEMAP="#sitemap" align=center><map name="sitemap"><area shape="rect" coords="85, 160, 325, 190" href="#" alt=Hover></map>

Just replace the numbers with the co-ords of the top left and bottom right corner points of the area and the alt message to the text you want. And of course the image SRC needs to be changed. ITs only a very simple example, the tooltip will probably be better

[Rap_Speedy 0]

i bulieve you can do it in many ways. for example in flash or in html coding.both ways will give a neat effect to a picture. great ideea

[BuffaloHelp 24]

It's been bugging me how this "effect" didn't have a proper name.

 

And then this morning, walking down the Vegas Strip, it dawned on me. So I searched. And I think I found the correct term for this effect.

 

Most commonly used terms is annotating image or parts of image. http://forums.xisto.com/no_longer_exists/

The correct term, at least I can tell, is Image Region vocabulary http://www.bnowack.de/w3photo/pages/image_vocabs

 

It's a mixture of XML with coordinates and an image. This is called RDF (Resource Description Framework).

 

I'm still trying to understand how it is actually achieved but a demo generator in this page is the best I can find:

http://www.kanzaki.com/docs/sw/img-annotator.html

 

This site selects a region using JAVA script. Then you enter all tags for necessary fields and it generates RDF. And the final image is generated with an ID tag per region previously selected. Then the RDF can be used to describe individually or like the tool tip on the image.

 

Pretty cool. I hope someone can isolate and strip the source scirpt so that it can be used on anyone's hosting account.

 

 

A demonstration of page in action: http://www.kanzaki.com/bass/the-giant.rdf