我正在忙着编写一个生成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新手-我该怎么做才能实现自己想要的事情?
感谢一吨!
据我了解,您想在html和CSS中进行操作。然后也许:
步骤1:将此添加到您的CSS:html, body {height: 100%;}
步骤2将此添加到您的iframe类中:position: absolute; width: 100%; height: 100%;
我创建了一个小提琴来向您展示它的工作方式:http://jsfiddle.net/hobobne/a3muZ/