HTML 5和圖像地圖

任何人都知道如何完成這樣的事情HTML 5和圖像地圖

http://www.jarzebinowe.pl/mieszkania.html（你需要選擇地板...）

在HTML5

？

這是關於選擇的公寓，燈光等.. 頂端如何將一個圖像是由HTML5處理，以至於後來的結果

我是如此陌生和簡潔問題

來源

2013-04-15 Piotr Stanek

對不起請嘗試將HTML元素map

你也許可以更簡單地使用HTML map這將讓你的用戶點擊一個圖像的一部分並鏈接到一個新的更實現你的「向下鑽取」到建築具體的形象。

這裏是一個參考：[編輯用帆布票友顯示] http://www.w3schools.com/tags/tag_map.asp

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/BbCJx/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:15px; } 
    canvas{border:1px solid red;} 
</style> 

<script> 
$(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.onload=function(){ 
     plan.onload=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<windows.length;i++){ 
      w=windows[i]; 
      if(x>w.left && x<w.right && y>w.top && y<w.bottom){ 
       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(){}); 
</script> 

</head> 

<body> 
    <p>Mouse over a window to see it's floorplan</p> 
    <canvas id="canvas" width=300 height=300></canvas> 
    <canvas id="floorplan" width=300 height=300></canvas> 

</body> 
</html>

來源

2013-04-15 13:19:46 markE

尋找的東西多一點幻想。 .. –

請參閱我編輯的答案爲花哨使用畫布。 – markE

HTML 5和圖像地圖

回答

相關問題