Button and Table for Hyperlink

Create a table and set the background to an appropriate image (in the case of this example a Button). Simply set-up a standard Hyperlink over it. The effect is like a changing image but many times faster and a lot quicker to create. Especially useful when putting together a prototype or a fast graphical Web-Site.

Note: style="text-decoration: none" gets rid of the underline from the hyperlink (which gives the trick away).

<html>

<head>

<title>Button and Table for Hyperlink</title>

<style>A:unknown {

COLOR: blue

}

A:visited {

COLOR: purple

}

A:hover {

COLOR: red

}

</style>

</head>

<body bgcolor="#000000">

<p><font face="Arial" size="4" color="#C0C0C0"><strong>Button trick using Table and image

with standard Text for Hyperlink</strong></font></p>

<p> </p>

<div align="left">

<table border="0" cellpadding="0" cellspacing="0" width="300" height="100" align="left"

bgcolor="#000000" style="margin-left: 0px">

<tr>

<td width="300%" background="images/yelbutton1.gif" height="50" valign="middle"

align="center" nowrap><a href="images/test_search_box.htm" style="text-decoration: none"><strong>THIS

IS A LINK</strong></a></td>

</tr>

<tr>

<td width="50%" height="50" background="images/yelbutton1.gif"><p align="center"><a

href="Test_Button_Table.htm" style="text-decoration: none"><font

face="Arial" size="3"><strong><em>THIS IS ANOTHER LINK</em></strong></font></a></td>

</tr>

</table>

</div>

<p> </p>

</body>

</html>

		See-Search Design tip These were created simply by using the original button and changing the RED/GREEN/BLUE content and the BRIGHTNESS/CONTRAST ratios. Bit like a stack of coloured blankets!