Kelby
20 Aug 2010, 12:08 PM
I'm completely new to image maps and CSS and have recently placed an image map on my personal site. I want the image map to be the center of the page. I have it in a table as I've heard it's best to use tables throughout the site. The image map will not move to the center, but instead stays on the left side no matter what I do. I've done everything to my knowledge.
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(960,640)
Image1.src = "img_index.jpg"
Image2 = new Image(960,640)
Image2.src = "img_indexrollover.jpg"
// End Hiding -->
</script>
<meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(16, 0, 2);"
align="center" alink="#000099" link="#000099"
vlink="#990099">
<table
style="width: 960px; height: 640px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td
style="text-align: center; vertical-align: top;" align="center"><img
style="border: 0px solid ; width: 960px; height: 640px;" alt=""
usemap="#Image-Maps_3201007132346352" src="img_index.jpg"
id="a" align="middle"><map
name="Image-Maps_3201007132346352"
id="_Image-Maps_3201007132346352">
<area title="indexmap"
alt="Enter Site"
onmouseout="document.getElementById('a').src = 'img_index.jpg'"
onmouseover="document.getElementById('a').src ='img_indexrollover.jpg'"
href="News.html" coords="8,31,568,146" shape="rect">
</map>
</td>
</tr>
</tbody>
</table>
</body>
</html>
Here's the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script language="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(960,640)
Image1.src = "img_index.jpg"
Image2 = new Image(960,640)
Image2.src = "img_indexrollover.jpg"
// End Hiding -->
</script>
<meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>Index</title>
</head>
<body
style="color: rgb(0, 0, 0); background-color: rgb(16, 0, 2);"
align="center" alink="#000099" link="#000099"
vlink="#990099">
<table
style="width: 960px; height: 640px; text-align: left; margin-left: auto; margin-right: auto;"
border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr align="center">
<td
style="text-align: center; vertical-align: top;" align="center"><img
style="border: 0px solid ; width: 960px; height: 640px;" alt=""
usemap="#Image-Maps_3201007132346352" src="img_index.jpg"
id="a" align="middle"><map
name="Image-Maps_3201007132346352"
id="_Image-Maps_3201007132346352">
<area title="indexmap"
alt="Enter Site"
onmouseout="document.getElementById('a').src = 'img_index.jpg'"
onmouseover="document.getElementById('a').src ='img_indexrollover.jpg'"
href="News.html" coords="8,31,568,146" shape="rect">
</map>
</td>
</tr>
</tbody>
</table>
</body>
</html>