Tagging people in a group photo

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/

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

Nancy O.

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.

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?

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/

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.

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.

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.