Solved

onmouseover cell color

Posted on 2014-03-04
11
219 Views
Last Modified: 2014-03-17
I am trying to find out why my cell color will not change?

I put in the following:
<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='lightblue';" onMouseout="this.bgColor='';" style="width: 75px">open</td></a>
0
Comment
Question by:Matt Pinkston
  • 4
  • 3
  • 2
  • +2
11 Comments
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39903149
quote problems?
<a target="I1" href="inc_opportunities_open_intel.aspx">
<td class="style7" onMouseover="this.bgColor='lightblue'" onMouseout="this.bgColor='white'" style="width: 75px;">open</td>
</a>

Open in new window


HTH,
Dan
0
 

Author Comment

by:Matt Pinkston
ID: 39903183
No error but no change in colors

<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='lightblue'" onMouseout="this.bgColor='white'" style="width: 75px">open</td></a>
0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39903195
I think you need to use hex values. Tested this and it works:
<TR onMouseover="this.bgColor='#99AACC'" onMouseout="this.bgColor='#FFFFFF'">
0
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 

Author Comment

by:Matt Pinkston
ID: 39903205
no change
<a target="I1" href="inc_opportunities_open_intel.aspx"><td class="style7" onMouseover="this.bgColor='#99AACC'" onMouseout="this.bgColor='#FFFFFF'" style="width: 75px">open</td></a>
0
 
LVL 54

Expert Comment

by:Julian Hansen
ID: 39903207
I see  a couple of problems.

Wrapping a <td> in an <a> element is not a good idea. Rather put your <a> inside the <td> make it a block element and the height and width you want and then use CSS :hover to change the cell.
a {
	width: 75px;
}
a:hover {
	background: lightblue;
}

Open in new window

HTML
<table>
  <tr>
    <td>
      <a href="">one</a>
    </td>
    ...
  </tr>
  ...

Open in new window

0
 
LVL 34

Expert Comment

by:Dan Craciun
ID: 39903222
++ on Julian's solution. It's the way it's been done for the past 7 years or so.

But, if you're stuck on archaic systems behind corporate rules, you might need to do it old style.
If you can tell us the browser you're using to test your code, we could be of more assistance.

Dan
0
 

Author Comment

by:Matt Pinkston
ID: 39903251
Browser is IE11

On the second option you have to mouse over the word to click it, I want users to be able to click the box instead which is why we went the other route.
0
 
LVL 54

Accepted Solution

by:
Julian Hansen earned 500 total points
ID: 39903295
On the second option you have to mouse over the word to click it, I want users to be able to click the box instead which is why we went the other route.
That's why you make your <a> a block element so it fills the cell - that way you get the same effect without having to use bad markup and javascript to do what should be done through CSS
0
 
LVL 58

Expert Comment

by:Gary
ID: 39903747
Your original code works fine. The only way to break it is if the TD is not part of a table...
http://jsfiddle.net/GaryC123/5L5Pw/

Tho everything Julian says still holds true.
0
 
LVL 22

Expert Comment

by:Kim Walker
ID: 39904568
What's the doctype? bgcolor is not supported in HTML5 although I'd be surprised if IE11 didn't support it anyway.
0
 

Author Closing Comment

by:Matt Pinkston
ID: 39933962
excellent thanks
0

Featured Post

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

This article discusses four methods for overlaying images in a container on a web page
Find out what you should include to make the best professional email signature for your organization.
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

821 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question