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

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

Attach search tags to web images?

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

Contents

  Attach search tags to web images? RG III <mob.rrr.3@gmail.com> - 2019-11-26 00:00 -0800
    Re: Attach search tags to web images? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-26 11:29 +0100
      Re: Attach search tags to web images? RG III <mob.rrr.3@gmail.com> - 2019-11-26 02:58 -0800
        Re: Attach search tags to web images? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-26 12:57 +0100
          Re: Attach search tags to web images? "Evertjan." <exxjxw.hannivoort@inter.nl.net> - 2019-11-26 13:06 +0100
    Re: Attach search tags to web images? Julio Di Egidio <julio@diegidio.name> - 2019-11-26 04:17 -0800
    Re: Attach search tags to web images? dr.j.r.stockton@gmail.com - 2019-11-26 04:23 -0800
      Re: Attach search tags to web images? dr.j.r.stockton@gmail.com - 2019-11-26 04:37 -0800
    Re: Attach search tags to web images? Martin Leese <please@see.Web.for.e-mail.INVALID> - 2019-11-27 13:29 -0700
    Re: Attach search tags to web images? Arno Welzel <usenet@arnowelzel.de> - 2019-11-28 12:13 +0100

#37869 — Attach search tags to web images?

When users search for keywords on an HTML document, the browser obviously only scans text for those keywords.  But is it somehow possible to attach keywords to <img> elements that the browser can include in keyword searches?  If not, are there any other workarounds that might help browser keyword searches scroll down to an <img> element?

- Robert

[toc] | [next] | [standalone]

#37870

RG III <mob.rrr.3@gmail.com> wrote on 26 Nov 2019 in comp.lang.javascript:

> When users search for keywords on an HTML document, the browser
> obviously only scans text for those keywords.  But is it somehow
> possible to attach keywords to <img> elements that the browser can
> include in keyword searches?  If not, are there any other workarounds
> that might help browser keyword searches scroll down to an <img>
> element? 

What is a "browser keyword search"?

Do you mean "browser text search"?

-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#37871

> 
> What is a "browser keyword search"?
> 
> Do you mean "browser text search"?
> 
Yes. Like when a user presses Ctrl+F to find text words on a webpage.

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

#37872

RG III <mob.rrr.3@gmail.com> wrote on 26 Nov 2019 in comp.lang.javascript:

>> 
>> What is a "browser keyword search"?
>> 
>> Do you mean "browser text search"?
>> 
> Yes. Like when a user presses Ctrl+F to find text words on a webpage.

Since css '::before' does not seem to work in an img,
and such text cannot be searched for anyway,
and supposing all images being inline, 
and wanting to seach for image title strings,
try:

for (anImg of document.querySelectorAll('img')) {
	if (anImg.title != '') {
		const span = document.createElement('span');
		const br = document.createElement('br');
		const title = document.createTextNode(anImg.title);
		anImg.parentNode.replaceChild(span, anImg);
		span.appendChild(title);      
		span.appendChild(br);      
		span.appendChild(anImg);      
		span.style.fontSize = '1px';
	};
};
</script>



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#37873

"Evertjan." <exxjxw.hannivoort@inter.nl.net> wrote on 26 Nov 2019 in 
comp.lang.javascript:

> RG III <mob.rrr.3@gmail.com> wrote on 26 Nov 2019 in comp.lang.javascript:
> 
>>> 
>>> What is a "browser keyword search"?
>>> 
>>> Do you mean "browser text search"?
>>> 
>> Yes. Like when a user presses Ctrl+F to find text words on a webpage.
> 
> Since css '::before' does not seem to work in an img,
> and such text cannot be searched for anyway,
> and supposing all images being inline, 
> and wanting to seach for image title strings,
> try:
> 
> for (anImg of document.querySelectorAll('img')) {
>      if (anImg.title != '') {
>           const span = document.createElement('span');
>           const br = document.createElement('br');
>           const title = document.createTextNode(anImg.title);
>           anImg.parentNode.replaceChild(span, anImg);
>           span.appendChild(title);      
>           span.appendChild(br);      
>           span.appendChild(anImg);      
>           span.style.fontSize = '1px';

		span.style.display = 'inline-block';

>     };
>};
> </script>
> 
> 
> 



-- 
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

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

#37874

On Tuesday, 26 November 2019 09:00:25 UTC+1, RG III  wrote:
> When users search for keywords on an HTML document, the browser obviously only scans text for those keywords.  But is it somehow possible to attach keywords to <img> elements that the browser can include in keyword searches?  If not, are there any other workarounds that might help browser keyword searches scroll down to an <img> element?

To work with the browser's built-in search, it has to be text in the page,
that you put beside/below the image.  (You might use semantic markup such
as figure+figcaption but it needn't be: <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption>)

HTH,

Julio

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

#37875

On Tuesday, 26 November 2019 08:00:25 UTC, RG III  wrote:
> When users search for keywords on an HTML document, the browser obviously only scans text for those keywords.  But is it somehow possible to attach keywords to <img> elements that the browser can include in keyword searches?  If not, are there any other workarounds that might help browser keyword searches scroll down to an <img> element?

To include, in a browser Ctrl-F search, character-text which is within an image element, one must persuade the browser-makers to include that feature.  So try using the feedback already provided within some browsers, and be patient.

You could, however, place your image elements within text-container elements containing the text you want to be findable.  If you make that text font-size 1 pt white-on-white, few users will see it there.

If you are writing a page full of images, and don't insist on Ctrl-F, you can make your own Search Element, maybe position absolute top-right-corner, containing an Input type=text and an adjacent Button, which spiders all the IMG elements (or a suitable property of document.body) in whatever manner you choose.

I know that I have one page in which script rewrites the Body before display,
so all sorts of searches must be possible.


-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

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

#37877

On Tuesday, 26 November 2019 12:23:08 UTC, dr.j.r...@gmail.com  wrote:
> On Tuesday, 26 November 2019 08:00:25 UTC, RG III  wrote:
> > When users search for keywords on an HTML document, the browser obviously only scans text for those keywords.  But is it somehow possible to attach keywords to <img> elements that the browser can include in keyword searches?  If not, are there any other workarounds that might help browser keyword searches scroll down to an <img> element?
> 
> To include, in a browser Ctrl-F search, character-text which is within an image element, one must persuade the browser-makers to include that feature.  So try using the feedback already provided within some browsers, and be patient.
> 
> You could, however, place your image elements within text-container elements containing the text you want to be findable.  If you make that text font-size 1 pt white-on-white, few users will see it there.
> 
> If you are writing a page full of images, and don't insist on Ctrl-F, you can make your own Search Element, maybe position absolute top-right-corner, containing an Input type=text and an adjacent Button, which spiders all the IMG elements (or a suitable property of document.body) in whatever manner you choose.
> 
> I know that I have one page in which script rewrites the Body before display,
> so all sorts of searches must be possible.

On second thoughts, I add to document.body; the rewrite  is by

                                                                                                                      function Replacement(St, P1, P2, P3) { var S = ""                                 var Str1 = '<span class=EQN style="background:white;">'                         var Bee4 = "&nbsp; &nbsp; &nbsp; | &nbsp;"                                      var Alge = " <i>Algebra<\/i> "                                                  var Midl = " "                                                                  var Str2 = '<\/span>'                                                           P1 = P1 || "" ; P3 = P3 || "&nbsp;"                                             P1 = P1.replace(/~/, "\xb0")                                                    P2 = +P2                                                                        if (P2) {                                                                         if (P2>1) S += Str1 + Bee4 + Alge + "," + Str2                                  S += Str1 + "<span class=FLT>("+P1+")<\/span>"                                  S += P2>1 ? "|" : "&nbsp;"                                                      S += " &nbsp;" + Alge +  "," + Str2                                             if (P2>1) S += Str1 + Bee4 + Alge + P3 + Str2                                   return S }                                                                    return Str1 + "&emsp; &emsp; " + Alge + P1 + Midl + P3 + Str2 } 
                                                                                              var Esay = document.getElementById("Mathz")                                     Esay.innerHTML = Esay.innerHTML.                                                  replace(/##(\w['~]?)?(\d)?([\.,; ]*)?/g, Replacement)   


where <div ID=Mathz> is rather large.

 -- 
   (c) John Stockton, near London, UK.  Using Google Groups.           |
  Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

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

#37880

RG III wrote:
> When users search for keywords on an HTML document, the browser obviously only scans text for those keywords.  But is it somehow possible to attach keywords to <img> elements that the browser can include in keyword searches?  If not, are there any other workarounds that might help browser keyword searches scroll down to an <img> element?

I don't see any connection to JavaScript.
This seems to be a question about HTML, so
perhaps you would have better luck if you
posted over on:
     comp.infosystems.www.authoring.html

-- 
Regards,
Martin Leese
E-mail: please@see.Web.for.e-mail.INVALID
Web: http://members.tripod.com/martin_leese/

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

#37885

On 26.11.19 09:00, RG III wrote:

> When users search for keywords on an HTML document, the browser
> obviously only scans text for those keywords.  But is it somehow
> possible to attach keywords to <img> elements that the browser can
> include in keyword searches?  If not, are there any other workarounds

No.

> that might help browser keyword searches scroll down to an <img>
> element?

Put the text before or after the image as caption. Having "invisible"
text which is only used when searching for it, is a bad idea anyway. The
alt attributes in images are an exception as these are used *instead* of
the image in case people can not see the image itself.


-- 
Arno Welzel
https://arnowelzel.de

[toc] | [prev] | [standalone]

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

csiph-web