capture ALL image urls used in document including background images

[Rob]

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

 

[shimmyshack]

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/

 

[RobG]

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.

 

[RobG]

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.

 

[shimmyshack]

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.

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.

 

[Rob]

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.

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]

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.

- 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);}
}