How to define position and size of overlays?

[SMA-cgn]

Hi, thanks for providing this plugin! I am wondering how to define the size (x, y coordinates) and size (width & height) for an overlay element? In you example you do this through css? Is there any chance to provide relative values to the viewer coordinates in the overlay element to do the job, e.g. x: 0.5, y: 0.5 to position it in the middle of the viewer and width&height: 0.2 to set the size to 20% of the viewer? Moreover, does it work with viewers that contain multiple tiled images?

Thanks a lot!

[iangilman]

You want to style your elements with coordinates that match the viewport coordinates. Since it's based on viewport coordinates, it works fine with multiple images. If you want to just style a single element, you don't have to create a CSS class for it; you can style the element directly with style="left:0.5px; top:0.5px", etc. in the HTML, or via JS:

element.style.left = '0.5px';
element.style.top = '0.5px';

BTW, if you're more comfortable using different coordinates, you can lay your images out with bigger numbers when you add them. See https://openseadragon.github.io/examples/multi-image/ for information on specifying image width.

[SMA-cgn]

Thanks a lot for your outstanding support!!! So this would also work fort width and height? I will give it a try.

It works very nice!!! :)

[iangilman]

@SMA-cgn Excellent!