Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations derfloh on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Change background color onMouseOver 1

Status
Not open for further replies.
phototaker

phototaker

Technical User
Joined
Mar 6, 2001
Messages
126
Location
US
Is there any way to change the background color of a cell in a table on roll over? I really don't want to use image if necessary. Thanks in advance. Richard [bugeyed]
 
Sort by date Sort by votes
thread770-585150

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
DUH- I must of let my fingers get ahead of my brain on this post. CSS will do what I want because these are all links in a table. A:link A:visited A:over Thanks for the reply.
[hammer] Richard [hammer] [hammer] [hammer]
 
Upvote 0 Downvote
cool so u know what u need..so I assume u know how as well....if not then speak up >there are previous posts about CSS - links!
all the best!

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
Well I got it to work in IE but am having a problem keeping the Size of my table correct in netscape. the link is This page is going to be a header for a top frame which I have to keep as small as possible. Any help would be great. Thanks Richard [flip] [flip]
 
Upvote 0 Downvote
no need for <divs> layers....just use tables and u will be ok. CLEAN up your code and u will get:
==========================
<html>
<head>
<script language=&quot;JavaScript&quot;>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
<title>Build A Car</title>
<style type=&quot;text/css&quot;>
<!--
a:link {
color: #000000;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
background-color: #FFFFCC;
background-position: center center;
background-repeat: no-repeat;
}
a:hover {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
text-decoration: none;
background-attachment: fixed;
background-color: #FFFFFF;
background-position: center center;
}
a:active {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #FFFFCC;
}
a:visited {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 13px;
font-style: normal;
font-weight: bold;
color: #000000;
text-decoration: none;
background-color: #FFFFCC;
}
-->
</style>
</head>
<body bgcolor=&quot;#FFFFFF&quot; text=&quot;#000000&quot; vlink=&quot;#0000FF&quot; alink=&quot;#0000FF&quot; leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>
<table width=&quot;722&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;TOP_TABLE&quot;>
<tr>
<td align=&quot;center&quot;><img src=&quot;/image.jpg&quot; width=&quot;486&quot; height=&quot;48&quot;></td>
</tr>
</table>
<table width=&quot;772&quot; height=&quot;20&quot; border=&quot;1&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#FF0000&quot; bgcolor=&quot;#FFFFCC&quot; id=&quot;LINKS_TABLE&quot;>
<tr>
<td width=&quot;64&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/mapPage.htm&quot; target=&quot;_self&quot;>Map</a></td>
<td width=&quot;66&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/Your/2003NewVehicles.htm&quot; target=&quot;_self&quot;>New
Cars</a></td>
<td width=&quot;77&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot; target=&quot;_blank&quot;>Pre-Owned</a></td>
<td width=&quot;75&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/PrivacyPolicyAgreement.htm&quot; target=&quot;_self&quot;>Financing</a></td>
<td width=&quot;57&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/NissanService.htm&quot; target=&quot;_self&quot;>Service</a></td>
<td width=&quot;42&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/PartsSpecials.htm&quot; target=&quot;_self&quot;>Parts</a></td>
<td width=&quot;81&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/NissanQuick_Quote.htm&quot; target=&quot;_self&quot;>Quick
Quote</a></td>
<td width=&quot;74&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/managers.htm&quot; target=&quot;_self&quot;>Managers</a></td>
<td width=&quot;92&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;><a href=&quot;/salespeople.htm&quot; target=&quot;_self&quot;>Salespeople</a></td>
<td width=&quot;53&quot; height=&quot;20&quot; align=&quot;center&quot; class=&quot;nagiv&quot;> <a href=&quot;/index.htm&quot; target=&quot;_self&quot;>Home</a></td>
</tr>
</table>
</body>
</html>

========================================

All the best!
[noevil]

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
in Properties Tab:
use individual allignment of cells to allging &quot;things&quot; inside of them not the &quot;little allign button by the font options.
eg.
<td width=&quot;92&quot; height=&quot;20&quot; align=&quot;center&quot;><a href=&quot;
vs.

<td width=&quot;92&quot; height=&quot;20&quot;><div align=&quot;center&quot;><a href=&quot;
and now your page should look just about the same on both browsers
why add more code :-) right?

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
Thanks lebisol - I really appreciate that fix. I was wondering why the change of background color is only just behind the text and does not cover the entire cell that the word is in? [wavey3]Richard [wavey3]
 
Upvote 0 Downvote
no problem Richard!
Q:I was wondering why the change of background color is only just behind the text and does not cover the entire cell that the word is in
A:
because that is what u wanted (your CSS was structured in that way...I just edited it)....just the text links a.hoover etc.

now if you want the ENTIRE CELL background to change onMouseOver...well I gave u the link in the 1st post! ;-)

All the best!

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
hm hm some one has not gone through CSS class ;-) (nither have I LOL)
but:
in your case u either &quot;change onMouse over text&quot; or &quot;over cell&quot;.....the link above shows how to &quot;over cell&quot;
and my post here show how to &quot;over text&quot;
are u with me?
all the best!

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
Is the &quot;link above&quot; you are you talking about Thread770-583116? I followed that and it looks like I am not getting it. I am looking for Over text or Over Cell but guess I need to go to CSS class. Please advise if possible. Thanks Rihard [cry]
 
Upvote 0 Downvote
to change a cell

<td onmouseover=&quot;this.style.background='#444444'&quot; onmouseout=&quot;this.style.background='#original color'&quot;>

to change link just use your classes

a.one
a.one:hover
a.two
a.two:hover

blah...blah...blah

but you can keep it pure css if you want and make the cell say 300x100 and then just make the style have a background of the same color as a cell and give the link a box of 300x100 and then for hover have the same box dimensions and change the color to what you want the background to be.

thats how microsoft.com does it ... but they are slightly off in netscape but i dont think Bill cares (thats how i do it to if possible) i keep it in css and it throws off netscape layout a bit (by like 2 or 3 pixels). but i dont care about such small cosmetic problems im more worried about functionality

<signature>
sometime you just gotta say &quot;WHAT THE @#*% !!&quot;
</signature>
 
Upvote 0 Downvote
&quot;Over Cell&quot; and &quot;Over Link&quot; is not a literal....just used to explain the action of what happens....if it makes sense

do what deecee said (the thread I posted is the same as his suggestion)
====================
<td width=&quot;64&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#990000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;> <a href=&quot;/mapPage.htm&quot; target=&quot;_self&quot;>Map</a></td>
====================

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
Well, I sure am glad that it is Friday. I have been working on this for a while now and I am totally confused. I think I am not looking at this right, for some reason. I have gotten this far but netscape problems have returned and I can't seem to center the text. I know I can do this by using images but I need to know this stuff to save download time. Here is where I am at Thanks for your imput. I'll keep working on this. Richard [flush3] [wavey3]
 
Upvote 0 Downvote
LOL ...u REEEEEALY like those divs don't u....they are back at your page....was it too hard to copy what I pasted?
(can u tell that it is friday here to :) LOL)

&quot;and I can't seem to center the text. &quot;
:-( which part did u not understand about clicking in the cell and align-center? NOT selecting what is in the cell but on single click in the the middle of the word or a cell.....perhaps this weekend I can help u out with some video-tut if it comes to that....
anyhow
all the best!

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
Lebisol, old friend, I did copy and paste your posting and for some reason it did work in netscape as far as height but not correctly in IE. Next I would ask you to look at what I asked about in the first place &quot;change the background color of a cell&quot;. Granted it was Friday and I usually am brain dead by then but thought I had made it clear as to what I wanted the cell to do when it was crossed by a cursor.
I did single click inside the cell and also tried inside the word and set the alignment to center. It works in netscape but IE is still a problem. Hope you had a great weekend.
Richard [wavey]
 
Upvote 0 Downvote
hello Phototaker!
I had a decent weekend...but much like other weekends....it ended :)
don't worry about the friday ...god know I post things that made me wonder about my brain sometimes....that gray matter works on its own :)
Anyway...HERE is the page that should make u happy:
=====================copy-paste==============
<html>
<head>
<style type=&quot;text/css&quot;>
<!-- this CSS decoration is used to adjust the look of the text/links NOT the CELLS :) -->
.mylink{
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 12px;
font-style: normal;
color: #000000;
text-decoration: none;
}
</style>
<script language=&quot;JavaScript&quot;>
<!--
function MM_reloadPage(init) { //reloads the window if Nav4 resized
if (init==true) with (navigator) {if ((appName==&quot;Netscape&quot;)&&(parseInt(appVersion)==4)) {
document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}
MM_reloadPage(true);
// -->
//-->
</script>
<title>Build A Car</title>
<meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=iso-8859-1&quot;>
</head>
<body leftmargin=&quot;0&quot; topmargin=&quot;0&quot; marginwidth=&quot;0&quot; marginheight=&quot;0&quot;>
<table width=&quot;722&quot; height=&quot;48&quot; border=&quot;0&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; id=&quot;TOP_TABLE&quot;>
<tr>
<td align=&quot;center&quot;><img src=&quot;/image.jpg&quot; width=&quot;486&quot; height=&quot;48&quot; border=&quot;0&quot;></td>
</tr>
</table>
<table width=&quot;772&quot; height=&quot;20&quot; border=&quot;1&quot; align=&quot;center&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; bordercolor=&quot;#FF0000&quot; bgcolor=&quot;#FFFFCC&quot; id=&quot;LINKS_TABLE&quot;>
<tr>
<td width=&quot;64&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/mapPage.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Map</a></td>
<td width=&quot;66&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/Your/2003NewVehicles.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>New Cars</a></td>
<td width=&quot;77&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot; target=&quot;_blank&quot; class=&quot;mylink&quot;;>Pre-Owned</a></td>
<td width=&quot;75&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/PrivacyPolicyAgreement.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Financing</a></td>
<td width=&quot;57&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/NissanService.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Service</a></td>
<td width=&quot;42&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/PartsSpecials.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Parts</a></td>
<td width=&quot;81&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/NissanQuick_Quote.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Quick Quote</a></td>
<td width=&quot;74&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/managers.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Managers</a></td>
<td width=&quot;92&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;><a href=&quot;/salespeople.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Salespeople</a></td>
<td width=&quot;53&quot; height=&quot;20&quot; align=&quot;center&quot; onMouseOver=&quot;this.style.background='#FF0000'&quot; onMouseOut=&quot;this.style.background='#FFFFCC'&quot;>
<a href=&quot;/index.htm&quot; target=&quot;_self&quot; class=&quot;mylink&quot;>Home</a></td>
</tr>
</table>
</body>
</html>
=========================end copy====================

There u go!
All the best!

> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
lebisol - well that works almost perfect and there is just one ; that I had to delete on the pre-owned part- &quot;class=&quot;mylink&quot;;>Pre-Owned&quot; easy to fix. I changed
font-weight: bold; to match the other pages on the site. I just had one other problem and that is that in netscape the text was blue and underlined and doesn't show up bold and black, so I went in and created an a.link Css to make the link the same as the .mylink - Whew - I really do appreciate the effort to help me out and I think I learned something. I did have one other question - is &quot;this.style.background&quot; a html style? Thanks again. Richard [spin] [spin2]
 
Upvote 0 Downvote
hi Phototaker!
I honestly would not know the true definiton -if it belongs into HTML or CSS tags...my only HTML class was 5 yrs ago and when the Notepad was this THE editor ;-)
u could see the &quot;reference&quot; in DW and see what it comes up with....
all the best!

p.s. I excluded a.link and used .mylink so there is no confusion...but even better u took it a step more and TADA!


> need more info?
:: don't click HERE ::
 
Upvote 0 Downvote
lebisol - if I placed this navigation in a template and applied on several pages would it be possible to have the cell change to the mouseOver color when that linked page was the one viewed. Is that question clear or not, I hope so. Thanks again. Richard [yawn]
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

TonyDi29
  • Locked
  • Question Question
Remove Underline &amp; Change Color from Link Text
Replies
0
Views
239
TonyDi29
TonyDi29
sharkchaser
  • Locked
  • Question Question
css background not working ?
Replies
13
Views
502
Cheech
Cheech
Luvsql
  • Locked
  • Question Question
Missing brdr color properties
Replies
0
Views
124
Luvsql
Luvsql
sharkchaser
  • Locked
  • Question Question
Center image on HTML page and Background image in CSS
Replies
3
Views
298
traingamer
traingamer
lucidtech
  • Locked
  • Question Question
cfimage and JPEG color issue
Replies
0
Views
135
lucidtech
lucidtech

Part and Inventory Search

Sponsor

Back
Top