Hi..

i need a functionality  to tag a photo .. just like in orkut

 Hi,

You can do by Using JQuery

 Are you Looking as shown in The below Post?

http://forums.asp.net/t/1440680.aspx

i want to tag photos like in facebook . how should i do it ? Jobs  thanks in advance !

Hi,

yes am looking what u have given in the url

i have seen your previous post urls

but am not able to understand where can i save the previous notes(annotations)? and how to populate the notes again when mouse over on the image?

can u please help me

Hi,

this links may helps you

http://forums.asp.net/t/1454586.aspx (answered post)

http://www.codeproject.com/KB/ajax/MakingGoogleIG.aspx 

• http://www.htmlcodetutorial.com/images/images_famsupp_220.html 
• http://www.javascriptkit.com/howto/imagemap.shtml
• http://www.w3schools.com/TAGS/tag_map.asp

Thanks :)

Hi,

for Image Annotations fallow these steps

1) create a div on Page and set the url property with your image

<div id="containment-wrapper" style="background-image: url(3666142658_d46ddf5262.jpg); height:350px;width:500px">

The height & width of the image and The Position Should be fix

2)

create another div inside  the image div. This div is for selecting area on the image

<div id="containment-wrapper" style="background-image: url(3666142658_d46ddf5262.jpg); height:350px;width:500px">
<div id="draggable3" style="height:50px; width:54px">
<div  id="resizable"style="border: thin groove #FFFFFF; height: 58px; width: 59px;"></div>
<div>
	<table> 
	<tr><td colspan="3"><textarea class="xyz" rows="1" id="notes_text_area" cols="4" >Add Notes Here</textarea></td></tr>
<tr>
<td>
<input type="button" style="margin: 5px 5px 0pt 0pt;" value="Save" class="Butt" onclick="Save();" id="btnSave"/>
</td>
<td>
<input type="button" style="margin: 5px 5px 0pt 0pt; height: 26px;" value="Cancel" onclick="Hide();" id="btnCancel"/>
</td>
<td>
<input type="button" style="margin: 5px 5px 0pt 0pt; height: 26px;" value="Delete" id="btnDelete"/>
</td>
</tr></table>
</div></div>
<%--<div id="content"></div>--%>
</div>

3) by adding Jquery resizableable, dragable in pageload you can drag drop,resize the div on Image

 <script type="text/javascript">
       $(document).ready(function() {
  $("#draggable3").draggable({ containment: '#containment-wrapper', scroll: false });
           $("#resizable").resizable();
           $("#btnDelete").hide();
       });

Now your template is Ready

4) How to save the selected  X & Y Positions when you pressing save button?

you can get the div postions using Ajax for this you have to use script Manager

    var posX = Sys.UI.DomElement.getBounds($get("draggable3")).x;
           var posY = Sys.UI.DomElement.getBounds($get("draggable3")).y;

Now Create a webmethod in page for saving x & Y positions of image

[System.Web.Services.WebMethod]
    [System.Web.Script.Services.ScriptMethod]
    public static string AddAnnotation(string PosX, string PosY)
    {

//code here for Insert into Database
}

use the $.ajax to save the x & Y postions on Database

 $.ajax({
               type: "POST",
               url: "Default2.aspx/AddAnnotation",
               data: "{'PosX':'" + Sys.UI.DomElement.getBounds($get("draggable3")).x + "','PosY':'" + Sys.UI.DomElement.getBounds($get("draggable3")).y + "'}",
               contentType: "application/json; charset=utf-8",
               dataType: "json",
               success: function(msg) {
}
{);