473,320 Members | 1,766 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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

Mar 13 '07 #1
6 7195
On 13 Mar, 21:58, "Rob" <robbel...@aol.comwrote:
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/

Mar 13 '07 #2
On Mar 14, 7:58 am, "Rob" <robbel...@aol.comwrote:
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

Mar 13 '07 #3
On Mar 14, 8:07 am, "shimmyshack" <matt.fa...@gmail.comwrote:
On 13 Mar, 21:58, "Rob" <robbel...@aol.comwrote:
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

Mar 13 '07 #4
On 13 Mar, 23:23, "RobG" <r...@iinet.net.auwrote:
On Mar 14, 8:07 am, "shimmyshack" <matt.fa...@gmail.comwrote:
On 13 Mar, 21:58, "Rob" <robbel...@aol.comwrote:
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.
Mar 13 '07 #5
Rob
On Mar 13, 6:19 pm, "RobG" <r...@iinet.net.auwrote:
On Mar 14, 7:58 am, "Rob" <robbel...@aol.comwrote:
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,'').getPr opertyValue("background-
image") != "none") {
allimages +=
document.defaultView.getComputedStyle(n,'').getPro pertyValue("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

Mar 14 '07 #6
Rob
On Mar 13, 11:27 pm, "Rob" <robbel...@aol.comwrote:
On Mar 13, 6:19 pm, "RobG" <r...@iinet.net.auwrote:


On Mar 14, 7:58 am, "Rob" <robbel...@aol.comwrote:
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,'').getPr opertyValue("background-
image") != "none") {
allimages +=
document.defaultView.getComputedStyle(n,'').getPro pertyValue("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- 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.backgroundIma ge :
editframe.document.defaultView.getComputedStyle(ed itframe.document.body,'').getPropertyValue("backgr ound-
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(styleur l) 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(styleur l) 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").toLowerC ase().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[i]);}
}
Apr 7 '07 #7

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
by: Tim | last post by:
Hope someone in the big wide world can help... What I want to do is have an image slideshow which automatically scrolls through a series of images very fast, then pauses when you move your mouse...
2
by: Markus Mohr | last post by:
Hi, everyone, I have a special problem: For every monitor resolution in 200 pixel steps from 800 to 1600 pixels I have an image to be shown as centered background-image. Those images all...
23
by: Erik Schulp | last post by:
Hi all, I am using a background image via a stylsheet. I've used this code: background-image:url("/images/tile.gif"); (which I think is correct) The image doesn't show up however, the path,...
4
by: Nathan Given | last post by:
Hello All, I am trying to randomly change the background image of my home page but I can't seem to figure it out. Here is a snippet of my css .... BODY {background:transparent...
14
by: D. Alvarado | last post by:
Hello, I am trying to open a window containing an image and I would like the image to be flush against the window -- i.e. have no padding or border. Can I make this happen with a single call to a...
7
by: Nilesh | last post by:
I am using background-image attribute in a CSS file and linking the CSS file to aspx page. But strangly, background-image attribute is not working for relative URL. e.g. If I apply following css...
14
by: Schraalhans Keukenmeester | last post by:
I am building a default sheet for my linux-related pages. Since many linux users still rely on/prefer viewing textmode and unstyled content I try to stick to the correct html tags to pertain good...
10
by: cjparis | last post by:
Hello everyone. If anyone can give me a hand I would be gratefull Am doing a site which requires a moving element and have used DHTML to do it. Have a simple Browser detect script to sort IE...
6
tpgames
by: tpgames | last post by:
I'm trying to get a maze to default to always giving me the image as the marker and never give me the color as the marker. The code requires you to check a box to get the image marker to be used. So,...
0
by: DolphinDB | last post by:
Tired of spending countless mintues downsampling your data? Look no further! In this article, you’ll learn how to efficiently downsample 6.48 billion high-frequency records to 61 million...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: jfyes | last post by:
As a hardware engineer, after seeing that CEIWEI recently released a new tool for Modbus RTU Over TCP/UDP filtering and monitoring, I actively went to its official website to take a look. It turned...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
by: af34tf | last post by:
Hi Guys, I have a domain whose name is BytesLimited.com, and I want to sell it. Does anyone know about platforms that allow me to list my domain in auction for free. Thank you
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.