Skip navigation
Currently Being Moderated

Tagging people in a group photo

Apr 29, 2012 12:53 PM

Is there a way to tag names of people in a group photo using Dreamweaver CS4? What I mean is when you rollover each face, their names pop up.

Thank you

 
Replies
  • Currently Being Moderated
    Apr 29, 2012 1:04 PM   in reply to zannie13

    Are you using an image map with hotspots over the various faces?

     

    If yes, add a title attribute to each of your hotspots.

     

    <area shape="rect" coords="336,202,487,315" href="some-link.html" alt="top-right"  title="person's name" />

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 1:45 PM   in reply to zannie13

    In DW, hit F1 (help)  search for *Image map hotspots*

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 3:13 PM   in reply to zannie13

    zannie13 wrote:

     

    I have turned the photo into an image map (I think), it has a green circle over each face. I tried added the code, but it removed the circle from one face and added a large rectangle in the middle of the image. I do not want it to link to anything, I just wanted to tag each face, like on FaceBook. Is that possible in any of the programs in Adobe Web Standard CS4 or Photoshop Elements 10? If another program will accomplish this task, can you tell me which one? Thank you

     

    There is no program that will magically do this for you.  In fact, tagging photos is not an exact science which is Adobe's reasoning for not implementing it into Lightroom despite the amount of requests for such a feature.  If you want to be that far on the cutting edge you will need to learn how to write javascript and use php and mysql.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 3:39 PM   in reply to zannie13

    zannie13 wrote:

     

    I have turned the photo into an image map (I think), it has a green circle over each face. I tried added the code, but it removed the circle from one face and added a large rectangle in the middle of the image. I do not want it to link to anything, I just wanted to tag each face, like on FaceBook.

    This should be easy enough following Nancy's directions above.

     

    Can you post a link showing us the page as it currently stands?

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 3:42 PM   in reply to zannie13

    Apparently, my hotspot example code used a rectangle while you were using an ellipse.

    Let's see your code.  Pasting Code into the Web Forum (don't use e-mail for this, it won't come through)

    http://forums.adobe.com/thread/427712

     

     

     

     

    Nancy O.

    Alt-Web Design & Publishing

    Web | Graphics | Print | Media  Specialists 

    http://alt-web.com/

    http://twitter.com/altweb

    http://alt-web.blogspot.com/

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 29, 2012 4:32 PM   in reply to zannie13

    Your image is way too big for use on a web page. 

    3,676px × 2,260px,  1,366.94 KB

     

    Open your image in your graphics editor (Photoshop).  Re-scale to 900px wide. 

    Save for Web & Devices as optimized jpg.  It should be under 90 KB in file size. 

     

    Next, insert you new image into your web page.

    Add some hotspots to make an image map.

     

    Save your page.  Upload page and new image to your server. 

     

    Post back when you have completed these steps.

     

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Apr 30, 2012 10:26 AM   in reply to zannie13

    In your code, add a title attribute to each area like this.

     

    <map name="Map" id="Map">

                              <area shape="circle" coords="65,220,16" href="#title="name1" />

                              <area shape="circle" coords="89,220,12" href="#title="name2" />

                              <area shape="circle" coords="100,195,14" href="#" title="name3" />

                              <area shape="circle" coords="121,246,15" href="#" title="name4" />

                              <area shape="circle" coords="177,242,15" href="#" title="name5" />

     

    Replace name1, name2, etc.. with the person's actual name.

     

     

    Nancy O.

     

     


     
    |
    Mark as:
  • Currently Being Moderated
    May 1, 2012 6:45 PM   in reply to zannie13

    FYI. There is a commercial DW Behavior that can do this as well. http://www.actionscafe.com/Features_Folder/PeekaBoo/pabfeatures.html. Click on the demo link and then mouse over the menu selections at the top of the demo page. You can also add Drop shadows and Round corners to the mini info strips.

     

    You can use image map hot spots to trigger the strips, or place an AP Div over each area on your image that should trigger a message. All the messages are entered in a linked external script file that is uploaded with your page. No need to learn PHP or MySQL. The mini messages use just one relocatable AP Div on the page which appears next to the cursor position and is filled with the proper text.

     

    Using title="Name" is the eaiest and cheapest way to do mini-info strips, but this Behavior can do a lot more if you need more than just simple text flyouts.

     

    Hope this helps.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points