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 7 of 7
  1. #1
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts

    AlphaImageLoader PNG transparency for IE

    Does anyone know if the AlphaImageLoader script can be used in a CSS file?

    Code:
    <SCRIPT>
    var bToggle = 1
    
    <!-- Toggle the sizingMethod property to resize the image.  -->
    function fnToggle(oObj) {
        if (bToggle) {                                                        
            bToggle = 0;
            oDiv.filters(0).sizingMethod="image";
            oObj.innerText='Enlarge It';}
        else {
            bToggle = 1;
            oDiv.filters(0).sizingMethod="scale";
            oObj.innerText='Make Normal';}
    }
    </SCRIPT>
            
    <!-- This DIV is the target container for the image.  -->        
        <DIV ID="oDiv" STYLE="position:relative; height:250px; width:250px;         
            filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
                src='/workshop/graphics/earglobe.gif', sizingMethod='scale');" >
            </DIV>
    
    <BR><BUTTON onclick="fnToggle(this);">Make Normal</BUTTON>
    Or if anyone knows a better javascript for PNG transparency, that is compatible in a CSS file, please lemme know thanks

  • #2
    Senior Coder
    Join Date
    Nov 2003
    Location
    Minneapolis, MN
    Posts
    2,879
    Thanks
    2
    Thanked 65 Times in 56 Posts
    You are using it in a CSS file already. Sort of, anyway…you have it inline, but yes, you can move it to an external file:

    Code:
    #oDiv {
     position:relative;
     height:250px;
     width:250px;
     filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/workshop/graphics/earglobe.gif', sizingMethod='scale');
    }

  • #3
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Have a look at a previous thread PNG Transparency support in IE 5.5+, which may help you.
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #4
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I understand, and it makes sense, but its still not showing up correctly. heres my code

    index.html
    Code:
    <body>    
    <div id="indexContainer">
    	<div id="navBar">
     		<!-- large top nav bar words -->
        	<a id="consultingSolutions" href="pages/ConsultingSolutions_ProgramManagement.html" title="Consulting Solutions"><span></span></a>	
            <a id="pastResults" href="pages/PastResults.html" title="Results"><span></span></a>
            <a id="insight" href="pages/Insight.html" title="Insight"><span></span></a>
            <a id="clientsSay" href="pages/WhatClientsSay.html" title="What Clients Say"><span></span></a>
            <!-- large top nav bar arrows -->
            <a id="consultingSolutionsA" href="#" title="Consulting Solutions Arrow"><span></span></a>
            <a id="pastResultsA" href="#" title="Results Arrow"><span></span></a>
            <a id="insightA" href="#" title="Insight Arrow"><span></span></a>
            <a id="clientsSayA" href="#" title="What Clients Say Arrow"><span></span></a>
            <!-- small nav bar words -->
            <a id="home" href= "index.html" title="Home"><span></span></a>
            <a id="contact" href="" title="Contact"><span></span></a>
            <a id="about" href="pages/about.html" title="About"><span></span></a>
            <!-- small nav bar arrows -->
            <a id="homeA" href="#." title="Home Arrow"><span></span></a>
            <a id="contactA" href="#" title="Contact Arrow"><span></span></a>
            <a id="aboutA" href="#" title="About Arrow"><span></span></a>    </div>
    </div>
    </body>
    style.css
    Code:
    #consultingSolutions {
    	position: absolute;
    	height: 17px;
    	width: 167px;
    	margin-top: 16px;
    	margin-left: -69px;
    	background:url(../images/consulting_solutions.png) !important;
    	filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/images/consulting_solutions.png");
    }
    when i put background:none; It takes away the image all together. Is it because Im calling my div's in a <a ref> that they are not working?

    if you wanna look at my site its http://www.geocities.com/justinbgood07/

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    background:none; is for IE (since FF won't consider it due to previous !iportant rule) to remove the background property, so as to set it by filter.
    Is it because Im calling my div's in a <a ref> that they are not working?
    You've not mentioned any div in CSS, and I can't see any div inside <a>
    And the paths specified in background and filter are different!
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    New Coder
    Join Date
    Sep 2007
    Posts
    28
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i thinkk <a id is calling the div id... or do i need to put <a div id="whatever" ?

  • #7
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,005 Times in 978 Posts
    A little off topic but why are you having empty links? It hasn’t come to your mind that nowadays there aren’t just Netscape and IE (or Fx and IE for that matter) as the only two applications being able to access the internet, and people might have images, scripts, styles, and what not disabled, and thus won’t see anything on your page in that case, has it?
    It would be the easiest thing to put some text there and hide it with some CSS image replacement techinque.

    Semantic HTML is the key to good website development.


  •  

    Posting Permissions

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