PDA

View Full Version : hyperlink with text for link and also a background image also clickable



jasonc310771
Jan 22nd, 2009, 04:13 PM
i wish to have say an image which is behide a hyperlink and instead of the text being clickable to visit the link the background image is the clickable link.

for example the image could be 30px x 150px and if the mouse is hovering over the background images/links all of which are within tables how do i allow then to click the image and not just the text.

Excavator
Jan 22nd, 2009, 05:35 PM
Hello jasonc310771,
Something like this?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body {
font: 12px "Comic Sans MS";
background: #FC6;
}
* {
margin: 0;
padding: 0;
border: none;
}
#wrap {
width: 300px;
height: 56px;
line-height: 56px; /*vertically centers the text*/
margin: 30px auto; /*just moves this demo down and center*/
background: #999;
}
a:link {
float: left; /*so the text can go next to the image*/
margin: 0 10px 0 0; /*puts a little space between them*/
}
</style>
</head>
<body>
<div id="wrap">
<a href="http:codingforums.com"><img src="http://www.codingforums.com/images/buttons/reply.gif" width="109" height="56" alt="description" /></a> <p>http://codingforums.com</p>
<!--end wrap--></div>
</body>
</html>

jerry62704
Jan 22nd, 2009, 05:59 PM
Might not be a very good idea. When you use an image as a link you have to include other things so visually impaired people can "see" the link.

jasonc310771
Jan 22nd, 2009, 07:21 PM
yes ture.

just thinking about it i think the question i really need to be asking is...

can i have the complete TD of a table be a hyperlink ?

BoldUlysses
Jan 22nd, 2009, 07:30 PM
Try this:


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

<title>site 120</title>

<style type="text/css">

td {
width:50px;
height:15px;
background:#f0f;
}

td a {
display:block;
height:100%;
}

td a:hover {
background:#f00;
}

</style>

</head>

<body>

<table>
<tr>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
</tr>
<tr>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
</tr>
<tr>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
<td><a href="#"></a></td>
</tr>
</table>

</body>
</html>

Checks out in FF3 and Safari; should work in IE too. Only recommended for tabular data.