SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    SitePoint Zealot hpnadig's Avatar
    Join Date
    Sep 2003
    Location
    Bangalore
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Highlighting a <td>...

    how do I change the background (make it dynamic) of <td> when user places mouse pointer on it? and when clicked on it?

    I came upon a method where they've used 'onmouseover', 'onmouseout', etc and have written a function in javascript to replace the background color.

    <td onmouseover=(function.... ) >

    (I tried to find out how they've done on phpmyadmin.. but couldn't exactly get the method..
    Home Page| Blog | Gallery
    sys op & contributor @ kn wikipedia

    Still stuck with a stinky browser? Go get FireFox

  2. #2
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you do not care about (stupid) ie users, you can do it just with css:

    td { background: #00f; }
    td:hover { background: #f00; }

  3. #3
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most internet user are 'IE users'. If you want no users, that's the right attitude.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    table {
    	width: 600px;
    	height: 80px;
    	border-collapse: collapse;
    }
    
    td {
    	width: 50%;
    	height: 50%;
    	border: 1px black solid;
    	text-align: center;
    }
    
    a:link.cell, a:visited.cell, a:hover.cell, a:active.cell {
    	display: block;
    	width: 100%;
    	height: 100%;
    	background : purple;
    	font: 20px "comic sans ms";
    	color: purple;
    	text-decoration: none;
    }
    
    a:hover.cell {
    	background: violet;
    }
    
    
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    </tr><tr>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    </tr>
    </table>
    </body>
    </html>
    ::: certified wild guess :::

  4. #4
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Most internet users are stupid and use the worst browser ever. Ie just ignores w3c. This really sucks.

    just my 2 cents about ie...

  5. #5
    SitePoint Addict Scud's Avatar
    Join Date
    Jan 2002
    Location
    Los Angeles
    Posts
    222
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't mistake stupidity with un-educated. Many people are not educated in other browser options. Don't blame them, blame Microsoft.

  6. #6
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Everybody who is engaged in designing websites, should know about w3c.
    But they don't care about the standards. "it looks good with ie, thats all i need".
    Yes ok to call them stupid may be a bit hard, but sometimes i really become angry.

  7. #7
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by deluks
    Most internet users are stupid and use the worst browser ever. Ie just ignores w3c. This really sucks.

    just my 2 cents about ie...
    Welll...someday - when you've got more than 2˘ on the line - you might become less obsessed with 'standards' - and more with 'eyeballs'. :
    ::: certified wild guess :::

  8. #8
    SitePoint Member deluks's Avatar
    Join Date
    Oct 2003
    Location
    Munich (Germany)
    Posts
    19
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if ie interpretated valid css as good as mozilla or opera does, there wouldn't be any incompatibilities between a website and the different browsers

  9. #9
    SitePoint Addict
    Join Date
    Sep 2003
    Location
    CA
    Posts
    264
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    but until it does, here we are..

  10. #10
    SitePoint Zealot hpnadig's Avatar
    Join Date
    Sep 2003
    Location
    Bangalore
    Posts
    174
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by BoldScripts
    but until it does, here we are..
    well, we need not wait for it to change.. infact, we should change! ( change our browser
    Home Page| Blog | Gallery
    sys op & contributor @ kn wikipedia

    Still stuck with a stinky browser? Go get FireFox

  11. #11
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,263
    Mentioned
    115 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by deluks
    Everybody who is engaged in designing websites, should know about w3c.
    But they don't care about the standards. "it looks good with ie, thats all i need".
    Most companies/gov't agencies use IE X.X (may vary depending on the company) as their standard and that's what they expect their sites to be coded to work with. Working with standards is great, but you still need to meet your minimal requirements of the organization you work with.
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  12. #12
    SitePoint Zealot lord's Avatar
    Join Date
    Nov 2003
    Location
    sLOVEnia
    Posts
    117
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Heya

    Nice trick
    Is it possible to do something like this on <tr> - line
    So when I move acros my table whole line will be colored/selected; not just the cell??

    thanx in advance & sitepoin roxs

    Quote Originally Posted by adios
    Most internet user are 'IE users'. If you want no users, that's the right attitude.
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title></title>
    <style type="text/css">
    
    table {
    	width: 600px;
    	height: 80px;
    	border-collapse: collapse;
    }
    
    td {
    	width: 50%;
    	height: 50%;
    	border: 1px black solid;
    	text-align: center;
    }
    
    a:link.cell, a:visited.cell, a:hover.cell, a:active.cell {
    	display: block;
    	width: 100%;
    	height: 100%;
    	background : purple;
    	font: 20px "comic sans ms";
    	color: purple;
    	text-decoration: none;
    }
    
    a:hover.cell {
    	background: violet;
    }
    
    
    </style>
    </head>
    <body>
    <table>
    <tr>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    </tr><tr>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    <td><a class="cell" href="#" onclick="return false">Hi there !</a></td>
    </tr>
    </table>
    </body>
    </html>

  13. #13
    SitePoint Wizard silver trophy
    Join Date
    May 2003
    Posts
    1,843
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Not without CSS2 (as in !MSIE ). Need JS:
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd">
    
    <html>
    <head>
    <title>untitled</title>
    <style type="text/css">
    
    th      {
             background: ghostwhite;
            }
    tr.out  {
             background: orange;
             cursor: pointer;
            }
    tr.over {
             background: darkorange;
             cursor: pointer;
            }
    
    td      {
             font: 16px verdana;
             color: #fff;
             text-align: center;
            }
    
    </style>
    <script type="text/javascript" language="javascript">
    
    function setTR_onmouseovers() //register handlers
    {
    	var row, rows, i = 0, feh = document.getElementById('feh');
    	rows = feh.rows;
    	while (row = rows.item(i++))
    	{
    		if (row.className == 'out') //all class="out" rows get this
    		{
    			row.onmouseover = function()
    			{
    				this.className = 'over';
    			}
    			row.onmouseout = function()
    			{
    				this.className = 'out';
    			}
    			row.onclick = function() //help yourself
    			{
    				alert('click');
    			}
    		}
    	}
    }
    
    onload = setTR_onmouseovers;
    
    </script>
    </head>
    <body>
    <form>
    <table id="feh" cellspacing="2" cellpadding="4" border="1">
    <thead>
    <tr>
    <th>header</th><th>header</th><th>header</th><th>header</th><th>header</th><th>header</th>
    </tr>
    </thead>
    <tbody>
    <script type="text/javascript" language="javascript">
    
    var count = 1;
    for (var iLoop = 0; iLoop < 8; ++iLoop) //saves space!
    	document.write (
    			'<tr class="out">' ,
    			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
    			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
    			'<td>cell ' + count++ + '</td><td>cell ' + count++ + '</td>' ,
    			'</tr>'
    			);
    
    </script>
    </tbody>
    </table>
    </form>
    </body>
    </html>
    Note: this will only work if your table is named "feh".
    ::: certified wild guess :::

  14. #14
    SitePoint Zealot johno's Avatar
    Join Date
    Sep 2003
    Location
    Bratislava, Slovakia
    Posts
    184
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Annotations support for PHP5
    TC/OPT™ Group Leader


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
  •