1: <asp:Image ID="Image1" runat="server" ImageUrl="http://cdn.roboton.com/rbt/Images/Demos/parrot.jpg" Height="350" />
2: <asp:ImageTagger ID="ImageTagger1" runat="server" TargetControlID="Image1">
3: <Options>
4: <TagStyle AreaCssClass="customAreaCssClass" NoteCssClass="customNoteCssClass" />
5: </Options>
6: <Tags>
7: <asp:TagInfo NoteText="Eye of parrot">
8: <NoteArea Height="30" Width="30" X="228" Y="52" />
9: </asp:TagInfo>
10: <asp:TagInfo NoteText="Head of parrot">
11: <NoteArea Height="140" Width="160" X="170" Y="15" />
12: </asp:TagInfo>
13: <asp:TagInfo NoteText="Leaves">
14: <NoteArea Height="50" Width="50" X="50" Y="100" />
15: </asp:TagInfo>
16: </Tags>
17: </asp:ImageTagger>
1 .customAreaCssClass{
2 border: 2px solid #FF9;
3 background: url(Spacer);
4 overflow: hidden;
5 z-index: 0;
6 display: none;
7 position: absolute;
8 cursor: pointer;
9 filter: alpha(opacity=70);
10 opacity: 0.7;
11 }
12 .customNoteCssClass{
13 margin: 0;
14 padding: 25px 10px 10px 10px;
15 width: auto;
16 height: auto;
17 font: 11px arial;
18 color: #000;
19 background: url('http://cdn.roboton.com/rbt/Images/tooltip.png') no-repeat top left;
20 display: none;
21 position: absolute;
22 cursor: text;
23 filter: alpha(opacity=80);
24 opacity: 0.8;
25 }