Hi everyone,
I having a bit of trouble with my coding and was wondering if anyone could help me.
I'm attempting to make a page where when you hover over a link the picture on the page changes. This works fine in IE and Firefox but doesn't seem to work in Safari or Chrome.
I know the problem is a lack of ';' but have tried putting them in a few places and haven't had much luck and was hoping someone could help me.
Here is the code for the page:
Code:
<!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=utf-8" />
<title>??????</title>
<script type="text/javascript">
if (document.images) {
image1 = new Image;
image2 = new Image;
image3 = new Image;
image4 = new Image;
image5 = new Image;
image6 = new Image;
image1.src = "ExamplePics/whitespace.jpg"
image2.src = "ExamplePics/1.jpg"
image3.src = "ExamplePics/2.jpg"
image4.src = "ExamplePics/3.jpg"
image5.src = "ExamplePics/6.jpg"
image6.src = "ExamplePics/4.jpg"
};
</script>
<link href="Reset.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#maintable {
width: auto;
border-top: 3px solid #000000;
border-left: 3px solid #000000;
border-right: 3px solid #000000;
border-bottom: 3px solid #000000;
background-color: #fff;
}
#header {
padding-top: 50px;
padding-left: 10px;
padding-right: 10px;
border-bottom: 3px solid #000000;
}
.title {
color: #000000;
font: Verdana, Geneva, sans-serif;
font-size: 35px;
}
.links {
color: #000000;
font: Verdana, Geneva, sans-serif;
font-size: 15px;
}
#maincontent {
overflow:hidden;
background: #FFF;
position:relative;
display: table;
}
#mainlinks {
padding-top: 50px;
font: Verdana, Geneva, sans-serif;
font-size: 25px;
padding-right: 20px;
display: table-cell;
}
#picture {
width:50px;
height: 50px;
padding-top: -100px;
padding-left: 100px;
position:absolute;
display: table-cell;
}
#footerleft {
width: auto;
background-color: #ffffff;
padding-top: 20px;
border-top: 3px solid #000000;
padding-bottom: 2px;
}
#footerright {
width: auto;
background-color: #ffffff;
padding-top: 14px;
border-top: 3px solid #000000;
padding-bottom: 3px;
}
.developer {
float:right;
font-size: 12px;
}
.footerpadding {
padding: 0px;
margin: 0px;
border: 0px;
}
.icons {
position: relative;
left: 610px;
}
.navigation {
font-size: 19px;
position: relative;
left: 640px;
text-decoration: none;
}
a {
color: #000000;
text-decoration:none
}
a:visited, a:link {
color: #000000;
}
@-moz-document url-prefix() {
.icons {
position: relative;
left: 610px;
}
}
</style>
</head>
<body>
<p> </p>
<div id="maintable">
<div id="header">
<p class="title"><a href="Index.html">Ben KeyStone</a><font class="navigation"><a href="Index.html">Home</a> <a href="portrait.html">Portrait</a> <a href="events.html">Events</a> <a href="music.html">Music</a> <a href="personal.html">Personal</a> <a href="contact.html">Contact</a></font></p></div>
<div id="maincontent">
<div id="mainlinks">
<a href="subpage.html"
onMouseover="document.imagename.src=image2.src" onMouseout="document.imagename.src=image1.src"><ul>• Lorem ipsum</ul><br /></a>
<a href="http://www.google.com"
onMouseover="document.imagename.src=image4.src" onMouseout="document.imagename.src=image1.src"><ul>• Maecenas auctor</ul><br /></a>
<a href="http://www.twitter.com"
onMouseover="document.imagename.src=image5.src" onMouseout="document.imagename.src=image1.src"><ul>• Pellentesque habitant</ul><br /></a>
<a href="http://www.reddit.com"
onMouseover="document.imagename.src=image3.src" onMouseout="document.imagename.src=image1.src"><ul>• Proin et enim magna</ul><br /></a>
<a href="http://www.bbc.co.uk"onMouseover="document.imagename.src=image6.src" onMouseout="document.imagename.src=image1.src"><ul>• Jaffa enim magna</ul></a>
</div>
<div id="picture">
<img src="ExamplePics/whitespace.jpg" name="imagename" border="0" width="700" height="500">
</div>
</div>
<!--allowing a gap between the main content and header-->
<p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p><p> </p>
<div id="footerleft">
<div class="footerpadding">© 2011 ????????<br />
The view and thoughts of the website are my own and not of any organisation that I work for.
<img src="ExamplePics/facebook.jpg" width="20" height="20" border="0" class="icons"/> <img src="ExamplePics/twitter.jpg" width="20" height="20" border="0" class="icons" /> <img src="ExamplePics/linkedin.jpg" width="20" height="20" border="0" class="icons" /></div></div>
</div>
<font class="developer">Created by ?????????</font>
</body>
</html>