Making a Cell a link

4WebHelp Addict Joined: 07 Jan 2002 Posts: 1060

I know this sounds silly, but I currentley have a cell, with a logo in, and a tagline below, but as this is a mixture of text and images, is there a way I can make a click anywhere in a cell to take you to the home page.

Or if this is not possible, what code would I need if I wanted to take the underline off the text link?

Team Member Joined: 06 Jan 2002 Posts: 2564

Take a look at some phpBB boards. Some of them have a hack that lets you click anywhere in the cell where the name of the forum is to access it.

For example: http://www.support.34sp.com/phpBB/

Look at the code, it should give you a clue.

4WebHelp Addict Joined: 07 Jan 2002 Posts: 1060

Still can't see how they do it Sad

, also that is a really old version of PHPBB, it looks sooooooooooooo outdated!

Posted: Tue Feb 19, 2002 8:35 am (22 years, 2 months ago)

Justin,

This is the bit of code they were using on that PHPBB. A combination of javascript and CSS. It doesn't work in Netscape 4.x on a Mac which probably means it won't work on the PC version either. IE should be fine though.

Darren

Quote:

<html>
<head>
<title>Test</title>

<style type="text/css">
<--
a { text-decoration: none}
a:link { text-decoration: none}
a:hover { text-decoration: underline}
-->
</style>

</head>
<body>

<table cellpadding="20">
<tr>
<TD height="30" BGCOLOR="#FF0000" onMouseOver="this.style.backgroundColor='#00FF00'; this.style.cursor='hand';" onMouseOut="this.style.backgroundColor='#FF0000';" onclick="window.location.href='linkhere.html'">Hello, <a href="linkhere.html">Click Here!</a> for more</td>
<tr>
</table>

</body>
</html>

Team Member Joined: 06 Jan 2002 Posts: 2564

Quote:

It doesn't work in Netscape 4.x on a Mac which probably means it won't work on the PC version either. IE should be fine though.

It will probably validate (it's valid HTML), but it won't work in all browsers.

4WebHelp Addict Joined: 07 Jan 2002 Posts: 1060

Then again, 97% of my visitors are IE, so if they use Netscape and Opera, they can go change!

WebHelper Joined: 08 Jan 2002 Posts: 69 Location: Ireland

Yes Andrew, it should validate fine. You could nearly write an entire Javascript code on one line and stick it into the onMouseOver (or others) event handler.

Of course it's tidier to place the code into it's own function in a script tag, and call the function from the event handler.

But it should work fine. Browser permitting of course.

Garth Farley

4WebHelp Addict Joined: 07 Jan 2002 Posts: 1060

No need for it now, got a decent Web Graphics Package

Junior WebHelper Joined: 24 Jan 2002 Posts: 6

Even If you don't need it now....I've got it....duh....

Code:

<html>
<head>
<title>Test</title>

<style type="text/css">
<--
a { text-decoration: none}
a:link { text-decoration: none}
a:hover { text-decoration: underline}
-->
</style>

</head>
<body>

<table cellpadding="20">
<tr>
<TD height="30" style="background:FF0000;cursor:text;" onMouseOver="background:#00FF00;cursorhand;" onMouseOut="bacground:#FF0000;" onclick="javascript:window.location.href='linkhere.html'" >Hello, <a href="linkhere.html">Click Here!</a> for more</td>
<tr>
</table>

</body>
</html>

Junior WebHelper Joined: 10 Oct 2002 Posts: 49

The answer to Justin's last question is to use some code to affect the style of links by using something like this either inline, between style-tags or in an external style sheet:
text-decoration:none;

With respect to his first question, here's the code which I've highlighted in blue, this being a modification of the code that Daniel refers to. Two points: 1) this will work on IE 4 and higher since it uses DHTML but it won't work on Netscape 4.07 -- I'm not sure if it works on any version of Netscape; 2) Note: that this works b/c of the onclick event-attribute of the <td> which is assigned javascript that can take the user to another URL or even, as in this case, execute a javascript URL.

<head>
<title>Untitled</title>
<style>
.pretty {background:#cccccc;}
.good {background:#ffcccc; cursor:hand;}
</style>
<script>
var mess = "Hi!";
</script>
</head>

<body>
<table>
<tr>
<TD class=pretty height="33"
onMouseOut="this.className='pretty'"
onMouseOver="this.className='good'"
onclick="window.location.href='javascript: alert(mess)'">Sample Text</td>
</tr>
</table>

</body>