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

[Janis Papanagnou]

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.

[JJ]

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.

[Janis Papanagnou]

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