Rocksolid Light

Welcome to novaBBS (click a section below)

mail  files  register  newsreader  groups  login

Message-ID:  

There are never any bugs you haven't found yet.


devel / alt.html / Re: How to overlay a large image while hovering over table with small images?

SubjectAuthor
* How to overlay a large image while hovering over table with small images?Janis Papanagnou
`* Re: How to overlay a large image while hovering over table with small images?JJ
 `- Re: How to overlay a large image while hovering over table with small images?Janis Papanagnou

1
How to overlay a large image while hovering over table with small images?

<uole2u$m6j0$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=779&group=alt.html#779

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!nntp.comgw.net!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: How to overlay a large image while hovering over table with small
images?
Date: Mon, 22 Jan 2024 10:55:42 +0100
Organization: A noiseless patient Spider
Lines: 35
Message-ID: <uole2u$m6j0$1@dont-email.me>
MIME-Version: 1.0
Content-Type: text/plain; charset=utf-8
Content-Transfer-Encoding: 7bit
Injection-Date: Mon, 22 Jan 2024 09:55:43 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="036ef4b296a1c30a18efabfbd1fdb856";
logging-data="727648"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1+ZaETqQhv0KbJuGHZrqpby"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:tZ8xnWtutT1c1VOBLUE4nou1Czo=
X-Enigmail-Draft-Status: N1110
X-Mozilla-News-Host: news://news.eternal-september.org:119
 by: Janis Papanagnou - Mon, 22 Jan 2024 09:55 UTC

Yet I haven't found a suggestion online - maybe it's too tricky? OTOH,
HTML/CSS/JS is powerful and it might anyway be possible (at least I'd
think so), so I am asking here...

I have two sets of images, one optimized for low resolution (e.g.,
../low/XY.png) and one with all details in a high resolution (say,
../high/XY.png).[*]

The low res images are in the <table> and displayed all together as a
matrix.

img11 img12 img13 ...
img21 img22 img23 ...
...

When hovering over the table onto XY.png I want to overlay the <table>
(not the respective small image) with the large version of XY.png. And
when moving the cursor further to the next (now hidden by the large)
small image the previous large image shall vanish and be replaced by
the large image variant of the next one at the current cursor position.

(I hope my description was not too confusing.)

So I'd want the large image temporarily displayed centered above the
<table>, and the hovering-selection of (hidden) shall images shall
still be possible. - Could that be achieved, or does the large overlay
image prevent the selection of underlying small images in the <table>?

Thanks.

Janis

[*] Note: I don't want to scale the images; scaling down the large
image set looks as bad as scaling up the small image set. That's
why I'm working with two image sets residing in two subdirectories.

Re: How to overlay a large image while hovering over table with small images?

<1e5sd5wt4iaoz.s0udeiy0g2l5.dlg@40tude.net>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=781&group=alt.html#781

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!news.nntp4.net!paganini.bofh.team!not-for-mail
From: jj4pub...@outlook.com (JJ)
Newsgroups: alt.html
Subject: Re: How to overlay a large image while hovering over table with small images?
Date: Mon, 22 Jan 2024 22:22:08 +0700
Organization: To protect and to server
Message-ID: <1e5sd5wt4iaoz.s0udeiy0g2l5.dlg@40tude.net>
References: <uole2u$m6j0$1@dont-email.me>
Mime-Version: 1.0
Content-Type: text/plain; charset="us-ascii"
Content-Transfer-Encoding: 7bit
Injection-Info: paganini.bofh.team; logging-data="1376406"; posting-host="r23+qnWvBP/8zF6MtWQekQ.user.paganini.bofh.team"; mail-complaints-to="usenet@bofh.team"; posting-account="9dIQLXBM7WM9KzA+yjdR4A";
User-Agent: 40tude_Dialog/2.0.15.84
Cancel-Lock: sha256:kbGqLXOWN0j5DN+fbl5ggJBJPrJNwb0/cHpAlfhWXzQ=
X-Face: \*\`0(1j~VfYC>ebz[&O.]=,Nm\oRM{of,liRO#7Eqi4|!]!(Gs=Akgh{J)605>C9Air?pa d{sSZ09u+A7f<^paR"/NH_#<mE1S"hde\c6PZLUB[t/s5-+Iu5DSc?P0+4%,Hl
X-Bitcoin: 1LcqwCQBQmhcWfWsVEAeyLchkAY8ZfuMnS
X-Notice: Filtered by postfilter v. 0.9.3
 by: JJ - Mon, 22 Jan 2024 15:22 UTC

On Mon, 22 Jan 2024 10:55:42 +0100, Janis Papanagnou wrote:
> Yet I haven't found a suggestion online - maybe it's too tricky? OTOH,
> HTML/CSS/JS is powerful and it might anyway be possible (at least I'd
> think so), so I am asking here...
>
> I have two sets of images, one optimized for low resolution (e.g.,
> ../low/XY.png) and one with all details in a high resolution (say,
> ../high/XY.png).[*]
>
> The low res images are in the <table> and displayed all together as a
> matrix.
>
> img11 img12 img13 ...
> img21 img22 img23 ...
> ...
>
> When hovering over the table onto XY.png I want to overlay the <table>
> (not the respective small image) with the large version of XY.png. And
> when moving the cursor further to the next (now hidden by the large)
> small image the previous large image shall vanish and be replaced by
> the large image variant of the next one at the current cursor position.
>
> (I hope my description was not too confusing.)
>
> So I'd want the large image temporarily displayed centered above the
> <table>, and the hovering-selection of (hidden) shall images shall
> still be possible. - Could that be achieved, or does the large overlay
> image prevent the selection of underlying small images in the <table>?
>
> Thanks.
>
> Janis
>
> [*] Note: I don't want to scale the images; scaling down the large
> image set looks as bad as scaling up the small image set. That's
> why I'm working with two image sets residing in two subdirectories.

That would require JS. One of the many ways to do it is like below.

https://output.jsbin.com/murosidoyu/1

Note that, in that design, the large images must directly follow their small
image. If the HTML structure is changed, the JS code must be updated to
reflect that changes.

Re: How to overlay a large image while hovering over table with small images?

<uom4it$q1ie$1@dont-email.me>

 copy mid

https://www.novabbs.com/devel/article-flat.php?id=783&group=alt.html#783

 copy link   Newsgroups: alt.html
Path: i2pn2.org!i2pn.org!eternal-september.org!feeder3.eternal-september.org!news.eternal-september.org!.POSTED!not-for-mail
From: janis_pa...@hotmail.com (Janis Papanagnou)
Newsgroups: alt.html
Subject: Re: How to overlay a large image while hovering over table with small
images?
Date: Mon, 22 Jan 2024 17:19:40 +0100
Organization: A noiseless patient Spider
Lines: 56
Message-ID: <uom4it$q1ie$1@dont-email.me>
References: <uole2u$m6j0$1@dont-email.me>
<1e5sd5wt4iaoz.s0udeiy0g2l5.dlg@40tude.net>
MIME-Version: 1.0
Content-Type: text/plain; charset=windows-1252
Content-Transfer-Encoding: 7bit
Injection-Date: Mon, 22 Jan 2024 16:19:41 -0000 (UTC)
Injection-Info: dont-email.me; posting-host="036ef4b296a1c30a18efabfbd1fdb856";
logging-data="853582"; mail-complaints-to="abuse@eternal-september.org"; posting-account="U2FsdGVkX1/w1sngi/n1TVMo1mILVTgy"
User-Agent: Mozilla/5.0 (X11; Linux x86_64; rv:45.0) Gecko/20100101
Thunderbird/45.8.0
Cancel-Lock: sha1:kB2XTod3NxTK4+bpZ4VwCsVH0xI=
In-Reply-To: <1e5sd5wt4iaoz.s0udeiy0g2l5.dlg@40tude.net>
X-Enigmail-Draft-Status: N1110
 by: Janis Papanagnou - Mon, 22 Jan 2024 16:19 UTC

On 22.01.2024 16:22, JJ wrote:
> On Mon, 22 Jan 2024 10:55:42 +0100, Janis Papanagnou wrote:
>>[...]
>> When hovering over the table onto XY.png I want to overlay the <table>
>> (not the respective small image) with the large version of XY.png. And
>> when moving the cursor further to the next (now hidden by the large)
>> small image the previous large image shall vanish and be replaced by
>> the large image variant of the next one at the current cursor position.
>>[...]
>> So I'd want the large image temporarily displayed centered above the
>> <table>, and the hovering-selection of (hidden) shall images shall
>> still be possible. - Could that be achieved, or does the large overlay
>> image prevent the selection of underlying small images in the <table>?
>>[...]
>
> That would require JS.

This is okay.

> One of the many ways to do it is like below.
>
> https://output.jsbin.com/murosidoyu/1

Yes, like the behavior of that page is what I also want.

I'll have to study the details what's going on there...
It seems it's a bit different than my page; just two images,
small/large, that get colored, it seems, but more complex a
logic. Hmm..

I suppose I can ignore the google code, and also the "jsbin"
stuff. (Removing it seems to not change behavior at least.)

And, IIUC, the CSS definition "image-table .red { ... }"
works on both image classes, "small red" and "large red" ?

And "function chkCoord(data)" is what makes the algorithm
find the correct small image to act on.

(BTW, my editor syntax highlighting doesn't seem to know all
details (like "object-fit: contain;"), but it's necessary
it seems.)

>
> Note that, in that design, the large images must directly follow their small
> image. If the HTML structure is changed, the JS code must be updated to
> reflect that changes.

Yeah. I think I'll have to take that just as an example to
learn the mechanisms. It looks quite complex for my untrained
eye, and I'll try to create something simpler if possible. :-)

Thanks!

Janis

1
server_pubkey.txt

rocksolid light 0.9.7
clearnet tor