Hi all,

As a small part of a project for uni, i'm trying to put together a webpage which basically has a load of clickable targets, on top of a clickable background (so every visible region of the page is linking to something). Long story short- its to see how accurately people can hit targets of a certain size on an iPad.

I've worked with HTML and CSS but not for years, and I'm basically starting afresh. Using W3 schools and a lot of googling/reading up, I basically 'hacked together' something that works, which you can see at b34.site40.net/targets.html and gives an idea of what I'm going for.

Its working pretty much exactly how I want it to on IE9 (wherever you hover the mouse pointer over the targets or backrgound, its clickable). However when I fired up Safari/Firefox/iPad browser, I'm finding strange behaviours which I can only attribute to my very bad scripting (lots of areas aren't clickable, and the accuracy seems totally off). I'm ashamed to admit (considering how simple it all is) i've spent hours reading up and trying to find a solution or a way round it- I *think* it may be something to do with using a negative z-index.

This code is no doubt a mess, but could anyone cast their eye over it and try to find the flaw which explains why its fine in IE but none of the other browsers? Or at least tell me if I need to start again, and how best I might go about it!? I'm at the end of my tether and making no progress alone!

Code:
<html>
<head>
<title> test: Works in IE, not in Safari/iPad </title>

<style type="text/css">

#background_link
 
{	position:absolute;
	left:0px;
	top:0px;
	z-index:-1; 				/*this z index might be the problem- needs to be a positive value?*/
	background-image:url('background.png');
	display:block;   
	height:768px; 
	text-indent:-9999px;    		/*the hidden text is indented off the page, a trick I found online to make the background image clickable*/
	width:1024px;
}

</style>

</head>

<body>


						<!--below is the link for the clickable background -->

<a href="TO-NEXT-PAGE" id="background_link"></a>

						<!--These are the icons/targets. To locate the correct target, search for: "correct -->
						<!--Probably, these all need to be given a z index higher than the background above... but if so, i'm not sure how :-/  -->

<a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="correct.png" alt="correct.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a><a href="http://b34r5.tempopage.com/p2.html"><img style="border: 0px solid ; width: 72px; height: 72px;" src="incorrect.png" alt="incorrect.png" hspace="15" vspace="15"></a>

</body>

</html>
A huge thanks in advance for any thoughts or help on this!

P.S. I should mention this isn't collusion: I'm not doing a technical/computing degree and i'm not being assessed on this code, so no one would be helping me 'cheat'. Its basically a 'tool' i'm using for usability tests. I will indeed fully credit any helpful individuals and this site in my MSc thesis if people want!