capture ALL image urls used in document including background images

Discussion in 'Javascript' started by Rob, Mar 13, 2007.

  1. Rob

    Rob Guest

    Hello,

    I'm sure this has come up before. I have need for a collection of all
    elements/objects in an HTML document that have any kind of an
    attribute (HTML or CSS) that is making use of a URL to display an
    image. document.images only seems to reference image tags. The
    collection needs to include background images, input type = image,
    image maps, css assigned background, etc. Honestly, I am probably not
    aware of all the possibilities so would also appreciate a reference to
    such a list.

    The context is a content editable application for which I'd like to
    enable image by image URL replacement from a display list of all
    images currently being used in the editable document. So, the
    collection will need to reference the object/element from which the
    image URL was "read" and the type of attribute to alter with a
    replacement URL.

    I only need this to work with the most recent release of Mozilla via
    FireFox2 and Internet Explorer version 6+ in their non-compliant
    (quirk) modes.

    Thank you!!

    Rob
    Rob, Mar 13, 2007
    #1
    1. Advertising

  2. Rob

    shimmyshack Guest

    On 13 Mar, 21:58, "Rob" <> wrote:
    > Hello,
    >
    > I'm sure this has come up before. I have need for a collection of all
    > elements/objects in an HTML document that have any kind of an
    > attribute (HTML or CSS) that is making use of a URL to display an
    > image. document.images only seems to reference image tags. The
    > collection needs to include background images, input type = image,
    > image maps, css assigned background, etc. Honestly, I am probably not
    > aware of all the possibilities so would also appreciate a reference to
    > such a list.
    >
    > The context is a content editable application for which I'd like to
    > enable image by image URL replacement from a display list of all
    > images currently being used in the editable document. So, the
    > collection will need to reference the object/element from which the
    > image URL was "read" and the type of attribute to alter with a
    > replacement URL.
    >
    > I only need this to work with the most recent release of Mozilla via
    > FireFox2 and Internet Explorer version 6+ in their non-compliant
    > (quirk) modes.
    >
    > Thank you!!
    >
    > Rob


    http://www.bennolan.com/behaviour/
    shimmyshack, Mar 13, 2007
    #2
    1. Advertising

  3. Rob

    RobG Guest

    On Mar 14, 7:58 am, "Rob" <> wrote:
    > Hello,
    >
    > I'm sure this has come up before. I have need for a collection of all
    > elements/objects in an HTML document that have any kind of an
    > attribute (HTML or CSS) that is making use of a URL to display an
    > image. document.images only seems to reference image tags. The
    > collection needs to include background images, input type = image,
    > image maps, css assigned background, etc. Honestly, I am probably not
    > aware of all the possibilities so would also appreciate a reference to
    > such a list.
    >
    > The context is a content editable application for which I'd like to
    > enable image by image URL replacement from a display list of all
    > images currently being used in the editable document. So, the
    > collection will need to reference the object/element from which the
    > image URL was "read" and the type of attribute to alter with a
    > replacement URL.
    >
    > I only need this to work with the most recent release of Mozilla via
    > FireFox2 and Internet Explorer version 6+ in their non-compliant
    > (quirk) modes.


    For a start, you will have to:

    1. run through the images collection
    2. check every element in the page to check those that
    can have the deprecated background (image) attribute,
    3. check all element style objects for backgroundImage
    4. check any image-like attribute on elements that can have
    one (e.g. input type=image, objects)
    5. sift through all the style sheets and rules for anything
    that looks like an image.

    There is probably more to do beyond that.

    Start writing, post what you come up with and you'll likely get
    suggestions on how to make it better. :)


    --
    Rob
    RobG, Mar 13, 2007
    #3
  4. Rob

    RobG Guest

    On Mar 14, 8:07 am, "shimmyshack" <> wrote:
    > On 13 Mar, 21:58, "Rob" <> wrote:
    > > I'm sure this has come up before. I have need for a collection of all
    > > elements/objects in an HTML document that have any kind of an
    > > attribute (HTML or CSS) that is making use of a URL to display an
    > > image.[...]

    >
    > http://www.bennolan.com/behaviour/


    I don't see how that has any relevance what-so-ever to the OP.

    --
    Rob
    RobG, Mar 13, 2007
    #4
  5. Rob

    shimmyshack Guest

    On 13 Mar, 23:23, "RobG" <> wrote:
    > On Mar 14, 8:07 am, "shimmyshack" <> wrote:
    >
    > > On 13 Mar, 21:58, "Rob" <> wrote:
    > > > I'm sure this has come up before. I have need for a collection of all
    > > > elements/objects in an HTML document that have any kind of an
    > > > attribute (HTML or CSS) that is making use of a URL to display an
    > > > image.[...]

    >
    > >http://www.bennolan.com/behaviour/

    >
    > I don't see how that has any relevance what-so-ever to the OP.
    >
    > --
    > Rob


    Hi Rob, well its just that the OP can use this library to create rules
    to search by selector, quickly finding many of the parts of the DOM
    which can have image-like attributes, and can then ask the question
    "does it have any of the properties im interested in" while on that
    element.
    It is just a handy device in this situation, if he does preparsing of
    the css rules to find those with img urls he can immediately have them
    in an array.
    shimmyshack, Mar 13, 2007
    #5
  6. Rob

    Rob Guest

    On Mar 13, 6:19 pm, "RobG" <> wrote:
    > On Mar 14, 7:58 am, "Rob" <> wrote:
    >
    > > Hello,

    >
    > > I'm sure this has come up before. I have need for a collection of all
    > > elements/objects in an HTML document that have any kind of an
    > > attribute (HTML or CSS) that is making use of a URL to display an
    > > image. document.images only seems to reference image tags. The
    > > collection needs to include background images, input type = image,
    > > image maps, css assigned background, etc. Honestly, I am probably not
    > > aware of all the possibilities so would also appreciate a reference to
    > > such a list.

    >
    > > The context is a content editable application for which I'd like to
    > > enable image by image URL replacement from a display list of all
    > > images currently being used in the editable document. So, the
    > > collection will need to reference the object/element from which the
    > > image URL was "read" and the type of attribute to alter with a
    > > replacement URL.

    >
    > > I only need this to work with the most recent release of Mozilla via
    > > FireFox2 and Internet Explorer version 6+ in their non-compliant
    > > (quirk) modes.

    >
    > For a start, you will have to:
    >
    > 1. run through the images collection
    > 2. check every element in the page to check those that
    > can have the deprecated background (image) attribute,
    > 3. check all element style objects for backgroundImage
    > 4. check any image-like attribute on elements that can have
    > one (e.g. input type=image, objects)
    > 5. sift through all the style sheets and rules for anything
    > that looks like an image.
    >
    > There is probably more to do beyond that.
    >
    > Start writing, post what you come up with and you'll likely get
    > suggestions on how to make it better. :)
    >
    > --
    > Rob- Hide quoted text -
    >
    > - Show quoted text -



    Alright, here's a start but I've changed my strategy slightly in that
    I believe it will be best if I don't require an instance by instance
    replacement. Instead, I'm thinking it will be better to present a
    single instance of each image URL used in the document then
    universally replace it with a new one. Particularly with regard to
    CSS I'm thinking I can elicit the image URLs used via computed style
    and unless I'm mistaken (that's the question) I can check src and
    background attributes for everything else.

    Although I haven't done so yet, "allimages" will be an array and I'll
    put in a test to confirm any given URL is not already present before
    pushing to it. Tips on that and the other "to do's" will be
    appreciated:

    var allimages = "";
    function getimages(n) { // n is a Node
    if (n.nodeType == 1 /*Node.ELEMENT_NODE*/) { // Check if n is an
    Element
    if (n.getAttribute("src")) {
    allimages += n.getAttribute("src") + "<br>";
    // to do: filter out all but image src's
    }
    if (n.getAttribute("background")) {
    allimages += n.getAttribute("background") + "<br>";
    }
    // other potential attributes go here
    if (document.all) { // just my way of distinguishing is not mozilla
    if (n.currentStyle.backgroundImage != "none") {
    allimages += n.currentStyle.backgroundImage + "<br>";
    // to do: regex contents of url()
    }
    }
    else if
    (document.defaultView.getComputedStyle(n,'').getPropertyValue("background-
    image") != "none") {
    allimages +=
    document.defaultView.getComputedStyle(n,'').getPropertyValue("background-
    image") + "<br>";
    // to do: regex contents of url()
    }
    }
    var children = n.childNodes; // Now get all children of n
    for(var i=0; i < children.length; i++) { // Loop through the children
    getimages(children); // Recurse on each one
    }
    return allimages;
    }

    document.write(getimages(editframe.document));

    Thanks,

    Rob
    Rob, Mar 14, 2007
    #6
  7. Rob

    Rob Guest

    On Mar 13, 11:27 pm, "Rob" <> wrote:
    > On Mar 13, 6:19 pm, "RobG" <> wrote:
    >
    >
    >
    >
    >
    > > On Mar 14, 7:58 am, "Rob" <> wrote:

    >
    > > > Hello,

    >
    > > > I'm sure this has come up before. I have need for a collection of all
    > > > elements/objects in an HTML document that have any kind of an
    > > > attribute (HTML or CSS) that is making use of a URL to display an
    > > > image. document.images only seems to reference image tags. The
    > > > collection needs to include background images, input type = image,
    > > > image maps, css assigned background, etc. Honestly, I am probably not
    > > > aware of all the possibilities so would also appreciate a reference to
    > > > such a list.

    >
    > > > The context is a content editable application for which I'd like to
    > > > enable image by image URL replacement from a display list of all
    > > > images currently being used in the editable document. So, the
    > > > collection will need to reference the object/element from which the
    > > > image URL was "read" and the type of attribute to alter with a
    > > > replacement URL.

    >
    > > > I only need this to work with the most recent release of Mozilla via
    > > > FireFox2 and Internet Explorer version 6+ in their non-compliant
    > > > (quirk) modes.

    >
    > > For a start, you will have to:

    >
    > > 1. run through the images collection
    > > 2. check every element in the page to check those that
    > > can have the deprecated background (image) attribute,
    > > 3. check all element style objects for backgroundImage
    > > 4. check any image-like attribute on elements that can have
    > > one (e.g. input type=image, objects)
    > > 5. sift through all the style sheets and rules for anything
    > > that looks like an image.

    >
    > > There is probably more to do beyond that.

    >
    > > Start writing, post what you come up with and you'll likely get
    > > suggestions on how to make it better. :)

    >
    > > --
    > > Rob- Hide quoted text -

    >
    > > - Show quoted text -

    >
    > Alright, here's a start but I've changed my strategy slightly in that
    > I believe it will be best if I don't require an instance by instance
    > replacement. Instead, I'm thinking it will be better to present a
    > single instance of each image URL used in the document then
    > universally replace it with a new one. Particularly with regard to
    > CSS I'm thinking I can elicit the image URLs used via computed style
    > and unless I'm mistaken (that's the question) I can check src and
    > background attributes for everything else.
    >
    > Although I haven't done so yet, "allimages" will be an array and I'll
    > put in a test to confirm any given URL is not already present before
    > pushing to it. Tips on that and the other "to do's" will be
    > appreciated:
    >
    > var allimages = "";
    > function getimages(n) { // n is a Node
    > if (n.nodeType == 1 /*Node.ELEMENT_NODE*/) { // Check if n is an
    > Element
    > if (n.getAttribute("src")) {
    > allimages += n.getAttribute("src") + "<br>";
    > // to do: filter out all but image src's
    > }
    > if (n.getAttribute("background")) {
    > allimages += n.getAttribute("background") + "<br>";
    > }
    > // other potential attributes go here
    > if (document.all) { // just my way of distinguishing is not mozilla
    > if (n.currentStyle.backgroundImage != "none") {
    > allimages += n.currentStyle.backgroundImage + "<br>";
    > // to do: regex contents of url()
    > }
    > }
    > else if
    > (document.defaultView.getComputedStyle(n,'').getPropertyValue("background-
    > image") != "none") {
    > allimages +=
    > document.defaultView.getComputedStyle(n,'').getPropertyValue("background-
    > image") + "<br>";
    > // to do: regex contents of url()
    > }
    > }
    > var children = n.childNodes; // Now get all children of n
    > for(var i=0; i < children.length; i++) { // Loop through the children
    > getimages(children); // Recurse on each one
    > }
    > return allimages;
    >
    > }
    >
    > document.write(getimages(editframe.document));
    >
    > Thanks,
    >
    > Rob- Hide quoted text -
    >
    > - Show quoted text -



    In case anyone is interested here is what I came up with finally:

    // WYSIWYG content is in editframe designmode / contenteditable
    editframe = (document.all) ? top.frames("WE") :
    top.document.getElementById("WE").contentWindow;

    // a list of image file name extensions
    op.picelist=".jpe.jpeg.jpg.gif.tif.bmp.png";

    var allimgstr = ","; // set allimgstr = "," before using
    getallimgstr();
    allimages = allimgstr.split(",");
    // allimages willl actually contain only one instance of each image
    // possibly two if image URL is used as an src attribute in one place
    and as a background-image style in another
    // url() "wrapper" is retained to enable subsequent search and replace
    of innerHTML

    function getallimgstr() {
    allimgstr = ",";
    // need to get body style separately first -- if present must always
    be set using CSS
    var styleurl = (document.all) ?
    editframe.document.body.currentStyle.backgroundImage :
    editframe.document.defaultView.getComputedStyle(editframe.document.body,'').getPropertyValue("background-
    image");
    if (styleurl && styleurl.indexOf('url(') == 0) {
    // search for an instance of actual innerHTML used and if found add
    to allimgstr
    if (editframe.document.body.innerHTML.indexOf(styleurl) > 0)
    allimgstr += styleurl + ",";
    var thisurl = styleurl.substring(4,styleurl.indexOf(')'));
    thisurl = thisurl.replace(/'|"/g,"");
    if (editframe.document.body.innerHTML.indexOf('url(' + thisurl +
    ')') > 0 && allimgstr.indexOf(',' + 'url(' + thisurl + ')' + ',') ==
    -1) allimgstr += 'url(' + thisurl + ')' + ",";
    if (editframe.document.body.innerHTML.indexOf('url("' + thisurl +
    '")') > 0 && allimgstr.indexOf(',' + 'url("' + thisurl + '")' + ',')
    == -1) allimgstr += 'url("' + thisurl + '")' + ",";
    if (editframe.document.body.innerHTML.indexOf("url('" + thisurl +
    "')") > 0 && allimgstr.indexOf(',' + "url('" + thisurl + "')" + ',')
    == -1) allimgstr += "url('" + thisurl + "')" + ",";
    }
    return getrestimgstr(editframe.document);
    }

    function getrestimgstr(n) {
    if (n.nodeType == 1) {
    var styleurl = (document.all) ? n.currentStyle.backgroundImage :
    editframe.document.defaultView.getComputedStyle(n,'').getPropertyValue("background-
    image");
    if (styleurl && styleurl.indexOf('url(') == 0) {
    // search for an instance of actual innerHTML used and if found add
    to allimgstr
    if (editframe.document.body.innerHTML.indexOf(styleurl) > 0 &&
    allimgstr.indexOf(',' + styleurl + ',') == -1) allimgstr += styleurl +
    ",";
    var thisurl = styleurl.substring(4,styleurl.indexOf(')'));
    thisurl = thisurl.replace(/'|"/g,"");
    if (editframe.document.body.innerHTML.indexOf('url(' + thisurl +
    ')') > 0 && allimgstr.indexOf(',' + 'url(' + thisurl + ')' + ',') ==
    -1) allimgstr += 'url(' + thisurl + ')' + ",";
    if (editframe.document.body.innerHTML.indexOf('url("' + thisurl +
    '")') > 0 && allimgstr.indexOf(',' + 'url("' + thisurl + '")' + ',')
    == -1) allimgstr += 'url("' + thisurl + '")' + ",";
    if (editframe.document.body.innerHTML.indexOf("url('" + thisurl +
    "')") > 0 && allimgstr.indexOf(',' + "url('" + thisurl + "')" + ',')
    == -1) allimgstr += "url('" + thisurl + "')" + ",";
    }
    if (n.getAttribute("background") && allimgstr.indexOf(',' +
    n.getAttribute("background") + ',') == -1) allimgstr +=
    n.getAttribute("background") + ",";
    if (n.getAttribute("src") && n.getAttribute("src").indexOf(".") > 0
    &&
    op.picelist.indexOf(n.getAttribute("src").toLowerCase().substring(n.getAttribute("src").lastIndexOf(".")))
    > 0) {

    if (allimgstr.indexOf(',' + n.getAttribute("src") + ',') == -1)
    allimgstr += n.getAttribute("src") + ",";
    }
    }
    var children = n.childNodes;
    for(var i=0; i < children.length; i++) {getrestimgstr(children);}
    }
    Rob, Apr 7, 2007
    #7
    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. Kaidi
    Replies:
    5
    Views:
    462
    Andrew Thompson
    Jan 4, 2004
  2. Nathan Sokalski

    Converting Relative URLs into Absolute URLs

    Nathan Sokalski, Aug 11, 2008, in forum: ASP .Net
    Replies:
    1
    Views:
    738
    Sriram Srivatsan
    Aug 12, 2008
  3. Adam Monsen

    JDBC URLs ...not really URLs?

    Adam Monsen, Feb 6, 2009, in forum: Java
    Replies:
    11
    Views:
    6,178
    Adam Monsen
    Feb 8, 2009
  4. Augustin Prasanna
    Replies:
    1
    Views:
    1,314
    bruce barker
    Jul 17, 2009
  5. Steve T.

    dynamic URLS convert to static URLS for search engines

    Steve T., Mar 1, 2004, in forum: ASP .Net Web Services
    Replies:
    7
    Views:
    281
    Steve T.
    Mar 4, 2004
Loading...

Share This Page