- use canvas to draw the image first
- locate several div, on the image to trigger events
- when an event is triggered, the box and connection of the message description are displayed
- div, is not affected by the frame of information description
- connections are drawn by canvas and can be cleared in both Google and Firefox when cleared, but not in IE browsers
//
$(function () {
var $my_canvas = $("-sharpmyCanvas");
var my_canvas = $my_canvas[0];
var context = my_canvas.getContext("2d");
preImage("map.jpg", function () {
context.drawImage(this, 0, 0, 1168, 704);
});
});
//
function preImage(url, callback) {
var img = new Image(); //Image
img.src = url;
if (img.complete) { //
callback.call(img);
return; // onload
}
img.onload = function () { //callback
callback.call(img); //thisImage
};
}
//
function drawline(that) {
var $my_canvas = $("-sharpmyCanvas");
var my_canvas = $my_canvas[0];
var contain = document.getElementById("contain");
var context = my_canvas.getContext("2d");
//1IE
contain.removeChild(my_canvas);
context.clearRect(0, 0, 1168, 704);
contain.appendChild(my_canvas);
//2IE
//my_canvas.height = my_canvas.height;
preImage("map.jpg", function () {
context.drawImage(this, 0, 0, 1168, 704);
});
//
var startx = that.offset().left + that.width() / 2 - 10;
var starty = that.offset().top + that.height() - 10;
//
var endx = that.offset().left + that.width() / 2 - 10
var endy = that.offset().top + that.height() + 40
//
context.moveTo(startx, starty); //
context.lineTo(endx, endy); //
context.lineWidth = 5; //
context.strokeStyle = "red" //
context.stroke(); //
//
var prev = that.prev();
console.log(prev);
if (prev.offset()) {
var startxp = prev.offset().left + prev.width() / 2 - 10;
var startyp = prev.offset().top + prev.height() - 10;
//
context.moveTo(startxp, startyp); //
context.lineTo(endx, endy); //
context.lineWidth = 5; //
context.strokeStyle = "red" //
context.stroke(); //
}
//
var next = that.next();
if (next.offset()) {
var startxn = next.offset().left + next.width() / 2 - 10;
var startyn = next.offset().top + next.height() - 10;
//
context.moveTo(startxn, startyn); //
context.lineTo(endx, endy); //
context.lineWidth = 5; //
context.strokeStyle = "red" //
context.stroke(); //
}
}
//
function drawbox(that) {
$(".block").show();
var blockleft = that.offset().left + that.width() / 2 - $(".block").width() / 2;
var blocktop = that.offset().top + that.height() + 50;
$(".block").css({
"left": blockleft + "px",
"top": blocktop + "px"
});
}
//div
$(".zd37").on("click", function () {
var that = $(this);
drawline(that);
drawbox(that);
})
$(".zd40").on("click", function () {
var that = $(this);
drawline(that);
drawbox(that);
})
$(".zd41").on("click", function () {
var that = $(this);
drawline(that);
drawbox(that);
})