Hi,
I am having difficulties with a rollover image that is also a link. I have read several things on the topic but cannot resolve this. The web page is www.homagesthefilm.com. Below is the code. Any help is greatly appreciated. Thanks!
I am having difficulties with a rollover image that is also a link. I have read several things on the topic but cannot resolve this. The web page is www.homagesthefilm.com. Below is the code. Any help is greatly appreciated. Thanks!
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<title>Homages</title>
<link rel="stylesheet" type="text/css" media="screen" href="homagesthefilm.css">
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
</head>
<body>
<div id="container">
<div id="book">
<img src="oldbookwithtext.png">
<p><i>Homages</i> focuses on the relational dynamics between three individuals with mental illness: Zafrullah, a Sunday thief with paranoia, dashes around town starting a sordid fashion line while trying to dysfunctionally romance a waifish young woman named Roze. An enigmatic depressive, Roze is solitary and introverted, struggling to balance relationships between Zafrullah and Duane. Duane is an anxiety-ridden Lorazepam addict, desperate for Roze and to evade his delusion of dying.</p>
</div>
<div class="book2">
<img src="oldbookpage2.png">
<div id="p2">
With all due respect to prefaces, this particular preface is more important than is customary. The film, the content of this mock-book, is not finished; we require finishing funds to complete post-production. We are therefore having a concert fundraiser to generate finances. The concert features local bands <a href="http://heavytrafficband.com">Heavy Traffic</a>, <a href="http://music.cbc.ca/#/artists/1985">1985</a>, and Guelph's <a href="http://www.djsneakybastard.com/">DJ Sneaky Bastard</a>. Skylyssa Carville will also be showing and selling paintings. The concert is happening at the:
</div>
<div id="facebook">
<img src="facebooklink.png">
</div>
</div>
<div id="book3">
<img src="blankpage.png">
</div>
</div>
</body>
</html>
Code:
#container {width: 800px; margin: auto;}
body {
background: url(oldbg.gif) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
#book {display: inline; z-index:-999;}
.book2 {float: left;
margin-top: 110px;
display: ; z-index:-999;}
#tourist {margin-top: -360; margin-left: -100px}
p {font-family: courier, monospace;font-size: 13.5px; margin-top: -370px; margin-left: 462px;
margin-right: 61px;z-index:999}
#p2 {font-family: courier, monospace;font-size: 13.5px; margin-top: -355px; margin-left:80px; margin-right: 455px ;z-index:999}
#book3 {float: left;
margin-top: 155px;}
a {color: black;
text-decoration: none; }
a:visited {color: black;
text-decoration: none;
}
a:hover {font-weight: bold;
}
#facebook a {
background:url("facebooklink.png"); margin-left: 400px;
}
#facebook:hover {background:url("facebooklinkcolour.png")
}