html5影像地图,HTML 5和图像地图

对不起请尝试将HTML元素map

你也许可以更简单地使用HTML map这将让你的用户点击一个图像的一部分并链接到一个新的更实现你的“向下钻取”到建筑具体的形象。

body{ background-color: ivory; padding:15px; }

canvas{border:1px solid red;}

$(function(){

var canvas=document.getElementById("canvas");

var ctx=canvas.getContext("2d");

var floorplan=document.getElementById("floorplan");

var planCtx=floorplan.getContext("2d");

planCtx.font="24px Arial";

planCtx.fillStyle="red";

var canvasOffset=$("#canvas").offset();

var offsetX=canvasOffset.left;

var offsetY=canvasOffset.top;

var lastWindow=-1;

var plan=new Image();

var outside=new Image();

outside.οnlοad=function(){

plan.οnlοad=function(){

ctx.drawImage(outside,0,0);

}

plan.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/inside.jpg";

}

outside.src="https://dl.dropboxusercontent.com/u/139992952/stackoverflow/outside.png";

var windows=[]

windows.push({top:66, left: 70, bottom:111, right:111, floorplan:0, apartment:"3a"});

windows.push({top:66, left:139, bottom:111, right:183, floorplan:0, apartment:"3b"});

windows.push({top:66, left:211, bottom:111, right:255, floorplan:0, apartment:"3c"});

windows.push({top:153, left: 70, bottom:196, right:111, floorplan:1, apartment:"2a"});

windows.push({top:153, left:139, bottom:196, right:183, floorplan:1, apartment:"2b"});

windows.push({top:153, left:211, bottom:196, right:255, floorplan:1, apartment:"2c"});

windows.push({top:239, left:139, bottom:283, right:182, floorplan:2, apartment:"1a"});

function selectWindow(x,y){

var w;

var isInWindow=false;

for(var i=0;i

w=windows[i];

if(x>w.left && xw.top && y

isInWindow=true;

if(i!=lastWindow){

planCtx.clearRect(0,0,floorplan.width,floorplan.height);

planCtx.drawImage(plan,0,0);

planCtx.fillText("Apt: "+w.apartment+", Plan: "+w.floorplan,70,25);

lastWindow=i;

}

break;

}

}

if(!isInWindow){ planCtx.clearRect(0,0,floorplan.width,floorplan.height); };

}

function handleMouseMove(e){

canMouseX=parseInt(e.clientX-offsetX);

canMouseY=parseInt(e.clientY-offsetY);

$("#movelog").html("Move: "+ canMouseX + "/" + canMouseY);

// Put your mousemove stuff here

selectWindow(canMouseX,canMouseY);

}

$("#canvas").mousemove(function(e){handleMouseMove(e);});

}); // end $(function(){});

Mouse over a window to see it's floorplan