CODEWITHSUNDEEP
javascriptjqueryhtmlcanvas
Reily Bourne
Reily Bourne

Reputation: 5297

javascript to track and place multiple images on top of an image

I did a search here and couldn't find any questions with answers that were suitable to this.

I am writing a hockey scoring chance tracker and basically I want to show an image of the hockey ice and each time you click on the image it remembers where you clicked, puts a small red circle where you clicked with a number on top. That number is to be an auto incrementing number. Ultimately I want to track where all the mouse clicks are for storage into a database.

To the side of the image will be a form and each time the mouse is clicked it adds a new row to the table. This part is not too hard, I could easily do it with jquery.

The problem I am having is trying to find a quick easy way to keep laying the same image, multiple times, on top of another image, where the user clicks. I have been looking into HTML5/Canvas, as well as just plain javascript/jquery to do this.

I am here asking for suggestions on easy ways to do this.

Thanks

Upvotes: 0

Views: 262

Answers (2)

benqus
benqus

Reputation: 1149

Here is how I would do - simple, short way, I don't know how you want to extend it:

I would create an array, and bind event listener to the div you want your user to click on.

Every time the user clicks on this image, an event object is passed through, you can read out the X and Y coordinates of the mouse - .position() or .offset() depending on your layout. Create a JSON object, which stores these values:

var hit = {
    id: 1,
    x: 250,
    y: 365,
    //add more attributes if you like/need
    //for this particular 'hit'
}

And the you can store this object (-notation) in an array:

hitz.push(hit);

Now you should 'update' your UI based on this array. Just loop through with a for...in loop and create your images:

var hockeyIceClone= $("div.hockey-ice").clone(true);

for (var i in hitz) {
    var hit = hitz[i];
    hockeyIceClone.append(
        //assuming that your .hockey-ice div has position:relative at least
        var image = $(new Image('image/path.png'));
        //add more stuff for image if you like
        $(image).css({
            position: absolute,
            left: hit.x,
            top: hit.y
        })
    );
}

$("div.hockey-ice").replaceWith(hockeyIceClone);

The reason for cloning is because when you loop through an array and append elements to a 'container' placed out and visible on the UI, it might blink as it renders. So you better 'collect' it first, and place them out to the UI together. Also you can use other methods than cloning, it's only an option.

Upvotes: 1

JKing
JKing

Reputation: 847

Here's a super simple jsfiddle with the beginnings of how I might go about doing it - let me know if you've any questions/concerns/need help making further improvements, and I'll be glad to update!

http://jsfiddle.net/jking/4dMJG/

(just prevent my divs are images, and the sidebar is a real form...)

Upvotes: 1

Related Questions