Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #19381 > unrolled thread

Based on its src value, find an image and assign an ID?

Back to article view | Back to comp.lang.javascript

Contents

  Based on its src value, find an image and assign an ID? Tuxedo <tuxedo@mailinator.com> - 2013-04-20 23:21 +0200
    Re: Based on its src value, find an image and assign an ID? Stefan Weiss <krewecherl@gmail.com> - 2013-04-20 23:42 +0200
      Re: Based on its src value, find an image and assign an ID? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-04-21 00:22 +0200
        Re: Based on its src value, find an image and assign an ID? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-04-21 00:36 +0200
        Re: Based on its src value, find an image and assign an ID? Stefan Weiss <krewecherl@gmail.com> - 2013-04-21 00:52 +0200
        Re: Based on its src value, find an image and assign an ID? Scott Sauyet <scott.sauyet@gmail.com> - 2013-04-20 17:20 -0700
          Re: Based on its src value, find an image and assign an ID? Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2013-04-21 11:09 +0200
            Re: Based on its src value, find an image and assign an ID? Scott Sauyet <scott.sauyet@gmail.com> - 2013-04-23 06:32 -0700
    Re: Based on its src value, find an image and assign an ID? x@x.com (znôrt) - 2013-04-21 00:56 +0200
      Re: Based on its src value, find an image and assign an ID? x@x.com (znôrt) - 2013-04-21 00:59 +0200

#19381 — Based on its src value, find an image and assign an ID?

Using a same header image, e.g. <img src=placeholder.gif> that is generated 
and cannot be changed after it's been initially loaded into a page view, 
can an ID be assigned later in the document flow?

Initially there is no ID at all. The numeric image index may differ from 
page to page.

The only part the image can be identified by is its initial src value, 
which is always the same on all pages. The image appears only once on any 
inidividial page.

Can the image be identified and have an ID assigned?  If so, perhaps a way 
is to by the body onload function find all images in the loaded document 
and compare their src values with the known one, then assign an ID, eg. 
<img ... id=pagexyz. Thereafter, something can be done, such as a simple 
replace for example, getElementById("pagexyz").src=header2.jpg.

Is this possible? If so, what is the most direct way?

Many thanks,
Tuxedo

[toc] | [next] | [standalone]

#19384

On 2013-04-20 23:21, Tuxedo wrote:
> Using a same header image, e.g. <img src=placeholder.gif> that is generated 
> and cannot be changed after it's been initially loaded into a page view, 
> can an ID be assigned later in the document flow?

The easiest way is to use querySelector() or querySelectorAll():

  var ele = document.querySelector("[src='placeholder.gif']");

If support for older browsers is a concern, there are some libraries
that can simulate the querySelector* methods (usually returning a static
array instead of a live collection).

jQuery has something like that built-in (called Sizzle, I believe), as
do most other general purpose libraries, and there is one popular
library only for this purpose, but its name escapes me at the moment.

Other than that, you could try XPath (where supported), or just iterate
over document.images and compare the src-attributes until you find your
image.

If you don't actually need the element (for example, if you only want to
hide it), you can also do that with CSS:

   img[src='placeholder.gif'] { display: none }

- stefan

[toc] | [prev] | [next] | [standalone]

#19389

Stefan Weiss wrote:

> On 2013-04-20 23:21, Tuxedo wrote:
>> Using a same header image, e.g. <img src=placeholder.gif> that is
>> generated and cannot be changed after it's been initially loaded into a
>> page view, can an ID be assigned later in the document flow?
> 
> The easiest way is to use querySelector() or querySelectorAll():
> 
>   var ele = document.querySelector("[src='placeholder.gif']");
> 
> If support for older browsers is a concern, there are some libraries
> that can simulate the querySelector* methods (usually returning a static
> array instead of a live collection).
> 
> jQuery has something like that built-in (called Sizzle, I believe), as
> do most other general purpose libraries, and there is one popular
> library only for this purpose, but its name escapes me at the moment.
> 
> Other than that, you could try XPath (where supported), or just iterate
> over document.images and compare the src-attributes until you find your
> image.
> 
> If you don't actually need the element (for example, if you only want to
> hide it), you can also do that with CSS:
> 
>    img[src='placeholder.gif'] { display: none }

A correct answer that actually relates to the question is:  Once you have a 
reference to the image object, say “img”, execute:

  img.id = "foo";

where "foo" is an example new ID.

The ID should not be assigned before the “DOMContentReady” or “load” event 
of the document occurs, so the suggested “onload” event-handler attribute 
value is a suitable *base* execution context.

IDs must be unique in the element's home subtree in HTML5; in HTML 4.01 they 
must be unique in the whole document.  They must also follow certain naming 
rules (see the Specifications for details).  Although it is trivial to 
generate such an ID after the fact, usually it is better to give elements 
IDs before they are parsed.

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#19391

Thomas 'PointedEars' Lahn wrote:

> The ID should not be assigned before the “DOMContentReady”

DOMContent_Loaded_.  Ceterum censeo jQ***y esse delendam.

> or “load” event of the document occurs, […]

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#19392

On 2013-04-21 00:22, Thomas 'PointedEars' Lahn wrote:
> Stefan Weiss wrote:
>> The easiest way is to use querySelector() or querySelectorAll():
>> 
>>   var ele = document.querySelector("[src='placeholder.gif']");
>>
[...]
> A correct answer that actually relates to the question is:  Once you have a 
> reference to the image object, say “img”, execute:
> 
>   img.id = "foo";
> 
> where "foo" is an example new ID.

Indeed. I actually forgot about the second part of the question, but you
got my back, Mr Spock. Thanks.

We make a great team, you and I.

Want to come over for coffee?

- stefan

[toc] | [prev] | [next] | [standalone]

#19396

Thomas 'PointedEars' Lahn wrote:
> Stefan Weiss wrote:
>> Tuxedo wrote:
>>> Using a same header image, e.g. <img src=placeholder.gif> that is
>>> generated and cannot be changed after it's been initially loaded into a
>>> page view, can an ID be assigned later in the document flow?
>>
>> The easiest way is to use querySelector() or querySelectorAll():
>>
>>   var ele = document.querySelector("[src='placeholder.gif']");
>>
>> [... jquery, xPath, and plain DOM suggestion elided ... ]
>>
>> If you don't actually need the element (for example, if you only want to
>> hide it), you can also do that with CSS:
>
>>    img[src='placeholder.gif'] { display: none }
>
> A correct answer that actually relates to the question is:  Once you have a
> reference to the image object, say “img”, execute:
>
>   img.id = "foo";
> [ ... additional helpful elaboration elided ... ]

Please ignore Thomas' snide remark.  Stefan did only answer the more
difficult part of the question, about how to find the element, and not
the question directly posed in the first paragraph.  Thomas corrected
that oversight.  So between the two answers, you should have a number
of techniques for both identifying the image and assigning the id.

If you are already using a library that has a feature compatible with
querySelector, such (as Stefan pointed out) as jQuery or one of the
many others [1], this would be trivial to use.  If you are quite
certain the code will only run in environments which include
querySelector, or if you include a polyfill for it, then it's also
quite easy.  Stefan's other suggestions might require a bit more work,
but none of this should be hard.  And once you have a reference to the
image, as Thomas noted, it's quite easy to add an id.

  -- Scott

[1] I'm no expert, but I know of a few, and a quick search turned up
many more:

    Sizzle: <http://sizzlejs.com/>
    NWMatcher: <https://github.com/dperini/nwmatcher>
    DOMAssistant: <http://www.domassistant.com/>
    Sel: <https://github.com/amccollum/sel>
    uuQuery: <http://uupaa-js-spinoff.googlecode.com/svn/trunk/
uuQuery.js/README.htm>
    Peppy: <http://jamesdonaghue.com/static/peppy/>
    YASS: <http://yass.webo.in/>
    kquery: <https://github.com/yessky/kquery>
    zest: <https://github.com/chjj/zest>
    qwery : <https://github.com/ded/qwery>

    I make no recommendations for or against any of these.  In fact,
I've only tried three of them.  I'm sure there are many more around.

[toc] | [prev] | [next] | [standalone]

#19400

Scott Sauyet wrote:

> If you are already using a library that has a feature compatible with
> querySelector, such (as Stefan pointed out) as jQuery or one of the
> many others [1], this would be trivial to use.  If you are quite
> certain the code will only run in environments which include
> querySelector, or if you include a polyfill for it, then it's also
> quite easy.  […]
> [1] I'm no expert, but I know of a few, and a quick search turned up
> many more:
> […]
>     I make no recommendations for or against any of these.  In fact,
> I've only tried three of them.  I'm sure there are many more around.

It is no surprise that in your uncalled-for haste to “put things right”, the 
utter folly of a query engine “polyfilling” document.querySelector(All) is 
still escaping you.

<http://www.fortybelow.ca/hosted/dhtmlkitchen/JavaScript-Query-
Engines.html> 

-- 
PointedEars

Twitter: @PointedEars2
Please do not Cc: me. / Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#19421

Thomas 'PointedEars' Lahn wrote:
> Scott Sauyet wrote:
>> If you are already using a library that has a feature compatible with
>> querySelector, such (as Stefan pointed out) as jQuery or one of the
>> many others [1], this would be trivial to use.  If you are quite
>> certain the code will only run in environments which include
>> querySelector, or if you include a polyfill for it, then it's also
>> quite easy. [ ... ]
>
> It is no surprise that in your uncalled-for haste to “put things right”, the
> utter folly of a query engine “polyfilling” document.querySelector(All) is
> still escaping you.
>
> <http://www.fortybelow.ca/hosted/dhtmlkitchen/JavaScript-Query-Engines.html>

As you might suspect from reading the first line of that document, I'm
quite familiar with it.  Garrett did an excellent job documenting many
of the weak points of the JS selector engines available around June
2010, and noted some of the possible roadblocks involved in trying to
create one.  There is nothing in there to suggest that it is folly for
someone to create a selector engine nor for someone to try to use
one.  Whether such could be use to truly serve as a replacement for
QS(A) is more debateable, but I've certainly seen no convincing
argument that it's "utter folly".  Do you have one?

And what were you referring to when mentioning my "uncalled-for haste
to 'put things right'?"

  -- Scott

[toc] | [prev] | [next] | [standalone]

#19393

Tuxedo <tuxedo@mailinator.com> writes:

> Is this possible? If so, what is the most direct way?

$('img[src="http://userserve-ak.last.fm/serve/_/4786926/Frank+Zappa+1205265200371.gif"]').attr('id','zappa');

http://jsfiddle.net/2c2Mh/

[toc] | [prev] | [next] | [standalone]

#19394

x@x.com (znôrt) writes:

> http://jsfiddle.net/2c2Mh/

sorry: http://jsfiddle.net/2c2Mh/1/

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web