so i have updated the code to the following: however now the images are not showing up. What I am trying to do is Dynamically load images to be a 360 degree viewer and have these buttons mouseover and show dialog of certain aspects of the image. I just cant get the layering right :<
var image = new Image();
showProduct = function(imgPath) {
// on load create a bitmap from the loaded image
image.onload = function() {
var img = new createjs.Bitmap(event.target);
// this helps resize picturess
img.scaleX = img.scaleY = 1;
//this controls positioning
img.x = stage.canvas.width / 2 - 280; //half width of pic
img.y = stage.canvas.height / 2 - 150; //half width of pic
mc_container.addChild(img);
//stage.addChild(this.mc_bubble);
//stage.addChild(this.btn_marker1);
stage.update();
}
image.src = imgPath;
}
showProduct("images/Siena1.jpg");
either use:
var image = new Image();
var tl = this;
showProduct = function(imgPath) {
// on load create a bitmap from the loaded image
image.onload = function() {
var img = new createjs.Bitmap(event.target);
// this helps resize picturess
img.scaleX = img.scaleY = 1;
//this controls positioning
img.x = stage.canvas.width / 2 - 280; //half width of pic
img.y = stage.canvas.height / 2 - 150; //half width of pic
stage.addChild(img);
stage.addChild(tl.mc_bubble);
stage.addChild(tl.btn_marker1);
stage.update();
}
image.src = imgPath;
}
showProduct("images/Siena1.jpg");
/////////////////////////////////////////////////////// or //////////////////////////////////////////////////////
var image = new Image();
var tl = this;
showProduct = function(imgPath) {
// on load create a bitmap from the loaded image
image.onload = function() {
var img = new createjs.Bitmap(event.target);
// this helps resize picturess
img.scaleX = img.scaleY = 1;
//this controls positioning
img.x = stage.canvas.width / 2 - 280; //half width of pic
img.y = stage.canvas.height / 2 - 150; //half width of pic
tl.mc_container.addChild(img);
stage.update();
}
image.src = imgPath;
}
showProduct("images/Siena1.jpg");
AdChoices