Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Change color + Transparency

    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

  • #2
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    <td width="130" bgcolor="#F4F4FF" onmouseover="this.style.backgroundColor='#EEEEFF' onmouseout="this.style.backgroundColor='#F4F4FF'" style="filter:alpha(opacity=10)">

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #4
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    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)">

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #6
    Senior Coder Nightfire's Avatar
    Join Date
    Jun 2002
    Posts
    4,266
    Thanks
    6
    Thanked 48 Times in 48 Posts
    Looks like we'll have to wait till the pro's come out. No good with this sort of stuff Sorry

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts

    I'm no Pro!

    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/...e.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...


    <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.
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·

  • #8
    Regular Coder
    Join Date
    Jun 2002
    Location
    London, UK
    Posts
    127
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Beyond Lament
    Posts
    424
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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...l_filter_image
    Quíet Storm Designs ~ Art is not what you see, but what you make others see.
    · the Storms· || ·Ultraviolent Winter· || ·Was Einstein Wrong?· || ·It´s About Time!·


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •