Trying to make table clickable - Computer Programmers, Programming Forum

septrax · #1 12-06-2008

Hi

Im making my first website and i got stuck on one thing

Im trying to make a table with mouse over colour that also are are linked to different websites (forum in this case)

But the only thing i have done is

Its exact what i want exept there is no links and i just cant get them there to work without mess up everything else lol

Well here is the code i use

Code:

<html>
<head>
<title>Testing</title>
<style type="text/css">
td.off {
background: #CCCCCC;
}
td.on {
background: #999999;
}
</style>
</head>
<body>
<table width="150" cellpadding="3">
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
1 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
2 </font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
3</font></td>
</tr>
<tr>
<td class="off" onmouseover="this.className='on'"
onmouseout="this.className='off'"><font color="#000000" size="1" face="Verdana, Arial, Helvetica, sans-serif">Menu
4 </font></td>
</tr>
</table>
</body>
</html>

Any suggestion ?

RpgFan · #2 12-07-2008

Is there any reason for you to disregard the :hover pseudo-class? Consider this CSS:

Code:

table.hover_table a {
  color:#000;
  background-color:#CCC;
  font:Verdana,Arial,Helvetica,sans-serif 10px
}

table.hover_table a:hover {
  background-color:#999;
  text-decoration:none /* When you normally hover over a
                          link, you get an underline.  It
                          appears that you don't want that. */
}

with this HTML:

Code:

<table class="hover_table" width="150" cellpadding="3">
  <tr>
    <td><a href="menu1.html">Menu 1</a></td>
  </tr>
  <tr>
    <td><a href="menu2.html">Menu 2</a></td>
  </tr>
  <tr>
    <td><a href="menu3.html">Menu 3</a></td>
  </tr>
  <tr>
    <td><a href="menu4.html">Menu 4</a></td>
  </tr>
</table>

Does that do what you're wanting (except the links, of course... You'll need to link them to your pages, not made-up ones.

)?

septrax · #3 12-08-2008

Quote:

RpgFan originally posted:

Is there any reason for you to disregard the :hover pseudo-class? Consider this CSS:

Code:

table.hover_table a {
  color:#000;
  background-color:#CCC;
  font:Verdana,Arial,Helvetica,sans-serif 10px
}

table.hover_table a:hover {
  background-color:#999;
  text-decoration:none /* When you normally hover over a
                          link, you get an underline.  It
                          appears that you don't want that. */
}

with this HTML:

Code:

<table class="hover_table" width="150" cellpadding="3">
  <tr>
    <td><a href="menu1.html">Menu 1</a></td>
  </tr>
  <tr>
    <td><a href="menu2.html">Menu 2</a></td>
  </tr>
  <tr>
    <td><a href="menu3.html">Menu 3</a></td>
  </tr>
  <tr>
    <td><a href="menu4.html">Menu 4</a></td>
  </tr>
</table>

Does that do what you're wanting (except the links, of course... You'll need to link them to your pages, not made-up ones.

)?

Nah i just added cursor: pointer; to a certain spot and now it does what i want :P not css its html

RpgFan · #4 12-08-2008

Oh, I didn't realize you just wanted to change the cursor. Your topic and description said that you wanted to make things clickable, but your links weren't behaving the way you wanted them to.

Glad you got it sorted!

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Friends

Welcome to our forums...

Latest Posts

Forum Statistics

Partner Sites

Sponsor

Friends