|
|
 |
 |
 |
 |
Javascript / Client Side Development
|
 |
 |
 |
 |
|
|
|
|
capture ALL image urls used in document including background images
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
On 13 Mar, 21:58, "Rob" <robbel@aol.com> 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
On Mar 14, 7:58 am, "Rob" <robbel@aol.com> 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.
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
On Mar 14, 8:07 am, "shimmyshack" <matt.fa@gmail.com> wrote:
> On 13 Mar, 21:58, "Rob" <robbel @aol.com> 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/
--
Rob
On 13 Mar, 23:23, "RobG" <r@iinet.net.au> wrote:
> On Mar 14, 8:07 am, "shimmyshack" <matt.fa @gmail.com> wrote: > > On 13 Mar, 21:58, "Rob" <robbel@aol.com> 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
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.
On Mar 13, 6:19 pm, "RobG" <r@iinet.net.au> wrote:
> On Mar 14, 7:58 am, "Rob" <robbel @aol.com> 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 -
>
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[i]); // Recurse on each one
}
return allimages;
}
document.write(getimages(editframe.document));
Thanks,
Rob
|
|
|
|
|
|
Add to del.icio.us |
Digg this |
Stumble it |
Powered by Megasolutions Inc