CODEWITHSUNDEEP
javascriptjqueryappend
g5insider
g5insider

Reputation: 119

Appending hotspots on top of an exisiting image. JS and JQ

What i'm trying to do is append hotspots on top of an existing image. As of right now this code appends the new div and image but does so next to the image and not on top of it. I'm new to javascript and jquery so any help is appreciated.

//build data structure to store coordinates and content. 
var product_hotspots = new Array();
product_hotspots[0] = {x: 200, y:200, content: "This is test content"}
product_hotspots[1] = {x: 500, y:500, content: "This is more test content"}
product_hotspots[2] = {x: 400, y:400, content: "This is even more test content"}

//loop through each hotspot. 
$(product_hotspots).each(function(idx) {
    //append a new div to #product_image for each hotspot with the following format: 
    var $newdiv1 = $('<div id="bullet" style="position: absolute; top: product_hotspot[idx].x; left: product_hotspot[idx].y" data-content="product_hotspot[idx].content"></div>');
    var $image1 = $('<img src="images/hotspot.png"/>');


    $("#product_image").append($newdiv1,$image1);

});

Upvotes: 1

Views: 328

Answers (1)

charlietfl
charlietfl

Reputation: 171669

Your concatenation of the properties taken from object is incorrect. You are missing quotes that tell javascript they aren't strings and values of a javascript object

Try

$('<div id="bullet" style="position: absolute; top:'+product_hotspot[idx].x+'px; left:'+product_hotspot[idx].y+'px" data-content="'+product_hotspot[idx].content+'"></div>');

Notice the syntax highlighting of the product_hotpsot items reflecting they are not string

NOTE: I believe you have x and y in wrong positions within the style. Normally x is left not top

Upvotes: 1

Related Questions