Hello.
I am trying to make my portfolio site. This page is what I have planned as the opening page. It loads and the image rollover works beautifully in Safari, but the image fails to render in Firefox. Can anyone give me any pointers on what I have done wrong?
The source:
What I am trying to accomplish is that onMouseOver changes the background image, thus emulating a rollover image. Is there a better way to implement this?
Thanks in advance.
By the way: the rest of the site is incomplete, I am actually changing the design, font, and color scheme, and am basically keeping only the start page, so no need to worry about the other pages.
irmongoose
I am trying to make my portfolio site. This page is what I have planned as the opening page. It loads and the image rollover works beautifully in Safari, but the image fails to render in Firefox. Can anyone give me any pointers on what I have done wrong?
The source:
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>Conceptualism</title>
<style type="text/css">
body
{
background-color: #999999;
background-image: url(one.png);
background-repeat: no-repeat;
background-position: bottom center;
margin: 0px;
padding: 0px;
}
#center
{
width: 282px;
height: 276px;
position: absolute;
top: auto;
bottom: 74px;
left: 50%;
right: 50%;
margin: 138px auto auto -130px;
border: none;
}
</style>
<script type="text/javascript">
function changeStyle()
{
document.getElementById("b1").style.backgroundImage="url(two.png)";
document.getElementById("b1").style.backgroundRepeat="no-repeat";
}
function putBack()
{
document.getElementById("b1").style.backgroundImage="url(one.png)";
document.getElementById("b1").style.backgroundRepeat="no-repeat";
}
</script>
</head>
<body id="b1">
<img src="two.png" style="display:none;" alt=""/>
<div id="center">
<a href="Main/index.html" onmouseover="changeStyle()" onmouseout="putBack()">
<img src="blank.png" alt="Enter" border=none>
</a>
</div>
</body>
</html>What I am trying to accomplish is that onMouseOver changes the background image, thus emulating a rollover image. Is there a better way to implement this?
Thanks in advance.
By the way: the rest of the site is incomplete, I am actually changing the design, font, and color scheme, and am basically keeping only the start page, so no need to worry about the other pages.
irmongoose
