How to place a smaller image over a larger image based on XY co-ordinate positions in ASP.NET

Question

0.00/5 (No votes)

See more:

We have a requirement for a website similar to lenskart.com in which the user can upload their image or take a picture using their webcam. There are a no. of sunglasses that they can choose from and clicking on it should make the glass appear on their face. So, my question is how can I place one image over another image, in this case, the image of the sunglass over the user's picture. I have already tried dragging a smaller image onto a larger image and extracting the x and y co-ordinate positions of the smaller image over the larger one. Now, I want to be able to place the sunglass image over the user picture based on these x and y co-ordinate positions. Can anyone guide me as to how to achieve this?

Posted 20-Aug-13 21:22pm

Deepa10976

Add a Solution

Comments

lukeer 21-Aug-13 4:12am

Where is the problem in "simply doing it"?

What behaviour do you expect? What behaviour do you see?

Or:
What error message appears? What part of your code does it appear in?

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Yesudasan Moses · Answer 1 · 2013-08-20T23:58:00

Solution 1

Make Transparent PNG files as sun glasses,
and use it as background image for a DIV (or Panel).
Then use Javascript, or JQuery to move the picture,,,

Check this..

http://stackoverflow.com/questions/6508139/how-to-move-an-image-to-the-mouse-position-in-html-javascript[^]

Posted 20-Aug-13 23:58pm

Yesudasan Moses

Prasad Khandekar · Answer 2 · 2013-08-21T01:27:00

Solution 2

Hello Deepa,

You can use CSS rules to achieve this. Basically you need a div containing an img element. The img element will display the goggle and the div will have the background image of the face. See the demo[^] on JSFiddle.

Regards,

Posted 21-Aug-13 1:27am

Prasad Khandekar