Change color + Transparency

[dhtmlhelp]

Hi,

I have the following event for a table:

<td width="130" bgcolor="#F4F4FF" onmouseover="this.style.backgroundColor='#EEEEFF' onmouseout="this.style.backgroundColor='#F4F4FF'">

How to I add the event below onmouseout:

filter:alpha(opacity=10);


I have tried:

<td width="130" bgcolor="#F4F4FF; filter:alpha(opacity=10);" onmouseover="this.style.backgroundColor='#EEEEFF'" onmouseout="this.style.backgroundColor='#F4F4FF'">

but it gives me a black background when I display the table.

DHTMLHELP

[Nightfire]

<td width="130" bgcolor="#F4F4FF" onmouseover="this.style.backgroundColor='#EEEEFF' onmouseout="this.style.backgroundColor='#F4F4FF'" style="filter:alpha(opacity=10)">

[dhtmlhelp]

Hi Nightfire,

what you suggest will make the whole td opaque. All I want is the background colour (only on mouseout or when dispplayed the first time after loading the page) to be opaque. Any other suggestions?

DHTMLHELP

[Nightfire]

Oh ok, sorry.

Try using:

<td width="130" bgcolor="#F4F4FF" onmouseover="this.style.backgroundColor='#EEEEFF' onmouseout="this.style.backgroundColor='#F4F4FF';this.style.filter:alpha(opacity=10)">

[dhtmlhelp]

Hi Nightfire,

I have tried:

this.style.filter='alpha(opacity=10)'

but it gives me opacity of 10 for the whole td rather than only the bgcolor. Also it is activated only when onmouseover the first time.

could there be a solution?

DHTMLHELP

[Nightfire]

Looks like we'll have to wait till the pro's come out. No good with this sort of stuff :( Sorry

[Quiet Storm]

In order to have the background opacity at 10 and everything else at 100, you'll have to seperate it into two DIVs or TABLES.

A rough example:
http://www.angelfire.com/mo2/cbch21/2/TEST/2Table.Opacity.html

2 Tables with exact sizes and placements...

Background with z-index:1
Text with z-index:2 and background-color:transparent;

I don't think the onMouseOver will work, though... maybe...
:confused:

<TABLE NAME="bgnd"......
<TABLE NAME="text"......

(Link on TABLE "text")
<A HREF="#" onMouseOver="bgnd.style.backgroundColor='#EEEEFF' ">LINK</A>


I'm sure that example won't work, but maybe someone here can fix it. :)

[dhtmlhelp]

Does anyone know of any other alpha attribute other than opacity. For example style.filter='alpha(transparency=10)'. The attribute transparency hasn't worked, hope someone knows an alternative.

DHTMLHELP

[Quiet Storm]

Oops... almost forgot:

Because of a bug in IE, you'll have to also assign the width attribute in order for it to show up:

<STYLE="width:150px; Filter:alpha(Opacity=50);">

Sorry, forgot to meantion it before. :)

http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_filter_image