SitePoint Sponsor |
|
User Tag List
Results 1 to 21 of 21
-
May 31, 2002, 17:15 #1
- Join Date
- May 2002
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Ho to highlight a row of a table onMouseOver?
Hi All,
Any1 out there is ready to sho me how to Make a row of a table highlight when mouse over?
If I have the following table for example what code should I add?
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
<tr>
<td width="20%"> </td>
<td width="80%"> </td>
</tr>
</table>
-
May 31, 2002, 17:28 #2
- Join Date
- Feb 2002
- Location
- Pennsylvania, USA
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Hey tammara. You are going to want to use CSS for this I do believe:
This goes in the <head> section of your document:
Code:<STYLE TYPE="text/css"> <!-- A:link { background-color: transparent;} A:visited { background-color: transparent;} A:hover { background-color: #ff6633;} A:active { background-color: transparent; } --> </STYLE>
Last edited by teknikewl; May 31, 2002 at 17:33.
-
May 31, 2002, 17:35 #3
- Join Date
- May 2002
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanx Bryan,
But this didn't help me much!
What if the row dosn't include a link?
and the above code would affect the entire links on the page! wouldn't it?!
I onlly want to affect the row of a table! any idea of how doing this?
thanx
-
May 31, 2002, 18:21 #4
- Join Date
- Feb 2002
- Location
- Pennsylvania, USA
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
This is true! Im not sure it can be done with out creating a link.....BUT I have been known to be wrong!!!
I will see if I can find it.
If they were links you could always just assign a class to the A:LINK and such. I think it would be like A:link.cell or A.cell:link then <a class="cell" href="blabblahblah>....</a> but that still would only affect the text if it were a link. Sorry if that doesn't help much either!
-
May 31, 2002, 18:28 #5
- Join Date
- Aug 2001
- Location
- Los Angeles
- Posts
- 51
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try this, it will heighlight the first cell
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td name="cell1" width="20%" id="td1" onMouseOver="document.all.td1.style.background = '#ff0000'" onMouseOut="document.all.td1.style.background = '#FFFFFF'">ccc </td>
<td width="80%">ccc </td>
</tr>
<tr>
<td width="20%">cc </td>
<td width="80%">cc </td>
</tr>
<tr>
<td width="20%">cc </td>
<td width="80%">cc </td>
</tr>
</table>Do you have a career or job related web site?
Earn 5 cents per click by joining our affiliate program.
Click Here
-
May 31, 2002, 18:39 #6
- Join Date
- Feb 2002
- Location
- Pennsylvania, USA
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Good work gekofish! I will store that one in my memory too!
-
May 31, 2002, 18:47 #7
- Join Date
- May 2002
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanx gekofish
You are great
your code will highlight only the cell not the entire row!
Is it possible to higlight the whole row?
If not I'll use the above code
love u :
-
May 31, 2002, 18:49 #8
- Join Date
- Mar 2001
- Location
- Mexico
- Posts
- 1,287
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by gekofish
Try this, it will heighlight the first cell
Paul
-
May 31, 2002, 19:15 #9
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
no it will not but this will. And i put a little error trapping in as well
PHP Code:
<script type="text/javascript">
function alter(what,col)
{
try
{
(what != null)? what.style.background = col : null;
}
catch(errorObject)
{
alert('what is not an obj\t error = ' + errorObject.description);
}
}
</script>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">1</td>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">4</td>
</tr>
<tr>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">2</td>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">5</td>
</tr>
<tr>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">3</td>
<td width="20%" onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">6</td>
</tr>
</table>
Last edited by Andrew-J2000; May 31, 2002 at 19:18.
-
May 31, 2002, 20:05 #10
- Join Date
- May 2002
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
hi andrew
thnx
Your code did prety the same as the one previuosly sugested! It only higlights the first cell!
it seems I should give up the whole row
thanx guys
-
May 31, 2002, 20:22 #11
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
it's only a matter of moving the onmouse over to the tr tag
PHP Code:<script type="text/javascript">
function alter(what,col)
{
try
{
(what != null)? what.style.background = col : null;
}
catch(errorObject)
{
alert('what is not an obj\t error = ' + errorObject.description);
}
}
</script>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%" id="AutoNumber1">
<tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">
<td width="20%">1</td>
<td width="20%">4</td>
</tr>
<tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">
<td width="20%">2</td>
<td width="20%">5</td>
</tr>
<tr onMouseOver="alter(this, 'orange')" onMouseOut="alter(this, '')">
<td width="20%">3</td>
<td width="20%">6</td>
</tr>
</table>
-
May 31, 2002, 20:27 #12
- Join Date
- May 2002
- Posts
- 65
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
thanx andew! you have just closed a very important chapter in HISTORY
no kiss avatars here? nevermind take this :-*
-
Jun 3, 2002, 19:16 #13
- Join Date
- Mar 2001
- Location
- Mexico
- Posts
- 1,287
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Thanks Andrew,
that's a really nice piece of code
-
Jun 3, 2002, 20:17 #14
- Join Date
- Aug 2001
- Location
- London
- Posts
- 2,475
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
i just wanted to make sure nothing dodgy can be put into the code
thx tho
-
Sep 19, 2002, 05:56 #15
- Join Date
- May 2002
- Location
- Atlanta, GA
- Posts
- 227
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
it's only a matter of moving the onmouse over to the tr tag
-
Sep 19, 2002, 06:57 #16
- Join Date
- Oct 2000
- Location
- Nashvegas Baby!
- Posts
- 7,845
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Try turning Javascript off and see.
Adobe Certified Coldfusion MX 7 Developer
Adobe Certified Advanced Coldfusion MX Developer
My Blog (new) | My Family | My Freelance | My Recipes
-
Sep 19, 2002, 09:13 #17
- Join Date
- Apr 2001
- Location
- Canada
- Posts
- 5,458
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
Originally posted by Eric1776
If a browser doesn't support JavaScript what would happen?
www.GUIstuff.com has a generator for mouse over TD's (or TR's in your case) that are also links. It doesn't work in NS though.Mike
It's not who I am underneath, but what I do that defines me.
-
Sep 19, 2002, 09:33 #18
- Join Date
- Sep 2002
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Nice work Andrew, but how can I get it to work if I'm using echo?
Ie.
echo("<tr valign='top'> \n");
echo("<td>$year</td>\n");
echo("<td>$cond</td>\n");
echo("<td>$workorder</td>\n");
I tried outting the onMouseover in the <tr ....
but kept getting a parsing error!
Thanks.
-
Sep 19, 2002, 13:06 #19
- Join Date
- Apr 2001
- Location
- Canada
- Posts
- 5,458
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
PHP Code:<?php
echo("<tr onMouseOver=\"alter(this, 'orange')\" onMouseOut=\"alter(this, '')\">\r\n");
?>Mike
It's not who I am underneath, but what I do that defines me.
-
Sep 20, 2002, 06:16 #20
- Join Date
- Sep 2002
- Posts
- 46
- Mentioned
- 0 Post(s)
- Tagged
- 0 Thread(s)
Outstanding!
Very well done! Works like a charm!
Thanks again!
-
Sep 21, 2002, 16:18 #21
- Join Date
- Apr 2001
- Location
- Canada
- Posts
- 5,458
- Mentioned
- 1 Post(s)
- Tagged
- 0 Thread(s)
You're welcome
Mike
It's not who I am underneath, but what I do that defines me.
Bookmarks