Menu
I am creating a page here
[url]http://hbarsenal.co.uk/page2.html
as you can see I can’t get the images to appear. What you should see is an image and then a crosshair over the top. The person then selects a position on the grid by clicking. Do you know why my images aren’t showing.
My Code;
<head>
<title>Test</title>
<style type=”text/css”>
img#crosshair {
position: absolute;
display:none;
}
</style>
<script>
function placeCrosshair(e) {
var ch = document.getElementById(‘crosshair’);
var pic = document.getElementById(‘picture’);
ch.style.display = ‘block’;
ch.style.left = e.x – 11;
ch.style.top = e.y – 11;
document.coords.x.value = e.x – pic.offsetLeft;
document.coords.y.value = e.y – pic.offsetTop;
}
</script>
</head>
<body>
<img src=”backg.jpg” width=”500″ height=”500″ id=”picture” onClick=”placeCrosshair(event)” />
<img src=”newcrosshair.gif” width=”21″ height=”21″ id=”crosshair” />
<form name=”coords”>
X: <input type=”text” size=”5″ readonly=”true” name=”x” /><br />
Y: <input type=”text” size=”5″ readonly=”true” name=”y” />
</form>
</body>
</html>
I created the images in Adobe Photoshop at 500 x 500 pixels and 21 x 21
I have placed the pictures in the image folder under puble_html
and the files paths are the same i.e. gif is gif not GIF.
Any ideas?