Question

任何人都知道如何完成这样的事情

http://www.jarzebinowe.pl/mieszkania.html（你需要选择楼层......）

在html5中？

这是关于选择公寓，灯等。顶部HTML5如何处理一个图像，这就是结果

我很抱歉这么奇怪和简洁的问题

Answer 1

尝试使用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>

HTML 5和图像映射

1 个答案: