PDA

View Full Version : Change color + Transparency



dhtmlhelp
Jun 22nd, 2002, 12:04 PM
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
Jun 22nd, 2002, 04:08 PM
<td width="130" bgcolor="#F4F4FF" onmouseover="this.style.backgroundColor='#EEEEFF' onmouseout="this.style.backgroundColor='#F4F4FF'" style="filter:alpha(opacity=10)">

dhtmlhelp
Jun 22nd, 2002, 04:11 PM
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
Jun 22nd, 2002, 04:18 PM
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
Jun 22nd, 2002, 04:27 PM
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
Jun 22nd, 2002, 04:28 PM
Looks like we'll have to wait till the pro's come out. No good with this sort of stuff :( Sorry

Quiet Storm
Jun 22nd, 2002, 07:58 PM
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
Jun 22nd, 2002, 10:17 PM
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
Jun 22nd, 2002, 10:31 PM
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