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 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    PNGfix + image swap = world of pain

    The subject-line says it all really.

    I'm doing a few pages that use transparent PNGs, and in order for them to work with IE I'm using the pngfix.js script (found here: http://homepage.ntlworld.com/bobosola/pnghowto.htm )

    Unfortunately, I also need to do onClick-triggered image swaps on these images, and when I try it I get "document.myimagename is NULL or not an object". I don't know much javascript but the pngfix script seems to be converting the <image>s to <span>s.

    I don't know a great deal about javascript, so I'd *seriously* appreciate some pointers on what I should be doing.

    Thanks in advance.

    PS: I'm currently using an image with an empty link (no href=) to trigger the onClick, is this a valid thing to do? IE and Opera don't seem to mind, but I thought I'd better check.

  • #2
    Senior Coder
    Join Date
    Jul 2003
    Location
    My pimped-out igloo in Canadia
    Posts
    1,966
    Thanks
    36
    Thanked 0 Times in 0 Posts
    if my spidey senses are correct (wow i'm a dork...) you're trying to do something like what i recently needed to do.

    this might help you
    http://www.codingforums.com/showthread.php?t=39458
    Before you criticize someone, you should walk a mile in their shoes. That way, when you criticize them, you're a mile away and you have their shoes :)

  • #3
    New to the CF scene
    Join Date
    Jun 2004
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cheers canadianjameson, that was indeed what I needed to know. Not that my solution is very pretty:

    function PNG_swap( element_id, image_name )
    {
    var element = document.getElementById( element_id );
    var filter = element.style.filter;
    var src_start = filter.indexOf( "(src='" );
    src_start += 6;
    src_end = filter.indexOf( "'," );
    left = filter.substring( 0, src_start );
    right = filter.substring( src_end );
    element.style.filter = left + image_name + right;
    }

    Blech.

    Followup question - I know how to conditionally include this function for IE:

    <!--[if gte IE 5.5000]>
    (blah blah blah)
    <![endif]-->

    How do I do an 'else' so that sane browsers get to see the regular PNG_swap() function?

    Edit: Never mind, I'm now checking the element.nodeName to determine if it's a span (IE+PNGfix) or an img (proper browser).
    Last edited by mike260; 06-01-2004 at 08:50 PM.


  •  

    Posting Permissions

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