Наложение холста на iframe - HTML - PullRequest
Новая
       39

Наложение холста на iframe - HTML

5 голосов
/ 26 июля 2011

Я занят написанием сервлета, генерирующего HTML-код.Цель состоит в том, чтобы создать тепловую карту, где люди нажимают на веб-сайт из сохраненных данных этих кликов.Я нашел 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 новичок - что я могу сделать, чтобы добиться желаемого?

спасибо за тонну!

1 Ответ

2 голосов
/ 26 июля 2011

Как я понимаю, вы хотите сделать это в HTML и CSS. Тогда возможно:

Шаг 1 Добавьте это к вашему css: html, body {height: 100%;}

Шаг 2 Добавьте это в ваш класс iframe: position: absolute; ширина: 100%; высота: 100%;

Я создал быструю скрипку, чтобы показать вам, как она работает: http://jsfiddle.net/hobobne/a3muZ/

...