Link must get other color if mouse over TD

[aepstar]

I have this table cell:

<td style="cursor: hand" onclick="launchURL('i.php')">
<a href="i.php" class="">My link</a>
</td>

In the external CSS file I have this class:

a.i:link { color: #003399 }
a.i:hover { color: #990033 }

As you see, if user clicks on the text or table cell he will be forwarded to i.php. However if user has mouse over the text link the link wil get other color. But not as he mouse overs the table cell.

What i want is that if user mouses over the table cell where the text link is that the text link gets the color specified in
a.i:hover { color: #990033 }

Many thanks to person who explains it to me.

[soccer362001]

Try using this.


<STYLE type="text/css">
<!--
A:link {color:whatever; background-color:whatever}
A:visited {color:whatever; background-color:whatever}
A:hover {color:whatever; background-color:whatever}
// -->
</STYLE>

[Jona]

<TD onMouseOver="this.style.backgroundColor='red'; this.style.color='blue';" onClick="launchURL('i.php');" style="cursor:hand;"></TD>


Jona

[aepstar]

yes yona, almost. what you do is making the table cell bg color different.

But i have the following:

table cell and text link in it. you click either on table cell or textlink you will get the same page = i.php. if you do mouseover textlink it will become red, if you do mouseover on td textlink does not change, and this is what i want. i want the text link to become red too even if you only mouse over the table cell in which the text link is. do i have to use id's instead of classes?

thanks

[Jona]

<style type="text/css">
<!--
A {color:blue;}
A:visited {color: purple;}
A:active {color: red;}
A:hover {color:red;}

A.mtd {color:;}
A:visited.mtd {color:;}
A:active.mtd {color:;}
A:hover.mtd {color:;}
-->
</style>

<TD>
<A href="i.php" class="mtd">Text link</a>
</TD>


Of course, you'll want to possibly change the mtd class's colors.

Jona

[aepstar]

sorry but its not the answer. please tell me what part you dont understand of this:

i have table cell and text link in it. you click either on table cell or textlink you will get the same page = i.php. if you do mouseover textlink the textlink will become red, if you do mouseover on tablecell the textlink does not change BUT i want the text link to become red too even if you only mouse over the table cell in which the text link is. do i have to use id's instead of classes?

[Jona]

<td onmouseover="this.firstChild.class='';"></td>


(This?)
Jona

[aepstar]

and what does it do? well, i made a webpage so you can look at it. and see what i mean. Thanks for being helpful.

the link: http://www.loltou.net/example1.php

you see if you mouse over in the yellow area the blue text link has to become red as if it is one big link - the td and link.

you understand? you link both elements (table cell and text link) to one same page. If u mouse over the textlink it will become red. If you mouse over the table cell textlink doesnt become red. And i want it to become red if you mouse over the yellow table cell.

thanks jona.

[Jona]

<TD onmouseover="this.firstChild.style.color='red';">
<a href="#">link</a>
</td>


Jona

[aepstar]

jona i love you, you're the best

one problem, it stays red. do i have to do this:
<TD onmouseover="this.firstChild.style.color='red';"
onmouseout="this.firstChild.style.color='blue';">
<a href="#">link</a>
</td>


i ll try

[Jona]

Originally posted by aepstar
[O]ne problem, it stays red. [D]o [I] have to do this:


Yes, that should work.

Jona

[aepstar]

it does, case closed

many many thanks

what would be world without peeps like you jona?

[Jona]

Originally posted by aepstar
[W]hat would be world without peeps like you [J]ona?

Starve? :p

:D Jona

[aepstar]

damn it, again lil' problem

as you said mona
this.firstChild.style.color = '#CC0000'

but i did the following:

function giveColor() {
this.firstChild.style.color = '#CC0000'
}

and in the table cell u put this

<td onMouseOver="giveColor();">link here</td>

this doesnt work, i get error that object is empty or something, but this works:

<td onMouseOver="this.firstChild.style.color = '#CC0000';">link here</td>

so cant i put this in a function?

thanks!

[Jona]

function giveColor(elem){
elem.firstChild.stylel.color="blue";
}
</script>

<TD onmouseover="giveColor(this);">
<a href="#">Click</a>
</td>


Jona

[zonegal]

Sorry if this has been posted already, but when I clicked on submit, it brought me back to the sign in page... and I checked the page, and there is no sign of my thread, so I guess I'll just re-post my question.

Hi! I have almost the same problem, except I want the background color of the table to change... so the whole row of the table, not just the background color of the link, like what Jona did earlier... I'll really appreciate the help! THanks! :)

[Jona]

<TD onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='red';">
<a href="#">MouseOver me!</a>
</td>


Jona

[zonegal]

Thanks a lot Jona!!! :)

[Jona]

You're welcome. :)

Jona

[aepstar]

u are sooooo smart jona!

[zonegal]

Jona, I need some more help. I tried the code that you told me, but unfortunately I have two columns in my row, and I want both of the columns to change background color at the same time when the mouse pass over. The reason I have two columns is because I don't want the text to be so closed to the edge of the table. So it's kind of give it some space, I don't know how else to make the text indent.

Here is my table code for you to review:
<table width="150" border="0" cellpadding="0" cellspacing="0">

<tr>
<td onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='red';" width="14" height="20" valign="top" bgcolor="#999999" >&nbsp;</td>
<td onmouseover="this.style.backgroundColor='blue';" onmouseout="this.style.backgroundColor='red';" bgcolor="#999999">Link 1 </td>
</tr>

</table>

Thanks a lot again for your help! Oh and how do I do the coding if I want the text color to be changed too on mouseover? Cos I just realised, it won't let me have two onmouseover syntax.
THanks! :)

[Jona]

<tr onmouseover="for(i=0;i<2;i++){this.childNodes[i].style.backgroundColor='red'; this.childNodes[i].style.color='blue';}" onmouseout="for(i=0;i<2;i++){this.childNodes[i].style.backgroundColor='blue'; this.childNodes[i].style.color='red';}">
<td>Text</td>
<td>Text</td>
</tr>


Jona

[zonegal]

Oh my goodness! You are so smart!!! Thanks a lot Jona!!! I was trying to search for the code while waiting for your reply, and was getting frustated cos can't find any. ANd I thought you won't be replying so soon since it's weekend now... but then you replied!!! Thanks again for saving my time!!! :)
ps. If you don't mind, what do you do for living? Web developer? Just curious... ;)

[Jona]

Yes, I'm a Web developer, but I'm only fourteen--so I don't have to worry about making a whole lot of money at the moment (although I do make quite a bit).

Jona

[zonegal]

Oh my gosh! you are only 14???? :o man! i'm so ashamed of myself now! :o
where did you learn all these stuffs? do you have your own website that I can check out? anyway good for you!!!

oh btw. I tried the code that you gave me, but the font color change doesnt work, because I have a css on all my text, so it just stay with the color of my style sheet...
do you know where I should i move it to? right now i'm putting it on my <td> so it looks like:

<tr onmouseover="for(i=0;i<2;i++){this.childNodes[i].style.backgroundColor='red'; this.childNodes[i].style.color='blue';}" onmouseout="for(i=0;i<2;i++){this.childNodes[i].style.backgroundColor='blue'; this.childNodes[i].style.color='red';}">
<td> </td>
<td><span class="body">Text</span></td>

</tr>


ok thanks a lot again! :)

[Jona]

My Web site link is in my signature, however I am creating a better look for my site and it's beta-look is here, (http://jagged-rocks.bravepages.com/new/index.html) if you'd like to see it (it looks a lot better without the popups, but oh well it's a free host, but soon I hope to get my own domain).

Also, for your code, I would try this:


<tr onmouseover="for(i=0;i<2;i++){
this.childNodes[i].style.backgroundColor='red';}
this.childNodes[0].style.color='blue';
thils.childNodes[1].childNodes[0].style.color='blue';"
onmouseout="for(i=0;i<2;i++){
this.childNodes[i].style.backgroundColor='blue';}
this.childNodes[0].style.color='red';
this.childNodes[1].childNodes[0].style.color='red';">
<td> </td>
<td><span class="body">Text</span></td>
</tr>


Jona

[zonegal]

uhmm... onmouseover, the text disappear? what should i do?

wow! very nice website btw!!! :) you create all those by yourself? hate the pops up tho... haha... :D

[zonegal]

whoops i found it, it's just a typo in the coding that you sent me... thanks anyway! :)

[Jona]

Have a link to the site you're doing this on?

Also, yes I did that site all on my own--except for the graphics. I asked a friend to do them for me because I don't have any graphic editing software at the moment available to me.

Jona

[zonegal]

Nope haven't put it up yet, still struggling to get those stupid tables to work, haha... :D it looks so simple too!!! i thought it'll be easy, but man... lucky i found you! :)

btw. just out of curiousity why wouldnt the first code that you gave me work? i think it's almost the same as the second one right? except the first one you used the for loop...

[Jona]

Well, the reason the first code didn't work was because it was getting the child nodes of the TR. We have the following:

TR (Parent)
TD (Child)
TD (Child)
SPAN (Grandchild)

Because the SPAN element is nested inside of the second TD, the TR only has two child nodes, and one of its child nodes (the second TD) has a child node, which is the parent's (TR) grandchild. So TR.childNodes[i] would be the two TDs, but not the SPAN inside the second TD. Instead, we call TR.childNodes[0] (first TD) and TR.childNodes[1] (second TD) and then use TR.childNodes[1].childNodes[0] to get the SPAN element inside of the second TD element. See? Quite simple. ;)

Jona

[zonegal]

errrrr???? :confused:
kinda get it a little bit only...

why can't span be the child too then? ah never mind, that sounds very dumb, isnt it? haha... :D

ok enough coding for today!! my brain is getting all tangled now... anyway, thanks again for your help!!! :)
hey did you study all these by yourself or you take classes?

[Jona]

I taught myself almost all of it. This forum helped me with two or three things, and I did get a book that taught me Regular Expressions, but other than that yes, I learned it all on my own.

Also, if you'd like me to go into further detail on why the SPAN element isn't considered a child of the TR element, you only need ask.

Jona

[zonegal]

dang... i thought i could take a break, and then i remember, i haven't tried to put a link on the text yet.. sure enough, it doesnt work anymore... :( now all i have is the blue text with underline on it..
arrghhh!!! can you pls help me again, so the text will have color other than the default??? thanks a million again! :)

sure, if you dont mind explaining the span stuff, i'd like to try to understand... :) thanks! :)
so how did you learn it on ur own? trial and error? man! you must love programming a lot...

[Jona]

If you put your page online and post a link to it, I'll write up an article for you. So you will get it eventually. :p

Jona

[zonegal]

I haven't gone to that level yet... so can't really put it up.. sorry... :( but anyway, I just want to put a link on the text, so it's something like this:
<tr onmouseover="for(i=0;i<2;i++){
this.childNodes[i].style.backgroundColor='red';}
this.childNodes[0].style.color='blue';
thils.childNodes[1].childNodes[0].style.color='blue';"
onmouseout="for(i=0;i<2;i++){
this.childNodes[i].style.backgroundColor='blue';}
this.childNodes[0].style.color='red';
this.childNodes[1].childNodes[0].style.color='red';">
<td> </td>
<td><span class="body"><a href://test.html>Link</a></span></td>
</tr>

i think this will be my last question, sorry about all the nagging... hehe... and again thanks a lot! :)

[Jona]

Tell you what I'll do. I'll write a tutorial on it and put it online. Expect a reply with a link by tomorrow midday. ;)

Jona

[zonegal]

all righty, i'll be waiting! :)
thanks again! :)

[Jona]

Sorry I took so long. Kinda got busy today--didn't realize it was Sunday either. lol. All right, here is the tutorial. (http://jona.t35.com/experiments/tableChildNodes_tutorial.html) Enjoy it! I hope you learn a lot from it!

Jona

[zonegal]

phew! that's a long one... thank you so much! still trying to digest what you wrote, hopefully will get it soon, haha... *can't concentrate* :mad:
anyway thanks a lot again! you're the best Jona! :D

[Jona]

A lot of times it takes a while to sink in, but you should get it eventually. If you have any other questions, you only need ask. I'm here all the time, so I hope what I've written will help you out a lot. Anyways, enjoy and have fun! You can never learn too much! :D

Jona

[zonegal]

whoa! verrrry complicated... what is this getElementsByTagName('A') do exactly?
don't really get this one. :confused:

[Jona]

Shall I write yet another article on the getElementsByTagName(), getElementsByName() and getElementById() methods of the document object? :D

What it does is it gets the tag name of any object. For example, if you said document.getElementsByTagName("TR")[0], the resulting object would be the first TR element in the page.

Jona

[zonegal]

??? :confused: ?? duh! :D
so what is that 'A' for? :o
sorrrrryy... you must feel like killing me now! :D

btw. i mentioned if i put my css, <span class=body1>, the text_color won't change... it only works on the link...

also all the text links will have their default blue/purple color for the first time, until i have my mouse over, then the color remains the same as the onmouseout code... any other way to avoid this? :p

thanks again! :)

[Jona]

The A refers to the A tag: <A>. For a link. It creates a link. That is the object we are referencing. And the tutorial should have provided enough information for you to figure out how to add another for() loop for your SPAN tags. ;)

Jona

[zonegal]

hmmm.... ic... Jona is sick of me... :(
ok, i'll try it myself... but if i cant get it to work, will u still help me out?
how about those link color when you first start the page, before you put your mouse over it (it'll give the default blue/purple)? is there anyway to make it the same color as onmouseout color (which i want it to be white)?
will the style sheet help?

thanks! thanks! thanks! :)

[zonegal]

hey Jona! I got the link coloring to work! so never mind about that one... :) yeah! :) thanks anyway! :)

will figure out the span loop other time.. cos dun really need it, luckily all my text is a link... phewww! double phew! :)

thank you so much again for your help!!!!!!!!!!!!

[Jona]

You're welcome. lol

Jona

[zonegal]

Jona! It's me again! :D Btw. do i need the noscript tag? if yes, how do I do it? thanks a lot! :)

[Jona]

Just curious if you have any instant messaging programs? Mine s/n's are all in my profile.

I don't think it's necessary to use a NOSCRIPT tag, just make sure your page works fine without JavaScript.

[J]ona

[getho]

Might be irellevant now but the best solution I've found to table cell rollovers is in CSS. The great plus is that no javascript makes them super friendly to search engines.

Heres where to go...

http://www.projectseven.com/tutorials/css_menus/list_01/index.htm

Getho

[Jona]

Well, it is to an extent irrelevant, since this is the JavaScript forum and the question is JavaScript related; but thank you for including your insight.

[J]ona

[zonegal]

thanks gheto, i'll keep this tutorial in mind when i decided to change... for now, i'll just stick with the js... i have put it in every of my page, dun really feel like changing to css anymore.. but thanks for the suggestion tho! :)

[Jona]

For compatibility, it is a better method, but it only works for links in IE.

[J]ona

[zonegal]

how come only IE? i have some css for my text, will those work in other browsers? havent tested in any besides IE... :p

[Jona]

If you have a link to the site, I can test it for you. But I'd suggest validating (http://validator.w3.org/) your site, and you might want to check out the CSS validator there, too. Anyways, if you use Getho's method, you'll end up with it working for users without Javascript, but it will only work for links. (If you do not have the <A> tag around them, it won't work in IE.) IE doesn't support HOVER on anything other than links.

[J]ona

[nkaisare]

For compatibility, it is a better method, but it only works for links in IE.
how come only IE? i have some css for my text, will those work in other browsers? havent tested in any besides IE
CSS hovers work for arbitrary elements in NS and Opera, but work only with links in IE. Hence, for hover to work, it has to be a link in IE.

However Jona, what you said about non-applicability of the CSS hover is not entirely true. If you have only a link in a table cell (as aepstar had), you coud have a {display: block} to make the hover appear for the entire table cell, not just the link text. Thats exactly what example in http://www.projectseven.com/tutorials/css_menus/list_01/index.htm does.

[Jona]

Yes, but that's not what I said (is it?). I said that it will only work for links in IE--not that it won't edit the table cell. Sorry if that wasn't clear there.

[J]ona

[nkaisare]

Based on ZG's reply, I thought that she misunderstood. It seemed she thought it works in IE only. I wanted to make it clear for the record (and as you correctly pointed out) that hover works in all browsers. However in IE, hover does not work on anything but links.

The second point was regarding changing background of a table cell. If the table cell contains only the link (as in aepstar's original question), you can set the link to display: block, so that the entire td will hover.

However, your reply to ZG's next question regarding hovering entire <tr> was absolutely correct... you ought to use javascript, for css alone can't do that in a straightforward way.

[Jona]

Originally posted by nkaisare
Based on ZG's reply, I thought that she misunderstood. It seemed she thought it works in IE only

It is possible she misunderstood my comments. I apologize for not being very clear, zonegal.

[J]ona

[nkaisare]

Originally posted by Jona
It is possible she misunderstood my comments. I apologize for not being very clear, zonegal.
Its also possible that I misunderstood that she misunderstood, although she may have already undesrtood; and you thought she understood and hence made the comment, due to which I misunderstood that you misunderstood that she misunderstood...
ad infinitum
Did you understand or misunderstand?
I need a coffee break :D

[Jona]

Originally posted by nkaisare
Did you understand or misunderstand?

Heh, believe it or not, I do. :)

[J]ona

[nkaisare]

This is an auto-response.
I am already out on a coffee break. :D

[zonegal]

hahaha! you guys are so funny!!! :p ok, i guess i misunderstood what Jona said... but then I didnt really know what I was asking too! hahaha... sorrrrrry for all the confusions but anyway thank you guys for being so helpful! :)

still working on the web, hopefully it'll be done by this week! *finger crossed*

[getho]

Originally posted by Jona
Well, it is to an extent irrelevant, since this is the JavaScript forum and the question is JavaScript related; but thank you for including your insight.

[J]ona

Does the scope of the forum really dictate how we should answer? Javascript is just a web tool, not a thing in and of itself. Is there a better tool for the job? I for one, would want to know.

Getho

[Jona]

Originally posted by getho
Is there a better tool for the job?

CSS and JavaScript are not in competition. The use of this thread is useless by this point. ;) JavaScript can be used where needed--if necessary, CSS can be used where JavaScript is found faulty; and vice-versa.

[J]ona