Tag A Photo

I have a page that loads a photo based on a query string in the URL.

I am attempting to allow the uploader of the image to "tag" people in the photo. A tag will be a javascript positioned "frame" over the top of the image, the frame will only appear when the user hovers their mouse over a name of someone in that photo.

I have sorted tagging as in, the user can set people in a photo. Does anyone know any java script that will allow me to :

1) Limit the users tagging abilitys to only the photos area : "image1".

2) Will save the location (from top and left) of the frame.

I hope this makes sense. If you wish to see an example "facebook.com" already does this type of tagging. I am a bit of a newbie when it comes to javasctript so i dont really know where to start with this. If there is a way of doing this that is better than the way i am trying please let me know. thanks si!

Hi,

Take a look here

http://weblogs.asp.net/scottgu/archive/2006/07/19/Building-a-Photo-Tagging-Application-using-ASP.NET-2.0_2C00_-LINQ_2C00_-and-Atlas.aspx

thats perfect except i didnt want to use class diagrams if possible. I will give it a go and see if it works for my project. Thanks a million! si!

i feel i should explain slightly more. I want the user to be able to click "photos containing you" button and it`ll load a page which`ll filter out all images that do not have a tag of them. I was going to do this from a querystring which seems simple enough to do, but its the cloud control and storing the tags that is causing me issues. Si!

tag not well formed with java and quotes problem

Here is the tag:

<asp:Image ID="Photo" runat="server" ImageUrl="Images/Loading.gif" OnLoad="SwapImage(this,'Handler.ashx?AlbumID=<%#Eval("AlbumID")%>&Size=M');" CssClass="photo_198" style="border:4px solid white" ToolTip='<%#Eval("DESCRIPTION")%>' />

I know the problem is something with the OnLoad part of the tag. and I'm pretty sure it has to do with the single quotes around the handler url. can anyone help with this? do I need to escape out of the single quote or what?

Try this

<asp:Image ID="Photo" runat="server" ImageUrl="Images/Loading.gif" OnLoad='SwapImage(this,<%# "Handler.ashx?AlbumID=" & Eval("AlbumID")%>&"Size=M");' CssClass="photo_198" style="border:4px solid white" ToolTip='<%#Eval("DESCRIPTION")%>' />

I dont have the swapImage function, so I'm not sure if it's working or not, but the error changed :)

onmouseover="<%#"javascript:clearHistory1('" & Eval("Heading") & "','" & Eval("Description") & "');"%>"

niether of those two helped, the 2nd on gives a worse error and I'm not doing a roll over image. Here is my swapImage function

 <script type="text/javascript"> function SwapImage(img,src) { img.src=src; } </script>

this is what I changed the onload part to and still get the not well formed tag error:

<asp:Image ID="Photo" runat="server" ImageUrl="Images/Loading.gif" OnLoad='<%#"SwapImage(this, 'Handler.ashx?AlbumID=" + Eval("AlbumID") +"&Size=M')"%>' CssClass="photo_198" style="border:4px solid white" ToolTip='<%#Eval("DESCRIPTION")%>' />

ASP:Image is a server side control, when you specify the onload event, it's looking for a server onload event, not a JavaScript event which is client side.

<imgonload="SwapImage(this,<%# "handler.ashx?AlbumID=" & Eval("AlbumID") & "&Size=M" %>);"src="Images/loading.gif"class="photo_198"style="border:4px solid white"ToolTip='<%#Eval("Description")%>'/>

You need a client side HTML tag like above, who's onload even will fire on the client side, not the server side.

Hope this helps.

here is the other way is wrote the Onload part and got the same error:

OnLoad="SwapImage(this, 'Handler.ashx?AlbumID=<%# Eval("AlbumID") %>&Size=M')"

thanks a lot!!! It works great! I just needed to change the onload function in the swapImage function

it looks great in firefox but in IE 7.0 the animation of the loading gif never animates and just shows the first frame. The actual image load above it, but IE says there is an error on the page and says the error is "Error: object expected"

I fixed the Error but in IE I still don't get any animation from the loading.gif, anyone know why?

It's almost assurendly a problem with your handler. Can you post the code to the handler you're using to retreive the image?

the handler returns the correct image fine. The website runs perfect with animation in firefox but IE 7.0 just stops the animation of the loading.gif at the first frame