Fade cell background

Dev Shed Forums Sponsor:

November 12th, 2002, 08:33 AM

BadGuy

Designer

Join Date: Jan 2002

Location: Netherlands

Posts: 104

Time spent in forums: 3 h 22 m 16 sec
Reputation Power: 7

Fade cell background

I want to fade-in a color. I figured it could be done with the style:alpha(opacity()) property. but it does not work. And I have no idea why not. I'm not really an expert what JS is concerned. Any help would be appreciated.

Ow and I prefer not to use fadeing images. It should be possible to just fade the cell. Also if anyone knows a good way to make it go from white to the blue I want without using alpha that would also be good. But I just don't want to use an image.

This is my code

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<script language="JavaScript1.2">


function changeto(highlightcolor){
source=event.srcElement
if (source.tagName=="TR"||source.tagName=="TABLE")
return
while(source.tagName!="TD")
source=source.parentElement
if (source.style.backgroundColor!=highlightcolor&&source.id!="ignore")
source.style.backgroundColor=highlightcolor
source.style.filter = alpha.opacity(10)
}

function changeback(originalcolor){
if (event.fromElement.contains(event.toElement)||source.contains(event.toElement)||source.id=="ignore")
return
if (event.toElement!=source)
source.style.backgroundColor=originalcolor
}
</script>
<table width="100" border="0" cellspacing="2" cellpadding="0" onMouseover="changeto('00CCFF')" onMouseout="changeback('white')">
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
  <tr>
    <td>&nbsp;</td>
  </tr>
</table>
</body>
</html>

__________________
Programmer of a sort

November 13th, 2002, 02:53 AM

BadGuy

Designer

Join Date: Jan 2002

Location: Netherlands

Posts: 104

Time spent in forums: 3 h 22 m 16 sec
Reputation Power: 7

Worked something out

I worked out a microsoft example cranked the speed up and added some stuff I wanted to do... The page is in the original MSDN Style Sheet so you have been warned

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>BlendTrans Transition</TITLE>

<META NAME="AUTHOR" CONTENT="InetSDK">
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso8859-1">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">

<SCRIPT>
<!--
function fadeOut(obj) {
    obj.style.filter="blendTrans(duration=1)";
	// Make sure filter is not playing.
	if ((obj.visibility != "hidden")) {
        obj.filters.blendTrans.Apply();
        obj.style.visibility="hidden";
	    obj.filters.blendTrans.Play();
	}
}
function fadeIn(obj) {
    obj.style.filter="blendTrans(duration=1)";
	// Make sure filter is not playing.
	if ((obj.visibility != "visible")) {
      obj.filters.blendTrans.Apply();
      obj.style.visibility="visible";
	  obj.filters.blendTrans.Play();
	}
}
-->
</SCRIPT>

<STYLE>
body{ 
margin:20;
background:white;
font-family:verdana;
font-size:80%;
}
.bar{
background:#336699;
width:100%;
height:30px;
border-top:1px solid #99CCFF;
border-bottom:1px solid #000000;
}
.title{
font-size:15pt;
color:white;
padding-left:10px;
}

a:link
{
text-decoration:none;
color:white
}
a:visited
{
text-decoration:none;
color:white
}
a:active
{
text-decoration:none;
color:white
}
a:hover
{
text-decoration:none;
color:yellow
}
</STYLE>

</HEAD>

<BODY STYLE="font-family:verdana; font-size:9pt">

<DIV CLASS="bar title">
BlendTrans Transition
</DIV> 
<H3>This example shows how to create a fade effect with the <B>BlendTrans</B> transition.</H3>


<P>Click the buttons below the text to cause the text to fade in and out.</P>

<DIV ID="oDiv" STYLE="width:250; color:#CC00CC">This text can be faded in and out.</DIV> 
<P>
<BUTTON onclick="fadeOut(oDiv)" STYLE="background-color: blue; color: white">Fade Text Out</BUTTON>&nbsp;
<BUTTON onclick="fadeIn(oDiv)" STYLE="background-color: blue; color: white">Fade Text In</BUTTON>
</P>
<P>Click the buttons below the image to cause the image to fade in and out.<BR/>

Wait until one transition is complete before reversing it.

</P>
<IMG ID="oImg" SRC="sphere.jpg" onMouseOver="fadeOut(oImg)" onmouseout="fadeIn(oImg)"></IMG>
<P>
<BUTTON onclick="fadeOut(oImg)" STYLE="background-color: red">Fade Image Out</BUTTON>&nbsp;
<BUTTON onclick="fadeIn(oImg)" STYLE="background-color: red">Fade Image In</BUTTON>
</P>
<table ID="tabel" width="500" border="0" cellspacing="2" cellpadding="0">
  <tr>
    <td ID="tabeltext" width="50%" onMouseOver="fadeOut(tabeltext)" onMouseOut="fadeIn(tabeltext)">Blaat dit roleert</td>
    <td ID="tabelachtergrond" onMouseOver="fadeOut(tabelachtergrond)" onMouseOut="fadeIn(tabelachtergrond)" bgcolor="#0099FF"><div id="divje">Blauwe achtergrond! :)</div></td>
  </tr>
</table>
<P>
<BUTTON onclick="fadeOut(tabel)" STYLE="background-color: green">Fade Table out</BUTTON>&nbsp;
<BUTTON onclick="fadeIn(tabel)" STYLE="background-color: green">Fade Table In</BUTTON>
</P>
<BR/>

<HR>
<P>[To view source code, right-click in the window.]</P>


</DIV> 
<DIV CLASS="bar" STYLE=" padding:5px; padding-left:10">
Not copy righted by microsoft example heavily ****ed up by BadGuy
</DIV> 

</BODY>
</HTML>

This is the sphere that is used. I just linked it to the original microsoft sphere

[edit]
(image tags don't work?)
[/edit]

Also note that I ripped out a check that looks if the transistion is going on. this will make it look a bit weird... but it works

and that's all that matters. Note the text also fades in the table so I haven't really done what I wanted but still I can just move a div over it with the text in it.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: