changing cell background in table when onMouseOver [Archive]

Click to See Complete Forum and Search --> : changing cell background in table when onMouseOver

sean0michael

04-12-2005, 10:25 PM

I am making a calendar for myself, so this is just for a file on my computer, not a web page. However, I save it in html format so I can assess is from Firefox. I promise, if I ever get a web page, I will use styles, not tables!

Now, to the issue: I would like individual cells to change background color when I roll over them, but I am not sure how to accomplish this. I have tried various different techniques gathered from the other threads in this forum, but have not had any luck.

If this is even possible, can you help? Thank you very much

~Sean

BonRouge

04-12-2005, 10:43 PM

If it's just Firefox, it's easy :
td:hover {
background-color:red;
}
:)

sean0michael

04-12-2005, 11:02 PM

Thank you very much for your help. The code seems obvious now, but since I am new to this, I need help in placing this inside of the code.

I am assuming that this code must go somewhere inside the table scheme somewhere inside
<table>
<tr>
<td>
</td>
</tr>
</table>
But I'm not sure where to put it. Thank you for you help, now I just need a little more to get me where I'm going.

~Sean

BonRouge

04-12-2005, 11:24 PM

I assume you have a head to your page? I mean I don't know how much you actually know about html - maybe you made the calendar in Word or something and saved it as html... If you did do that, well, it's OK - even Word makes a reasonably-formed html page...

Anyway, the point is - you need to put this in the head of the document. Just paste it in before the closing head tag.

<style type="text/css">
td:hover {
background-color:red;
}
</style>

:)

sean0michael

04-13-2005, 02:02 AM

Thank you very much! It is working great!

~Sean

suceress

04-29-2005, 08:49 AM

Hi! I'm new here and I'm trying to get a similar effect for a menu on a webpage. I don't like using the image flip because it loads too slow and sometimes the images don't show up. Plus it's a pain to have to make images for each button.
I tried using the button effect and it worked but they start out gray and I can't get them sized or lined up the way I want.
So I decided I would like to use tables in which the cells represent the buttons. The cells alternate color. It starts with #FF9900 and every other one is #FFCC33. I want the link inside the cell to be black text that is not underlined. I would like the the cell to change to #2299FF onMouseOver and then return to it's original color onMouseOut.
I tried using the code listed as an example above in the page but it didn't work.
Other than in the style section, do I need to add any other code?
Any ideas?
Thanks in advance.

suceress

04-29-2005, 09:34 AM

Ack. I don't see an edit feature for my post... I found another post that explained how to make the cell change color onmouseover and it's working, but I'm pondering if it's possible to do something like that with the border around the cell to make it sort of look like a button. I'm also wondering if it's possible to make the whole cell the link rather than just the text inside it.
I would like the text inside to be black Arial font... How do I set that in the style sheet? I saw the  and used it, but I'm not sure what commands are used to tell it what font and color it should be. I'm still very new at this and my browser is being a pain and not wanting to load things for me. Very frustrating.
Thanks in advance for any input. I apologize if I'm being annoying.

Ok, NOW it's loading the icons to edit. *sigh* Did I mention my internet doesn't work well?
Anyways, I got color onMouseover. Decided I don't want border... I would like the entire cell to be the link not just the text. I also have other links on the page that I do not want the color/style rules to apply to. I only want these rules to apply to the table, and I want the table on every page.
So far this is just a snippet of what I have:
<HEAD>
<style type="text/css">
A:link{color:black; text-decoration:none; font-family:Arial, sans-serif; font-weight: bold}
A:active{color:black; text-decoration:none; font-family:Arial, sans-serif; font-weight: bold}
A:visited{color:black; text-decoration:none; font-family:Arial, sans-serif; font-weight: bold}
</STYLE>
</HEAD>
<BODY BGCOLOR="#000000">

<CENTER>
<FONT STYLE="Arial">
<TABLE BORDER="0">
<TR ALIGN="CENTER" VALIGN="MIDDLE">
<TD HEIGHT="20" WIDTH="100" BGCOLOR="#FF9900" onMouseOver="this.style.backgroundColor='#2299FF'" onMouseOut="this.style.backgroundColor='#FF9900'">
<A HREF="http://wywo-pitstop.tripod.com/index/index.html">Main</A>
</TD>

Any suggestions?

pickledsword

05-25-2005, 08:17 PM

to link an entire table cell, and have it change colors on mouseover,

<TD style="cursor:hand;" onClick="window.location.href='#'" onMouseover="this.style.backgroundColor='#FFFFFF';" onMouseout="this.style.backgroundColor='';">Click Here</TD>

however, a question i have is whether its possible to make the text inside of a cell change color while mouseovering the CELL, not the text itself.

BonRouge

05-25-2005, 08:42 PM

You don't need javascript for this.

http://bonrouge.com/br.php?page=tablemenus