The effect of zooming on object coordinates

Café
#1

I know this is off topic and apologise but I am looking for some knowledge that someone on this list may have and people on this list appear to have extensive javascript expertise.

I have a web page that displays an image of thumbnails. Over that image I arrange a map with a set of areas, so that clicking on an area will show the thumbnail enlarged for easier viewing.

The problem I am having is establishing the coordinates for each area. I can do so immediately after load by hard coding into the html but if the user zooms in or out, then these coordinates appear to change. There seems to be no set value for deltas between zoom levels.

Can anyone point me in the right direction for info on this.

This is the html:

<!DOCTYPE html>
<html>
<body>

<h1>Yvonne Boag, Milestones, Influences & Workshop Utilised</h1>

<p>Click on an thumbnail image to display it in a new window with its details</p>

<button onclick="myFunction()">Try it</button>


<img src="YBEras.jpg" alt="Milestones Overview" usemap="#workmap" width="100%" onclick="myFunction()">

<map name="workmap" >
  <area shape="rect" coords="60,253,79,275" alt="YB562" href="YB562.jpg">
  <area shape="rect" coords="61,285,80,315" alt="YB566" href="YB566.jpg">
</map>
<script>
function myFunction() {
  alert(event.offsetX + ":" + event.offsetY);
}
</script>
</body>
</html>
#2

Moving to the cafe, Bob. Best place to go off topic.

#3

Apologies again, didn’t realise there was a Talk TW Cafe. Next time …

Thanks @CodaCoder

bobj

#4

@Bob_Jansen I asked ChatGPT “How do we deal with html coordinates after zooming” and they refer to obtaining a “Zoom Scale Factor” then using that to convert.

  • Or capture the co-ordnates before scaling then compare with that after scaling. To determine the scale.

In summary I expect the answer lays outside the tiddlywiki corpus of knowledge and in the HTML / Javascript world, however Perhaps look for plugins that may have needed to do the same.

Perhaps the above can give you a lead?

#5

Imagemaps feel like an unnecessary throwback. Can you not create individual thumbnail images? Because if you can, it should be trivial to target them directly.

#6

@Scott_Sauyet

I have been thinking about a workaround like you suggested. The problem is the original image has nodes with either text or a thumbnail with lines between them showing a type of graph. If I make individual thumbnails images, then I am not sure how to arrange them to give a similar view. A tabular, even an expanded list, view is less appealing, I think.

Here is a screenshot of the opening page so you see what I mean.

Screenshot 2024-07-12 at 12.19.01

This image was originally created with OmniGraffle, a Mac drawing program and looks great. The basic idea is that when clicking on a thumbnail, say YB51, you get a display lie this.

Screenshot 2024-07-12 at 12.23.42
Screenshot 2024-07-12 at 12.23.421100×1570 75.6 KB

My original idea was to produce a PDF file with clickable links but it resulted in a file too large to distribute electronically which restricts is usability in our case.

@TW_Tones, will look around further. I did think that placing hidden points above the top left and bottom right of each thumbnail and then after any window manipulation get their new X,Y’s and then reset the corresponding area coordinates, might offer a workaround. Still to try this though.

Doing a Google on Zoom Scale Factor leads to an interesting StackOverflow page (javascript - How to detect page zoom level in all modern browsers? - Stack Overflow) that implies it is currently extremely difficult to sort this our cross browser.

Thanks for your idea, it is appreciated.

Onwards and upwards…

bobj

#7

That is definitely a different problem than I was imagining! I had pictured a grid of thumbnails, easy-peasy. TiddlyMap shows that this sort of thing can definitely be done, but it’s much more complex than if my naive idea had been correct. I did start investigating a similar graph in #5700, but I never got very far.

#8

Bob, I don’t know any details about the image and object handling, but if the objects displayed are clickable, such as effectively a button, does the size of the button become irrelevant?

  • perhaps the logic is give object each a clickable element so the co-ordinates are irellavant?
#9

This might be no use whatsoever but paerltrees.com used to present links in a similar way and have open sourced the code.

No idea if it’s plugin friendly or inspirational.