eXtensible Image Replacement

Discussion in 'Javascript' started by Dante, Dec 8, 2003.

  1. Dante

    Dante Guest

    I was trying to improve PPK's JIR script by using XML. I have this code:
    function init()
    {
    var x = document.getElementsByTagName('replace');
    var prefix = 'http://www.quirksmode.org/dom/pix/';
    var suffix = '.gif';
    for (var i=0;i<x.length;i++)
    {
    if (x.getAttribute('url'))
    {
    var y = replace.cloneNode(true);
    y.replacedHeader = x;
    outimage = prefix + x.getAttribute('url') + suffix;
    outalt = x.firstChild.nodeValue;
    var replace='<img src="'+outimage+'" alt="'+outalt+'">';
    y.onload = function () {
    this.replacedHeader.innerHTML=replace;
    };
    }
    }
    }
    I'm sure there's plenty of things wrong with it that I missed...is there?
     
    Dante, Dec 8, 2003
    #1
    1. Advertising

  2. Dante wrote:

    > I was trying to improve PPK's JIR script by using XML.


    #define PPK
    #define JIR

    > I have this code:
    > function init()
    > {
    > var x = document.getElementsByTagName('replace');

    ^
    > var prefix = 'http://www.quirksmode.org/dom/pix/';
    > var suffix = '.gif';
    > for (var i=0;i<x.length;i++)

    ^
    It is wise to check references before accessing the objects/properties
    they refer to:

    if (typeof document.getElementsByTagName != "function"
    || typeof document.getElementsByTagName != "object")
    {
    var x = document.getElementsByTagName('replace');
    if (x)
    {
    ...
    }
    }

    While the first test may not be required (depending on the DOM of the
    target UA), the second one is duty.

    > {
    > if (x.getAttribute('url'))


    Do not use getAttribute(...) if you can avoid it, the so-called most
    used browser (IE)'s implementation of the W3C-DOM is flawed on it
    Use

    if (x.url)

    instead.

    Also note that it is unwise not to give variables a talking name. To
    know what `x' refers to, one must re-read the preceding statements.
    Time is money.

    > {
    > var y = replace.cloneNode(true);
    > y.replacedHeader = x;


    Again, you should check if the cloneNode(...) process succeeded:

    if (y)

    > outimage = prefix + x.getAttribute('url') + suffix;


    Again, drop getAttribute(...) if you can. Besides, is it intended
    that `outimage'

    > outalt = x.firstChild.nodeValue;


    and `outalt' are declared global? If not, use the `var' keyword.

    > var replace='<img src="'+outimage+'" alt="'+outalt+'">';
    > y.onload = function () {
    > this.replacedHeader.innerHTML=replace;


    `innerHTML' is a proprietary property only available in the HTML DOM of
    some UAs. Use standardized W3C-DOM properties and methods instead:

    // Create the `img' element
    var oImg = document.createElement("img");
    if (oImg) // if that worked
    {
    // assign values to its properties
    oImg.src = outimage;
    oImg.alt = outalt;

    // remove all child nodes from the later parent element
    var o = this.replacedHeader;
    while (o.childNodes.length > 0)
    o.removeChild(o.firstChild);

    // and append the `img' element as its child node
    o.appendChild(oImg);
    }

    > I'm sure there's plenty of things wrong with it that I missed...is there?


    Yes, there is, for suitable values of `plenty' ;-)

    Have a look in the specification before you continue:
    http://www.w3.org/TR/DOM-Level-2-Core/


    PointedEars
     
    Thomas 'PointedEars' Lahn, Dec 9, 2003
    #2
    1. Advertising

  3. Dante

    Dante Guest

    I forgot to mention:

    The original plan was to use document.createElement. But due to
    name-spacing difficulties I modified it. Would
    document.createElement('html:img') work if the html namespace was
    defined?
     
    Dante, Dec 9, 2003
    #3
  4. (Dante) writes:

    > The original plan was to use document.createElement. But due to
    > name-spacing difficulties I modified it. Would
    > document.createElement('html:img') work if the html namespace was
    > defined?


    I have no idea. It doesn't say it should in the W3C DOM Core
    specification.
    However, it has
    document.createElementNS(htmlNamespaceURI,"img")
    If you application is HTMLonly, you don't need it, but otherwise
    you should use the "NS" methods.

    W3C DOM 2 Core: <URL:http://www.w3.org/TR/DOM-Level-2-Core/core.html>

    ?L
    --
    Lasse Reichstein Nielsen -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
     
    Lasse Reichstein Nielsen, Dec 9, 2003
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Lucas Tam

    Building an Extensible Web Framework

    Lucas Tam, Oct 12, 2005, in forum: ASP .Net
    Replies:
    2
    Views:
    377
    Lucas Tam
    Oct 13, 2005
  2. Ravi Shankar
    Replies:
    0
    Views:
    360
    Ravi Shankar
    Jan 4, 2004
  3. http://mylinuxisp.com/~vmdd_tech

    sockSvr - an extensible web server and an embedable component

    http://mylinuxisp.com/~vmdd_tech, May 23, 2004, in forum: Java
    Replies:
    0
    Views:
    457
    http://mylinuxisp.com/~vmdd_tech
    May 23, 2004
  4. -
    Replies:
    1
    Views:
    346
    Thomas Weidenfeller
    Apr 6, 2005
  5. Twisted
    Replies:
    5
    Views:
    473
    Oliver Wong
    Mar 31, 2006
Loading...

Share This Page