Jul 26, 2008

Selecting Specific Part Of Image And Adding Description - Please help

Free Web Hosting, No Ads > CONTRIBUTE > The Internet > Web Design

free web hosting

Selecting Specific Part Of Image And Adding Description - Please help

apple
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.

IPB Image

Reply

BuffaloHELP
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 Trap17 master coders can manufacture something similar and post it under Programming section.

Reply

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

Reply

rvalkass
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.

Reply

shadowx
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:

CODE
<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

Reply

Rap_Speedy
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

Reply

BuffaloHELP
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://esw.w3.org/mt/esw/archives/000038.html
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.

IPB Image IPB Image

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

 

 

 


Reply



Got an Opinion! Express your Views! (no registration):-
Add your Reply/ Opinion/ Views/ Comments/ Suggestion/ Questions/ Queries etc.
Posts with decent grammar & English will be accepted and please refrain from profanities.
For asking a Question, We recommend you to sign-up (for free) so that you can track the topic easily.

Nature of your Post*: Opinion/ Reply/ Comments
Question/Query
Feedback to us.
       
Name   Email
Title/Question*

(Maximum characters: 10,000)
You have characters left.
Confirm Code:

Similar Topics

Keywords : selecting specific image adding description

  1. Adding Drop Down Menus - (4)
    I have looked around many IPB support sites, but I didn't find a suitable drop-down menu add-on
    that I liked or worked correctly. I have noticed the drop down menus on this forum on other forums,
    and I was wondering if this was custom to this site or there was a tutorial somewhere which shows
    how to make one similar to this? Or if anything, I basic IPB drop down menu tutorial/add on.
    Thanks....
  2. Making A Scroll Bar In Flash - with an image and words on it (4)
    does anybody know how to make a scrollbar for my game page I am making on my site. This whole site
    is completely in flash. I know how to make a scrollbar for just words but not when there is an
    image on there also. Does anybody know?...
  3. Image Not Taking The Right Size In Web Page - An image is correct when designed, but not when put in a website (1)
    When trying to make a web page with a GIF image on it which runs a coloured bar along the top and a
    coloured curve along the side, I come across the weird thing that, when I put the image on a web
    site, it does not take in the whole top and does not run from top to bottom completely. The image is
    made in Adobe Photoshop at a resolution of 1024X768 pixela and looks correct , ie. the horizontal
    bit runs completely from left to righ and the vertical bit completely from topright to bottom right,
    yet when put in to the web page, it shows with big margins left and right and to...
  4. Cascading Windows - How do I make the image? (5)
  5. Image Calling Problem Solved - I was having issues trying to call an image from a folder. (1)
    Alright so this is for example You'd have a site and the structure is like this.
    http://www.url.com/ a folder of images /images/ and some pages in this parent directory. However,
    I have another folder so it's http://www.url.com/other/ and this index page needs to call
    things from http://www.url.com/images/ and it can't. It won't load. I've had the
    call be to CODE <img src="images/" or <img src="../images/" and
    <img src="http://www.url.com/images/" It doesn't work. I can't...
  6. Image Anywhere - (2)
    I want to know how to put an image anywhere in the page using HTML/JavaScript. Please Help....
  7. Help With Adding Php Forums On My Site - (3)
    Hey guys! I am kinda new to the whole PHP scene and I am struggling to figure out how to add
    some simple forums to my site. Being that wonderful TRAP17 has free PHP support, I was wondering if
    anyone could send some help my way on how to go about doing this. Thanks in advance!...
  8. How Do I Put A Flash Image In My Website - (10)
    oke i got flash now and i made this button http://www.crazydesign.trap17.com/coolflashthingy.swf
    this button i wanne use for my website now my question is, what do i need to put it online do i need
    a special code or something,i'm not experienced with this,i heard something about a special code
    u need for it,but i dunno wichi'm just used to using tis QUOTE ...
  9. My Opinion About Web Design - Total description (5)
    Hey There, Webs are my ultimate specialty, I started learing when I was about 10 years old. It was
    really helpfull to start young because as you knowthe younger the better. I really like doing webs
    and designs and other specities. One of my freinds showed me how to make a real live robot that
    walks and talks with only 12 dollars, his name was Omar Barghouthi. Hes going Professional in this
    web designing specialty. If you are intrested in talking to him reply to me and i will telll you
    more about him....
  10. Adding Second Page Of Cutenews To My Site - How do I do this? (2)
    I'm using Cutenews on my website. I forgot to mention in my last post on this topic that
    Cutenews is news system that can be integrated into an existing website and can function like a
    blog. Well, I recently integrated cutenews into an existing site, and I'm wondering how I get
    the older news to show up on another page. For example, I'm using cutenews on my main index
    page. At the bottom of the page I'd like to put a link that says, "old news," and have that page
    open up into a new page of my older news/blogs that people can still post comments on. What...
  11. Hoverbox Image Gallery - a pretty cool way to present Images on a page (1)
    Hoverbox is an Image Gallery which I found some time ago. The feature I like the most about it is
    the effect of the "on-hover" state which changes the image from a small thumbnail size to a
    "mid-size" image. Essentially, it doubles the size of the picture when your mouse hovers on it. The
    Hoverbox uses CSS for the size change and needs no javascript to perform. In fact, it works the same
    without javascript. And... it apparently works in IE. The CSS method used includes 'hiding'
    the larger image until the 'on-hover' state is reached. As you know, IE&#...
  12. Adding Cms To A Website - (10)
    I normally use an online cms but the site I used for it no longer exists. I was wondering once you
    download the cms what do you do? *confused* this is soooo much more complicated then doing
    everything online....
  13. How Do You Enlarge An Image? - (8)
    Hey everyone, I need some help on how to make a small image bigger once you click on it. If you
    know ebay, then you know what I'm talking about. There are always sample pictures of the
    product that the seller is selling. Once you click on the tiny pictures, the tiny picture becomes
    larger. Look below... Also, how do you for example..........click on a link, and the
    link automactically takes you like half page down to see a picture? The link will not take you to
    another page, it wil just take you to a different part of the same page as the link itself...
  14. What Is Cms? - i need a more detailed description (13)
    Ye, i know that it is 'content management system' but my question would be: 1) it must be
    installed on the server i upload my site to or it just generates the site i will upload myself to my
    host? 2)what is the best open-source cms (in terms of friendly to non-technical guys, easy to
    change the design and as well easy to create my own theme and rearange the modules inside- news,
    pools, etc) for now that's it all.10x....
  15. Help Required Regarding Adding Javascript In A Web - Info. (2)
    Hey...I have a java code of RSS feeds.When i put it in my website , on front page,and when i
    preview,there is blank place (where news should be) and there is a yellow bar on internet
    explorer..there is a message.. "To Help protect your security,Internet explorer has resticted this
    file from showing active content that could access your computer.Click here for more options" And
    when i click to that bar, there is option "ALOW BLOCKED CONTENT" THen it shows those news. I am
    very upset.Because i dont want that bar.Can you please help me by telling the way , that there comes...
  16. Image Galleries - Which one to choose ? (10)
    As we all must have noticed that the Fantastico section of our trap17 website admin accounts have 3
    options for Picture Galleries. 1... 4Images Gallery 2... Coppermine Photo Gallery 3... Gallery
    I would like to use one of these, but i am very confused which one to select. Primary selection
    criteria would be The Looks and then safety of image files. also ease of adding images (last) So
    what do you think which one should I go for ? Cheers...
  17. Use Cell Background Image On Css? - (2)
    I wanted to have a button that changes the skin/theme of my site using css and php. I've
    already had the php code for switching between two different css but I don't know how to put an
    image background for each cell using css. Can anyone help me? Sample codes would be nice.
    /huh.gif' border='0' style='vertical-align:middle' alt='huh.gif' /> ...
  18. Image Refresh - (5)
    Hi all, Does anyone know if there is any way to refresh only an image in a webpage? I can't use
    the meta refresh because that would defeat the purpose of this page. If a link to this page is
    needed to see what I mean, let me know. I am using layers and they are dragable by visitors and if I
    refresh the whole page, the layers get reset. kvarnerexpress...
  19. Syndicated Image Feeds - Need help setting it up and keywords (0)
    I'd like to offer some of my digital photos as syndicated image feeds, but when I search on that
    term, all I get is porn and lottery sites. Maybe I'm calling this the wrong thing. Here's
    what I want to do: Offer "picture of the week" images that people can link to, once, but they
    update, automatically every week. I can do them all different ways--in web page templates, as
    banners, as puzzles (where they see a small part and have to guess what it is), etc. I tried it
    out as a dorky table-based template and it works fine. Here's the link, so you can get ...
  20. Avoid Image Download - (6)
    Hi guys, I am working on a Web page for a photographic center. They want to show photographs but
    they do not want people to be able to download it. Because some of these photographs are propietary.
    Is that possbile?. Can anyone tell me how can i manage to do that on a Web? thanks in advanced for
    your help!! SAC...
  21. Rollover Image Tutorial - (2)
    make it so that i have a button, probably an opaque one, and when it is scrolled over it displays
    another image, a solid one. I believe this is a javascript command, and I already have all the
    images set, i just need to know the coding. Thanks for the help....
  22. Image Splicer? - (1)
    Ok, question to everybody? Do you know if Photoshop 7 has an included image splicer?...I used to
    have PSP and it had a good one, that generated code for a layout, too. I was kinda
    wondering...because if not, I really should find a free one online... Which brings me to my next
    question...any good splicer/code generator out there, that's free? I really could use one...it
    makes things go so much faster...I mean, doing everything in notepad and all. /biggrin.gif'
    border='0' style='vertical-align:middle' alt='biggrin.gif' /> Thanks in advance to all repliers,
    th...
  23. Move/delete Image On Webpage Automatically? - (2)
    Hi, Im creating a website that sells carpets and basically ive created webpages with the picture and
    checkboxes underneath the pictures so users can select which carpet they want! Once they submit
    the form, we get the order including form details! The problem is that once the user checks the
    checkboxes, i want to be able to delete that image from that webpage or move that picture to another
    location in the folders i have stored on the server. The reason is becuase evry carpet is unique so
    that two people cant order the same carpet! Now wat is the best way 2 d...
  24. For Anyone Who Wants To Have Compact Image Gallery - Click here (4)
    Mini gallery ...
  25. Image Weaver - free flash gallery component (0)
    I was surfing and came across this, and I love how it looks, but I still dunno how to use it, lol.
    Thought I'll share it for those who do. http://imageweaver.buggedcom.co.uk ...
  26. My First Image - (12)
    Okay i want an opinon on how my first images i have made look. I used fireworksMX to create them.
    First Image 2nd image ...
  27. Couple Of Image Minipulations - (7)
    Couple of nasty pictures ive made from photos which i took. ...
  28. Image hosting site... - (12)
    I want to setup a simple web hosting site for something to do, but I dont know where to beguin, does
    anyone know where I can find a whole site ready made, something you can just edit to your taste and
    use? Thank you, cragllo....



Looking for selecting, specific, part, image, adding, description

Searching Video's for selecting, specific, part, image, adding, description
advertisement



Selecting Specific Part Of Image And Adding Description - Please help



 

 

 

 

ADD REPLY / Got an Opinion! Remove these ADs! RAPID SEARCH! Free Web Hosting [X]
Express your Opinions, Thoughts or Contribute more info. to help others.
Ask your Doubts & Queries to get answers, So that "Together We can help others!"
Register FREE for AD-FREE forum, Create your own topics, Ask Questions, track topics, setup subscriptions & notifications and Get a Free Website w/ Email and FTP.
500MB Space *No Ads*, CPanel, FTP, PHP, MySQL, EMails - 100% FREE