PDA

View Full Version : td transparant on hover

sjeijk
08-17-2004, 02:50 PM
Hi i want 3 different td to change to transparant when hover over just one is that possible with javascript?
coothead
08-17-2004, 04:51 PM
Hi there sjeijk,

yes it is possible, try this...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title>transparent td</title>
<meta http-equiv = "Content-Type" content = "application/xhtml+xml; charset = utf-8" />
<style type = "text/css">
/*<![CDATA[*/

body {
background: #00ff00;
}
#container {
width: 312px;
margin: auto;
}
#tbl {
border: solid 1px #000000;
background: #999999;
}
.cell {
width: 100px;
height: 100px;
border: solid 1px #000000;
}
#one {
background: #ff0000;
}
#two {
background: #ffffff;
}
#three {
background: #0000ff;
}

/*//]]>*/
</style>


<script type = "text/javascript">
//<![CDATA[

function cellChange(el) {
el.style.background = "transparent";
var td=document.getElementsByTagName("td");
for(i=0; i<td.length; i++) {
var cell = td[i];
cell.style.background = "transparent";
}
el.onmouseout=function() {
el.style.background = "#999999";
td[0].style.background = "#ff0000";
td[1].style.background = "#ffffff";
td[2].style.background = "#0000ff";
}
}

//]]>
</script>

</head>
<body>

<div id = "container">
<table id = "tbl" onmouseover = "cellChange(this)"><tr>
<td class = "cell" id = "one"> </td>
<td class = "cell" id = "two"> </td>
<td class = "cell" id = "three"> </td>
</tr></table>
</div>

</body>
</html>

I have used colors in this exampe but you could just as well use images.
sjeijk
08-18-2004, 09:37 AM
hi thanks,
but i've got to make about 10 different rows in a table. so 10 x 3. but when i scroll over just one of them they all turn transparant. is there a way to make them do it per 3? individual?
coothead
08-18-2004, 03:05 PM
Hi there sjeijk,
' is there a way to make them do it per 3? '
Well, I haven't found a neat way of doing it yet :o
While I think about it some more, try this...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>transparent td</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/

body {
background:url(http://hstrial-dbayly.homestead.com/files/anim2.gif);
}
#container {
width: 100%;
margin: auto;
}
#tbl {width:100%;
border: solid 1px #000000;
background: #000000;
}
.cell {
width: 33.33%;
height: 56px;
border: solid 1px #000000;background:#000000;
}
#one,#one1,#one2,#one3,#one4,#one5,#one6,#one7,#one8,#one9 {
background: #ff4554;
}
#two,#two1,#two2,#two3,#two4,#two5,#two6,#two7,#two8,#two9 {
background: #d93b48;
}
#three,#three1,#three2,#three3,#three4,#three5,#three6,#three7,#three8,#three9 {
background: #b33038;
}

/*//]]>*/
</style>


<script type="text/javascript">
//<![CDATA[

function cellChange(id1,id2,id3,col1,col2,col3) {
document.getElementById('tbl').style.background="transparent";
document.getElementById(id1).style.background="transparent";
document.getElementById(id2).style.background="transparent";
document.getElementById(id3).style.background="transparent";

document.onmouseout=function() {
document.getElementById('tbl').style.background="#000000";
document.getElementById(id1).style.background=col1;
document.getElementById(id2).style.background=col2;
document.getElementById(id3).style.background=col3;
}
}

//]]>
</script>

</head>
<body>

<div id="container">
<table id="tbl">
<tr onmouseover="cellChange('one','two','three','#ff4554','#d93b48','#b33038')">
<td class="cell" id="one"> </td>
<td class="cell" id="two"> </td>
<td class="cell" id="three"> </td>
</tr>
<tr onmouseover="cellChange('two1','three1','one1','#d93b48','#b33038','#ff4554')">
<td class="cell" id="two1"> </td>
<td class="cell" id="three1"> </td>
<td class="cell" id="one1"> </td>
</tr>
<tr onmouseover="cellChange('three2','one2','two2','#b33038','#ff4554','#d93b48')">
<td class="cell" id="three2"> </td>
<td class="cell" id="one2"> </td>
<td class="cell" id="two2"> </td>
</tr>
<tr onmouseover="cellChange('one3','two3','three3','#ff4554','#d93b48','#b33038')">
<td class="cell" id="one3"> </td>
<td class="cell" id="two3"> </td>
<td class="cell" id="three3"> </td>
</tr>
<tr onmouseover="cellChange('two4','three4','one4','#d93b48','#b33038','#ff4554')">
<td class= "cell" id="two4"> </td>
<td class= "cell" id="three4"> </td>
<td class= "cell" id="one4"> </td>
</tr>
<tr onmouseover="cellChange('three5','one5','two5','#b33038','#ff4554','#d93b48')">
<td class="cell" id="three5"> </td>
<td class="cell" id="one5"> </td>
<td class="cell" id="two5"> </td>
</tr>
<tr onmouseover="cellChange('one6','two6','three6','#ff4554','#d93b48','#b33038')">
<td class="cell" id="one6"> </td>
<td class="cell" id="two6"> </td>
<td class="cell" id="three6"> </td>
</tr><tr onmouseover="cellChange('two7','three7','one7','#d93b48','#b33038','#ff4554')">
<td class="cell" id="two7"> </td>
<td class="cell" id="three7"> </td>
<td class="cell" id="one7"> </td>
</tr>
<tr onmouseover="cellChange('three8','one8','two8','#b33038','#ff4554','#d93b48')">
<td class= "cell" id="three8"> </td>
<td class="cell" id="one8"> </td>
<td class="cell" id="two8"> </td>
</tr>
<tr onmouseover="cellChange('one9','two9','three9','#ff4554','#d93b48','#b33038')">
<td class="cell" id="one9"> </td>
<td class="cell" id="two9"> </td>
<td class="cell" id="three9"> </td>
</tr></table>
</div>

</body>
</html>
sjeijk
08-18-2004, 05:57 PM
thank you so much, this will do. though i will wait for your next reply i can imagine you come up with smart solution. i owe you one