Table colour and mouse over and links :P

Discussion in 'HTML & Website Design' started by obeegoone, Dec 6, 2008.

  1. #1
    Hi

    Im changing my block but it dosent going so well lol or it does but im stuck

    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
    [​IMG]

    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

    <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> 
    Code (markup):
    Any suggestions ?
     
    obeegoone, Dec 6, 2008 IP
  2. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #2
    Hi there :)

    You need to add:

    onclick="window.location.href='http://www.websitehere.com'"
    Code (markup):
    So your new code would look like:

    <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 onclick="window.location.href='http://www.websitehere.com'" 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 onclick="window.location.href='http://www.websitehere.com'" 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 onclick="window.location.href='http://www.websitehere.com'" 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 onclick="window.location.href='http://www.websitehere.com'" 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>
    Code (markup):
    Hope this helps you out :D
     
    tobydawson13, Dec 7, 2008 IP
  3. obeegoone

    obeegoone Peon

    Messages:
    187
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Yeha man thanks it helped alot only thing is peopel cant see the links are clickable :p

    I found something about to make so its a hand over the link but not sure how to insert it anyhow here is the whole code the guy wrote (only want the hand over links cursor)

    td colspan="9" valign="top" bgcolor="#CCCCCC" align="center" onClick="document.location.href='http://www.google.com';" style="cursor:pointer;cursor:hand"><strong>PUBLIC SECtoR <br>
    Technical Services</strong><br> 
    Code (markup):
     
    obeegoone, Dec 7, 2008 IP
  4. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #4
    Add this to your style tags:
    cursor: pointer;
    Code (markup):
    So you style tags now look like:

    <style type="text/css">
    td.off {
    background: #CCCCCC;
    }
    td.on {
    background: #999999;
    cursor: pointer;
    }
    </style>
    Code (markup):
    Rep would be appreciated :)
     
    tobydawson13, Dec 7, 2008 IP
  5. obeegoone

    obeegoone Peon

    Messages:
    187
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #5
    wow man thanks :D

    rep added :) (dident even know you could give rep :p)
     
    obeegoone, Dec 7, 2008 IP
  6. tobydawson13

    tobydawson13 Active Member

    Messages:
    645
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    60
    #6
    No Problem :D
     
    tobydawson13, Dec 7, 2008 IP