Article by Alwyn.
Published: February 2, 2010 at 23:57
Category: Dreamweaver, HTML

Tag people in your pictures using dreamweaver CS4

You all probably use facebook. One of the features is that you can tag people in your photos. On roll over a small popup is shown with the name of your contact.

Recently I was giving a course about dreamweaver CS4 and upon playing around with the (spry) tooltips and the image maps, the students (and I) were wondering if we could combine those two nice features to create a facebook like effect.

So we tried adding a (spry) tooltip to an area of an image map only to find that this is not natively supported. Instead of adding the tooltip to the area, DW adds it to the whole image. Now because I’m very fond of giving the students what they want to know, I started to play around with the code only to find that it is possible to do this with a small workaround. And it’s not even that hard, you just have to make some small changes in the code (which is unfortunate because the course is based on working in design view). Anyway I will show you how to do it without having to digg too deep into code, you just need to have basic knowledge of html markup.

Start and solution files can be found here
A live preview of what we will create can be found here

Let’s start with an image of me and my friends (at the latest Victoria Secret party , photo credit: Janet Mayer)

(R to L: Izabel Goulart, myself, Alessandra Ambrosio and Karolina Kurkova)

I import it into my page (insert > image) and make sure I select the image. Now in the bottom left corner you can see all options to add ‘hotspots’ to this image.
So the next step is to add hotspots for all my friends, the great thing is that this technique will work with all kind of hotspot areas, circle, rectangle or polygon.

Now that’s all done, let’s take a look at the spry tooltips. You can find this in the insert menu > Spry > Spry Tooltip

Let’s select the image and add a tooltip. You’ll notice that a div appears on the bottom of the page with some dummy content in it.

If you select the whole spry element (press the turquoise tab) you will notice that there is a field called <trigger>. This basicly means that when you hover an element in the page with this unique ID, the tooltip is shown. Notice that the id that DW is using, is the id of the whole image, even if you add the tooltip after selecting one hotspot it’ll still use the whole image… So let’s take a look at how to fix that issue.

To start off, I have to set a unique idto each area hotspot in the image. As you can see I can’t do this in the properties panel when I select a hotspot .(I’m not 100% sure the transitional/strict DTD of the W3C allows an id on an area tag, i’m not too much into DTD markup, but it does pass the W3C code validator!)

So the only way to do this is to jump into code view and add it manually.

I will use split view to make it easier to navigate through the code by just selecting an object in the design view.
Select the hotspot of the girl on the left and place your cursor in the code view (<area> tag). At the end of the html tag (just before the /> sign), add the following: id=”girl1″ and press enter to confirm.

Before:

<map name="sprytrigger1Map">
<area shape="rect" coords="16,23,94,113" href="#" />
 
After:
 
<pre lang="html"><area shape="rect" coords="16,23,94,113" href="#" id="girl1" />

Now I will do the same thing for each hotspot in my image. I’ll call them: ‘girl2′, ‘me’ and ‘girl3′

Ok after that is done, lets take a look at the spry tooltip again and change the trigger property to #girl1 (don’t forget the # mark since we are referring to an id). Next I’ll change the content of the tooltip to the girls name (Karolina Kurkova) by selecting the text in the tooltip div.

Now if you save this document and run it you will see that when I rollover the girl on the left, the tooltip is shown! (And it also works in ie 6 ).

Ok so on to the next tooltip, the problem is that each element can have only one tooltip. So for each tooltip you have to repeat these 2 steps.

• Select image and insert tooltip
• Select spry tooltip and set the trigger to the id of the hotspot

That’s it! You can also style the layout of the tooltip with the css panel.
Start and solution files can be found here