在 iframe 上覆盖画布 - HTML

发布于 2024-11-26 06:50:28 字数 1829 浏览 2 评论 0原文

我正忙于编写一个生成 HTML 代码的 servlet。目标是根据存储的点击数据创建人们点击网站的热图。我找到了在画布中创建热图的 javascript，现在我想将该画布覆盖在点击信息所在的网页上。

到目前为止，这是我的 HTML，它成功生成了热图并创建了 iframe。 iframe 覆盖在热图上。目前我不知道如何使 iframe 与网页大小相同，以便看起来正在查看的网站上覆盖有热图：

<html> 
    <head> 
        <style> 
            #heatmapArea{
            position:relative;
            float:left;
            width:410px;
            height:410px;
                            z-index:1000;
            border:1px dashed black;

                    #iframeArea{
                            position:relative;
                            float:left;
                            width:100%;
                            height:100%
                            z-index:1;
                    }
        }
    </style> 
</head> 

<body> 
    <div id="main"> 
        <div id="heatmapArea"> 
                        <div id="iframeArea">
                            <iframe src="www.google.com"></iframe>
                        </div>

        </div> 
    </div> 

    <script type="text/javascript" src="heatmap.js"></script> 
    <script type="text/javascript"> 


    window.onload = function(){
        var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":10, "visible":true});
        var el = "{max: 100, data: [{x: 20, y: 20, count: 10},{x: 200, y: 200, count: 43},{x: 200, y: 400, count: 7},{x: 380, y: 400, count: 6},{x: 400, y: 400, count: 4},{x: 280, y: 260, count: 100},{x: 80, y: 60, count: 40},{x: 166, y: 260, count: 85},{x: 300, y: 400, count: 34},]}";
        var obj = eval('('+el+')');
        xx.store.setDataSet(obj);
    };

    </script> 
</body>

我是一名认真的 HTML 新手 - 我该怎么做才能实现我想要的结果？

非常感谢！

原文

I'm busy writing a servlet that generates HTML code. The goal is to create a heatmap of where people click on a website from stored data of those clicks. I've found javascript to create the heatmap in a canvas, and i now want to overlay that canvas over the webpage that the click information is about.

This is my HTML so far, which results in the successful generation of the heatmap, and the creation of an iframe. The iframe is overlayed over the heatmap. Currently i dont know how to make the iframe the same size as the webpage so that it appears that the website is being viewed with the heatmap overlayed over it:

<html> 
    <head> 
        <style> 
            #heatmapArea{
            position:relative;
            float:left;
            width:410px;
            height:410px;
                            z-index:1000;
            border:1px dashed black;

                    #iframeArea{
                            position:relative;
                            float:left;
                            width:100%;
                            height:100%
                            z-index:1;
                    }
        }
    </style> 
</head> 

<body> 
    <div id="main"> 
        <div id="heatmapArea"> 
                        <div id="iframeArea">
                            <iframe src="www.google.com"></iframe>
                        </div>

        </div> 
    </div> 

    <script type="text/javascript" src="heatmap.js"></script> 
    <script type="text/javascript"> 


    window.onload = function(){
        var xx = h337.create({"element":document.getElementById("heatmapArea"), "radius":10, "visible":true});
        var el = "{max: 100, data: [{x: 20, y: 20, count: 10},{x: 200, y: 200, count: 43},{x: 200, y: 400, count: 7},{x: 380, y: 400, count: 6},{x: 400, y: 400, count: 4},{x: 280, y: 260, count: 100},{x: 80, y: 60, count: 40},{x: 166, y: 260, count: 85},{x: 300, y: 400, count: 34},]}";
        var obj = eval('('+el+')');
        xx.store.setDataSet(obj);
    };

    </script> 
</body>

im a serious HTML newbie - what can i do to make what i want happen?

thanks a ton!

分享到QQ

分享到微博