CSS link from image

[stuarty80]

Hi, just a quick quest to see if anyone knows the best way to add a link to a static image through css.

the html code is:

Code: Select all

		<div id="colorButtons">
			<p class="p1"><span></span></p>
			<p class="p2"><span></span></p>
			<p class="p3"><span></span></p>

	</div>

and my css code is

Code: Select all

#colorButtons {
	height:92px;
	width:780px;
	background-color:#FFF;
	position:relative;
}

#colorButtons p {
	margin:0;
	padding:0;
}

#colorButtons .p1 {
	position:absolute;
	top:0;
	left:0;
	width:260px;
	height:92px;
	background:#FFF url(images/button_orange.gif) no-repeat top left;
}

#colorButtons .p1 span { display:none; }

#colorButtons .p2 {
	position:absolute;
	top:0;
	left:260px;
	width:260px;
	height:92px;
	background:#FFF url(images/button_green.gif) no-repeat top left;
	overflow:hidden;
}

#colorButtons .p2 span {
	visibility:hidden;
	white-space:nowrap;
}

#colorButtons .p3 {
	position:absolute;
	top:0;
	left:520px;
	width:260px;
	height:92px;
	background:#FFF url(images/button_blue.gif) no-repeat top left;
	overflow:hidden;
}

Would i be best changing this to a table? That way the images could be used as links?

cheers

stu