the html:
- Code: Select all
<html>
<head>
<title>-test2-</title>
<link rel="stylesheet" href="test2.css" type="text/css"/>
<script type="text/javascript">
function dostuff(x,y) {
if (document.getElementById(x).className == 'filmContainer') {
document.getElementById(x).className = 'filmContainerBig';
document.getElementById(y).style.display = 'none';
} else {
document.getElementById(x).className = 'filmContainer';
document.getElementById(y).style.display = 'none';
}
}
</script>
</head>
<body>
<div class="filmContainerBig" id="testContainer">
<div class="posterContainer">
<img src="img/poster/test.1.jpg" class="poster" id="testPoster"/>
<img src="img/static/overlay.png" class="overlay" onClick="dostuff('testContainer','infoContainer');"/>
<div class="altPosterContainer">
<a onClick="document.getElementById('test').src='img/poster/test.1.jpg'">1</a>
<a onClick="document.getElementById('test').src='img/poster/test.2.jpg'">2</a></div>
</div>
<div class="infoContainer">
<h2>Movie Title <em>(2008)</em></h2>
</div>
</div>
</body>
</html>
and the css:
- Code: Select all
div.filmContainer {
width: 188px;
height: 272px;
margin: 2px;
float: left;
}
div.filmContainer:hover {
background-color: #b8cfe6;
background-image: url('img/static/poster.hover.bg.png');
}
div.filmContainerBig {
width: 572px;
height: 272px;
margin: 2px;
float: left;
background-color: #b8cfe6;
background-image: url('img/static/poster.hover.big.bg.png');
}
div.posterContainer {
display: block;
float: left;
}
div.posterContainer .poster {
width: 173px;
height: 256px;
background: url('img/static/poster.bg.png');
padding: 8px 8px 8px 7px;
position: absolute;
z-index: 1;
}
div.postercontainer .overlay {
width: 173px;
height: 240px;
position: relative;
top: 8px;
left: 7px;
z-index: 2;
}
div.altPosterContainer {
width: 173px;
height: 16px;
font-family: monospace;
font-size: 13px;
text-align: right;
background-color: lightgreen;
position: relative;
top: 8px;
left: 7px;
z-index: 3;
}
div.altPosterContainer a {
width: 15px;
height: 16px;
padding-left: 4px;
padding-right: 4px;
margin-left: -5px;
margin-right: 0px;
background-image: url('img/static/poster.link.png');
color: #fff;
}
div.altPosterContainer a:hover {
background-image: url('img/static/poster.link.hover.png');
cursor: pointer;
color: #000;
}
div.infoContainer {
float: left;
margin-left: 22px;
}
