Home     |     .Net Programming    |     cSharp Home    |     Sql Server Home    |     Javascript / Client Side Development     |     Ajax Programming

Ruby on Rails Development     |     Perl Programming     |     C Programming Language     |     C++ Programming     |     IT Jobs

Python Programming Language     |     Laptop Suggestions?    |     TCL Scripting     |     Fortran Programming     |     Scheme Programming Language


 
 
Cervo Technologies
The Right Source to Outsource

MS Dynamics CRM 3.0

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:

http://www.bennolan.com/behaviour/
On Mar 14, 7:58 am, "Rob" <robbel@aol.com> wrote:

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

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

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

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.
On Mar 13, 6:19 pm, "RobG" <r@iinet.net.au> wrote:

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[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