Menu
I need some help on one final item of a script.
The intent is to display an image in an element (BGdiv in the script below)
and over-lay (z-index) it with another element (FGdiv) that contains a PNG image with a clear circle.
I want the user to click on a table of cells that will move the PNG over the background image to display only a portion at a time.
The object of the script is to determine how many areas (and where) need to be view to guess at the underlying image
Currently, I cannot figure out how to cover the background image (BGdiv) so that only the layered element of the circle display shows the underlying image. Right now all works as expected, except the whole background image is displayed instead of just the area under the circle. It appears to work the same way in the FF, IE and Safari browsers. ?
Here is the current script:
[code=php]
<html>
<head>
<title>PNG images</title>
<style type=”text/css”>
#BGdiv {
position:absolute;
left:100px;
top: 100px;
z-index:10;
}
#FGdiv {
position:absolute;
top:50px;
left:50px;
z-index:50;
height:200px;
width:200px;
}
body { background:#000000;
color:#ffffff;
}
</style>
<script type=”text/javascript”>
function MoveTo(x,y) {
x *= 100; // x += 100; // for relative positions
y *= 100; // y += 100; // for relative positions
var el = document.getElementById(‘FGdiv’);
// for non-IE browsers
el.style.left=x+’px’; el.style.top=y+’px’;
// for IE browsers
el.style.posLeft = x; el.style.posTop = y;
}
// create dynamic table
function createTable() {
var div = document.createElement(‘div’);
div.setAttribute(‘height’,’200′);
div.setAttribute(‘width’,’200′);
div.setAttribute(‘style’,’margin: 1cm 1cm 1cm 1cm’); // currently not changing in the display ???
var table = document.createElement(‘table’);
table.setAttribute(‘border’,’1′);
var tbody = document.createElement(‘tbody’);
for (r=1; r<5; r++) {
var tr = document.createElement(‘tr’);
for (c=1; c<5; c++) {
var td = document.createElement(‘td’);
var txt = ‘MoveTo(‘+c.toString()+’,’+r.toString()+’)’;
td.setAttribute(‘onclick’,txt)
var newText = document.createTextNode(r.toString()+c.toString());
td.appendChild(newText);
tr.appendChild(td);
}
tbody.appendChild(tr);
}
table.appendChild(tbody);
document.body.appendChild(table);
document.body.appendChild(div);
}
</script>
</head>
<body onLoad=”createTable()”>
<div id=”BGdiv”>
<img src=”../PA190036.JPG” height=”400″ width=”400″>
</div>
<div id=”FGdiv”>
<img src=”../spotlight_circle.png” height=”100″ width=”100″>
</div>
</body>
</html>
The .PNG file is attached.
The background image is any .JPG you wish to use. Currently I have a ‘Pocket Dragon’ to view.
Currently the actual script is located at: [url]http://www.nova.edu/~rumsey/spot/test/dragon.html
if you wish to see my incomplete progress.
Is there a JS setting or CSS command I’m missing somewhere? ?
I’m so close to done and need this last bit of help. 😮
[upl-file uuid=d104b296-2296-4304-adc9-54f4a1f83c57 size=24kB]spotlight_circle.png