div/css

hej folkens.

jeg har et lille problem. jeg kan ikke få min hjemmeside til at virke som den skal hvis jeg vil have mere end 1 layer på. kig lige på denn kode:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
    <TITLE>[Ingen titel]</TITLE>
<META NAME="Generator" CONTENT="Stone's WebWriter 3.5">
</HEAD>
<BODY STYLE="margin:0px" BGCOLOR="#000000">
<TABLE BORDER="0" height="100%" width="100%" CELLPADDING="0" CELLSPACING="0">
<TR>
    <TD height="100%" width="100%" ALIGN="center">

        <TABLE CELLPADDING="0" CELLSPACING="0" BORDER="0">
            <TR>
                <TD height="600px" width="800px">
                    <IMG SRC="hp.jpg" WIDTH="100%" HEIGHT="100%" ALT="" STYLE="border-color:black;position:absolute;z-index:0" USEMAP="#hp">
                            <MAP NAME="hp">
                                <AREA SHAPE="rect" COORDS="33,80,265,176" HREF="#" onmouseover="document.getElementById('1').style.visibility='visible'" onmouseout="document.getElementById('1').style.visibility='hidden'">
                                <AREA SHAPE="rect" COORDS="34,252,266,347" HREF="#" onmouseover="document.getElementById('2').style.visibility='visible'" onmouseout="document.getElementById('2').style.visibility='hidden'">
                                <AREA SHAPE="rect" COORDS="34,425,266,519" HREF="#" onmouseover="document.getElementById('3').style.visibility='visible'" onmouseout="document.getElementById('3').style.visibility='hidden'">
                            </MAP>
                    <DIV ID="1" style="visibility:hidden;position:relative;z-index:1;width:406;Height:396;top:101px;left:316px;background-color:red">
                        <FONT COLOR="#FFFF00">test1</FONT>
                    </DIV>

                </TD>
            </TR>
        </TABLE>

</TD>
</TR>
</TABLE>
</BODY>
</HTML>



jeg vil gerne have en løsning hvis det er muligt men jeg godtager IKKE asp/php/javescript. kun html og css.