SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Talking PNG images, alpha filtering, IE, and onMouseOver background-image -change

    This is way out of my league :)

    I desperate need help and advice with this. I try to make table with onMouseOver -background-image changes. Problem comes when i use PNG-files with IE5.5 and IE6 (Where is no alpha support for PNG -files).

    Alpha transparent works, when I add this inside <td>-tag:
    style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='image1.png'");

    Problem comes when I add some javascript...
    When I put mousepointer over table cell, bg-image changes, but without alpha-filtering. So is it possible to "run" that alpha-filtering in javascript? I hope you understood.... :D


    Here is whole thing:
    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
     <HEAD>
    
    <script type="text/javascript">
    function changeBG (image, id) {
    	var element = document.getElementById(id);
    	element.style.backgroundImage = "url("+image+")";
    }
    </script>
    
     </HEAD>
    
     <BODY>
    
    <TABLE width="10" height="10">
     <TR>
      <TD id="id1" width="10" height="10"
      style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=true, sizingMethod=scale, src='image1.png'");
      onMouseOver="changeBG('image2.png', 'id1');"
      onMouseOut="changeBG('image1.png', 'id1');">
      </TD>
     </TR>
    </TABLE>
    
    
     </BODY>
    </HTML>

  2. #2
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Something like:

    element.runtimeStyle.filter = "progidXImageTransform.Microsoft." +
    "AlphaImageLoader(enabled=true, src='image1.png',sizingMethod='scale')";


    But how I get that and this work together?:

    element.style.backgroundImage = "url("+image+")";

  3. #3
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Forget all that messy bloated code, and use these two HTC files instead.

    http://www.xs4all.nl/~peterned/csshover.html (also has instructions on how to use HTC files)
    http://www.twinhelix.com/css/iepngfix/ (use the 2.0 alpha)

    Then use some good old fashioned CSS to handle the rollover states via :hover (which will now work in IE 5/6 with the first of the two HTC files).

  4. #4
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for really interesting links, Dan!
    I tested that iepngfix 2.0 and it worked, but unfortunally it was way too slow for my purpose (with onmouseover and background-repeat)

    Somebody told me that it's not possible to make mouseover effect with CSS like I want it. I need to change 3 different table cell's background-images same time when mouse pointer is over any of those 3 cell's (menu button). I don't know is it possible or not.

    I still think my first way to do this is good enought.. if I only know how to add that IE alpha filtering with element.style.backgroundImage in javascript.

    I bet that nobody answers anymore

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Are you using two separate images for the rollover or one image with the default and hover state combined? I've found that you can get a significant speed boost if you use one image with both states combined (but one out of view); I'm not sure how well that would work in your case though since you're using PNG-24 images here.

  6. #6
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually I use three different images on default and three different images on hover state, so altogether six different images.
    default: button_left_bg.png, button_center_bg.png, button_right_bg.png
    hover: button_left_bg_hover.png, button_center_bg_hover.png, button_right_bg_hover.png

    And this is because I don't want to limit link-text length (I repeat or stretch 'button_center_bg.png' and 'button_center_bg_hover.png' -bg images so I can make a "long button" too)

  7. #7
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What do your images look like? I have a few ideas on how you can improve the speeds, but I want to make sure what I'll be suggesting would be appropriate to your specific situation first.

    PS: You lost your bet.

  8. #8
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    heh! Yes I lost. Thank you for answering
    Images look really cool - lol.. and they are 24-PNG.
    Height is 10px and width's are 3px, 1px and 3px.

    This alpha filtering seems to work quite fast.. I didn't have any problems with speed even when I put 20 buttons and use filter. Only problem was that filtering didn't work with my elegant js-mouseover-code

  9. #9
    SitePoint Enthusiast
    Join Date
    Jan 2007
    Posts
    92
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What? Nobody knows now simple thing like this?


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
  •