I'm doing a site for my boss's wife - and I want it to look like this:
http://www.findalbany.com/publishers/oksana/demo.html
but I want the background to do this:
http://www.findalbany.com/publishers/oksana/home-test.html
The problem is I want each of those white squares to be a separate linked image as well.
Is that even possible?? I'm trying to figure it out and I thought it'd be best to ask some of you whizzes. All help is appreciated.
This should help you out. I don't remember how to make the DIV float in the center of the screen, figure that out and you will have what you want.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Oksana Kehoe Shuvalova</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
#apDiv1 {
position:absolute;
left:344px;
top:128px;
width:661px;
height:395px;
z-index:1;
}
-->
</style>
</head>
<body>
<div id="apDiv1"><img src="IMAGE-WITH-WHITE-BLOCKS" width="697" height="404" border="0" usemap="#Map" />
<map name="Map" id="Map"><area shape="rect" coords="2,3,231,135" href="BOX1" />
<area shape="rect" coords="231,1,464,136" href="BOX2" />
<area shape="rect" coords="465,-2,716,136" href="BOX3" />
<area shape="rect" coords="465,135,712,269" href="BOX6" /><area shape="rect" coords="232,136,465,270" href="BOX5" /><area shape="rect" coords="-4,135,232,269" href="BOX4" />
<area shape="rect" coords="-36,270,233,433" href="BOX7" />
<area shape="rect" coords="232,270,464,418" href="BOX8" />
<area shape="rect" coords="464,269,696,407" href="BOX9" />
</map></div>
<div id="container">
<table class="container" cellpadding="0px" cellspacing="0px" border="0px">
<tr>
<td width="50%"><a href="http://www.randallkehoelaw.com"><img src="http://www.findalbany.com/publishers/oksana/container1.png" border="0" class="domroll boxing.png"></a></td>
<td width="50%"><a href="http://www.yahoo.com"><img src="http://www.findalbany.com/publishers/oksana/container2.png" border="0" class="domroll nascar.png"></a></td>
</tr>
<tr>
<td width="50%"><a href="http://www.google.com"><img src="http://www.findalbany.com/publishers/oksana/container3.png" border="0" class="domroll basketball.png"></a></td>
<td width="50%"><a href="http://www.facebook.com"><img src="http://www.findalbany.com/publishers/oksana/container4.png" border="0" class="domroll football.png"></a></td>
</tr>
</table>
</div>
<script src="chrisdomroll.js">
/****************************************************
* DOM Image rollover v3.0: By Chris Poole http://chrispoole.com
* Script featured on http://www.dynamicdrive.com
* Keep this notice intact to use it :-)
****************************************************/
</script>
</body>
</html>
Thanks very much. I ended up having to go another direction anyway, but I'm sure this will come in handy.
Well your welcome.