homepage Welcome to WebmasterWorld Guest from 54.227.20.250
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Highlight two different TD's
css mouseover
sleepy_eye

10+ Year Member



 
Msg#: 4301531 posted 10:39 pm on Apr 20, 2011 (gmt 0)

Hi there
looking to change the background color on two <td> by mouseover on just one. They are not in the same row or column.

Or put another way, hover over one, its background changes color and another also.

I have so far
<STYLE>
<!--
.normal1 { background-color: #FFFFFF }
.highlight { background-color: #8888FF }
.highlightEURO45 { background-color: #CCCCCC }
//-->
</style>

<table bgcolor="#000000" width="371">
<tr bgcolor="#FFFFFF">
<td>UK</td>
<td onMouseOver="this.className='highlight'"
"className.highlightEURO45='normal1'"
onMouseOut="this.className='normal1'">8</td>
<td>9</td>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
<tr bgcolor="#CCCCCC">
<td><b>EURO</b></td>
<td><b>42</b></td>
<td><b>43</b></td>
<td><b>44</b></td>
<td class="highlightEURO45"><b>45</b></td>
<td><b>46</b></td>
<td bgcolor="#CCCCCC"><b>47</b></td>
</tr>
</table>

 

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4301531 posted 9:06 am on Apr 21, 2011 (gmt 0)

Hi there sleepy_eye,

here is an example that you may be able to adapt to your requirements...


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta name="language" content="english">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">

<title>mouse over cells</title>

<style type="text/css">
#mytable {
width:371px;
background-color:#000;
}
#tr0 {
background-color:#fff;
}
#tr0 td{
cursor:pointer;
}
#tr1 {
background-color:#ccc;
}
#tr1 td {
font-weight:bold;
}
.blue{
background-color:#88f;
}
.white {
background-color:#fff;
}
.grey {
background-color:#ccc;
}
</style>

<script type="text/javascript">

function init(){
var tds=document.getElementById('mytable').rows[0].cells;
for(var c=0;c<tds.length;c++) {
tds[c].number=c;
tds[c].onmouseover=function() {
var n=this.number;
if(n!=0) {
this.className='blue';
document.getElementById('cell-'+n).className='white';
this.onmouseout=function(){
this.className='white';
document.getElementById('cell-'+n).className='grey';
}
}
}
}
}
window.addEventListener?
window.addEventListener('load',init,false):
window.attachEvent('onload',init);

</script>

</head>
<body>

<table id="mytable">

<tr id="tr0">
<td>UK</td>
<td>8</td><td>9</td><td>10</td>
<td>11</td><td>12</td><td>13</td>
</tr>

<tr id="tr1">
<td>EURO</td>

<!--change these id numbers round to suit your requirements -->

<td id="cell-6">42</td><td id="cell-3">43</td><td id="cell-5">44</td>
<td id="cell-1">45</td><td id="cell-4">46</td><td id="cell-2">47</td>
</tr>

</table>

</body>
</html>

birdbrain

sleepy_eye

10+ Year Member



 
Msg#: 4301531 posted 8:57 pm on Apr 21, 2011 (gmt 0)

Wow that is it!
Thanks so much!

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4301531 posted 9:17 pm on Apr 21, 2011 (gmt 0)

No problem, you're very welcome. ;)

sleepy_eye

10+ Year Member



 
Msg#: 4301531 posted 8:22 pm on Apr 22, 2011 (gmt 0)

Thanks again birdbrain
Was wondering if I could ask you one last thing, how would that work if I had another row above <tr id="tr1"> ?
Thanks

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 4301531 posted 8:40 pm on Apr 22, 2011 (gmt 0)

Hi there sleepy_eye,

If you mean another row between <tr id="tr0"> and <tr id="tr1">, it would not effect the script.

If you mean another row before <tr id="tr0"> then you would need to change this...
var tds=document.getElementById('mytable').rows[0].cells;

...to this...
var tds=document.getElementById('mytable').rows[1].cells;

birdbrain

sleepy_eye

10+ Year Member



 
Msg#: 4301531 posted 9:59 pm on Apr 28, 2011 (gmt 0)

Hi birdbrain
Thanks so much, I figured it out :)
Thanks again

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved