Clickable div overlay

content.html

<div class="project img_project1">
	<div class="link-div">
		<object type="img/gif">
			<a class="lightbox" href="http://example.com/">
				<img src="/images/spacer.gif" alt="" width="100%" height="100%" />
			</a>
		</object>
	</div>
	<h5>Project 1</h5>
	<p>Description of the project.</p>
</div>

<div class="project img_project2">
	<div class="link-div">
		<object type="img/gif">
			<a class="lightbox" href="http://example.com/">
				<img src="/images/spacer.gif" alt="" width="100%" height="100%" />
			</a>
		</object>
	</div>
	<h5>Project 2</h5>
	<p>Description of the project.</p>
</div>

description.txt

Technique based on Ricky Stevens's blog post "Overlaying clickable div over Flash Movie"
http://blog.ricky-stevens.com/clickable-div-over-flash-movie/

with some additional modifications to make it cleaner and
more usable for other things (as for example creating portfolio).

styling.css

.project {
	padding: 0;
	border: none;
	overflow: none;
	position: relative;
	
	height: 360px;
	width: 658px;
}
.link-div {
	position:absolute;
	z-index: 1;
	width: 658px;
	height: 360px;
}

/* Project area backgrounds */
.img_project1 {
	background: #fff url(/images/projects/project1.jpg) top left no-repeat;
}
.img_project2 {
	background: #fff url(/images/projects/project2.jpg) top left no-repeat;
}