Results 1 to 6 of 6

Thread: TD background change with onclick, onmouseover and onmouseout

  1. #1
    Join Date
    Mar 2007
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default TD background change with onclick, onmouseover and onmouseout

    Hi John.

    As you said here is the DEMO to what I have done and it works to this point.

    As you notice I am making a pagination and all I want added to my demo is the onmouseover/onmouseout effect. You notice that when you click on "1" the background changes to a Dark Red color, now all I want is a onmouseover so that it changes to same background when you move your mouse over the TD cell and onmouseout back to white if not clicked.

    Code:
    http://www.desi-fun.com/demo.html
    Thanks

  2. #2
    Join Date
    Jul 2006
    Location
    Canada
    Posts
    2,581
    Thanks
    13
    Thanked 28 Times in 28 Posts

    Default

    now all I want is a onmouseover so that it changes to same background when you move your mouse over the TD cell and onmouseout back to white if not clicked.
    Doesn't it already do that?
    - Mike

  3. #3
    Join Date
    Mar 2007
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    It does but only once and that too for the link, once you click on the link it will not do it again. try the demo and click on one of the link it will not do it again. I want the wole TD CELL to have that onmouseover effect not just the link.

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,920
    Thanks
    43
    Thanked 3,187 Times in 3,151 Posts
    Blog Entries
    12

    Default

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <style type="text/css">
    .page, .pageon {
    border: 1px solid black;
    font-family: arial, verdana;
    font-size: 10px;
    font-weight: normal;
    color: #000000;
    overflow:hidden;
    }
    
    .page a, .pageon a {
    padding: 0 5px;
    color: #000000;
    display:block;
    width:100%;
    height:100%;
    }
    
    .pageon a {
    color: #FFFFFF;
    background-color: #C40000;
    }
    
    .page a:visited {
    color: #000000;
    }
    
    .pageon a:visited {
    color: #FFFFFF;
    background-color: #C40000;
    }
    
    .page a:hover, .pageon a:hover {
    color: #FFFFFF;
    background-color: #C40000;
    }
    
    .pageon {
    color: #FFFFFF;
    background-color: #C40000;
    }
    
    
    </style>
    
    <!--[if IE]>
    <style type="text/css">
    .page a, .pageon a {
    display:inline;
    }
    </style>
    <![endif]-->
    
    <script type="text/javascript">
    function toggleCells(el){
    rCells=document.getElementsByTagName('td');
    for (i = 0; i < rCells.length; i++)
    if (rCells[i].className=='pageon')
    rCells[i].className='page'
    el.className='pageon'
    }
    </script>
    </head>
    <body>
    
    <table align="center" cellpadding="0" cellspacing="2" border="1">
    <tr>
    <td class="page" onclick="toggleCells(this);"><a href="#">1</a></td>
    <td class="page" onclick="toggleCells(this);"><a href="#">2</a></td>
    <td class="page" onclick="toggleCells(this);"><a href="#">3</a></td>
    </tr>
    </table>
    </body>
    </html>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  5. #5
    Join Date
    Mar 2007
    Posts
    54
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    thank you so much John. I really appreciate your kind help.

  6. #6
    Join Date
    May 2006
    Location
    Sydney, Australia - Near the coast.
    Posts
    1,995
    Thanks
    0
    Thanked 8 Times in 7 Posts

    Default

    Hi John.
    Oh. (Hits the back button)
    Peter - alotofstuffhere[dot]com - Email Me - Donate via PayPal - Got spare hardware? Donate 'em to me :) Just send me a PM.
    Currently: enjoying the early holidays :)
    Read before posting: FAQ | What you CAN'T do with JavaScript | Form Rules | Thread Title Naming Guide

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •