SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy Please help with CSS + transparencies!

    Hi All!

    I've been working on this problem for the last couple of days and i'm really mad and frustrated.. I'd be very happy if someone could help me out. Here's what I need:

    - i've got an image that has to look semi-transparent (Alpha(Opacity=50) i believe?) on page load
    - onMouseOver the image has to go to non-transparent(Op.=100) via the blendTrans filter (smooth animation like stuff)
    - onMouseOut the image has to go back to semi-transparent, again GRADUALLY!

    I can't make the alpha and blendTrans to work together. None of my javascripts work. Please write a working code, i'd SO MUCH APPRECIATE IT!!!

  2. #2
    SitePoint Guru siphilp's Avatar
    Join Date
    Nov 2001
    Location
    Fife, Scotland
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Post your code... give us something to look it.


    cheers


    Si

  3. #3
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Angry

    Here it goes..

    first I have the script for changing the filters:
    <SCRIPT LANGUAGE="JavaScript">
    function fadeOut() {
    fade.style.filter="blendTrans(duration=2)";
    if (fade.filters.blendTrans.status != 2) {
    fade.filters.blendTrans.apply();
    fade.style.visibility="hidden";
    fade.filters.blendTrans.play();
    }
    }
    function fadeIn() {
    fade.style.filter="blendTrans(duration=2)";
    if (fade.filters.blendTrans.status != 2) {
    fade.filters.blendTrans.apply();
    fade.style.visibility="visible";
    fade.filters.blendTrans.play();
    }
    }
    </SCRIPT>

    Then I've got the actual DIV with the image tag in it:
    <DIV id="fade">

    <IMG SRC="images/sidebutton.jpg" class="SideButton" name="SideLink1" style="top:300px; filter: Alpha(Opacity=50);" onMouseOver="fadeIn()" onMouseOut="fadeOut()" onClick="goToURL('parent','forum.html');return document.returnValue">
    </DIV>

    I've tried searching the net for an example, but couldn't find any!!? All I've seen was "morphing" from one image to another and changing the opacity using only blendTrans. Now, the question is.. CAN IT BE DONE?

  4. #4
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thumbs down

    So where are all the gurus?? Never knew it would be THAT hard for ya?

  5. #5
    SitePoint Guru siphilp's Avatar
    Join Date
    Nov 2001
    Location
    Fife, Scotland
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Calm down some of us have full time jobs I will have a look at this tonight for you. I am sure that this functionality only works on some browsers. Is this going to used for one browser or them all???



    Si

  6. #6
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking

    ok, i just thought that this thread was dead or smth
    Well, I guess our site will be primarly targeted at IE, since it's all in CSS.. And u know, netscape and CSS don't like each other that much
    Thanks

  7. #7
    SitePoint Addict mserms's Avatar
    Join Date
    Jun 2001
    Location
    Scotland
    Posts
    230
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE5/win and CSS don't like each other all that much either...

  8. #8
    SitePoint Member
    Join Date
    Sep 2002
    Posts
    9
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Still, I doubt that this can't be done!

  9. #9
    SitePoint Guru siphilp's Avatar
    Join Date
    Nov 2001
    Location
    Fife, Scotland
    Posts
    663
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    While i try and squeeze this beauty of a question in with my daily routine. Have a look at

    http://msdn.microsoft.com/workshop/a.../reference.asp

    Si


Bookmarks

Posting Permissions

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