I've a set of 508 digital rectangular images. They are the pages of an ancient Tamil dictionary & the basis for a collection of subrectangles. Each #subrectangle is defined by a pair, consisting of a #BASEimage & a #quadruplet (X1, Y1, W, H), where (X1,Y1) is the #UpperLeftCorner, W the width & H the right of the subrectangle. Number of pairs in my #XMLdataBase has today crossed 10,055. I should probably use a better format than "#background-image ...", possibly #SVG & would appreciate #advice.
At the moment, when an image is displayed in a browser,
from <img style="background-image: ...>"
I do not seem to be capable of right-clicking and saving an individual subrectangle as an individual image. I must add that the #quadruplets for the subrectangles are generated automatically, as the result of a calculation on the set of heights for individual entries inside each column. Which rectangles will be most interesting is not predictable. Leisurely browsing & choosing would be useful.
@JLC1956 The problem is that you're essentially loading images through CSS (the style attribute) which puts them out of reach of the context menu (in most browsers). If you are generating the html from the xml yourself, why not load the images as src="file.png" instead of via the style="background-image: url" attribute?
@dingemansemark
The reason is that I do not want to multiply the number of actual files. On Twitter, I reworded thus:
« Stated otherwise, I want to avoid multiplying number of image files. Existing image files might be the 500 pages of a dictionary. Chart provides a 5-tuple (X1,Y1,W,H, Page) for each of the 16,000 individual entries. Browser shows <img> as #virtual extracts »
[#savingSprite]
@dingemansemark
In my current browser, the inspected element,
namely
<img style="background-image: url(Indien_221/Color_Indien221_Page_100.jpg); background-repeat: no-repeat; width: 436px; height: 186px; background-position: -116px -631px;"/>,
which could be called a #sprite,
appears thus
[#savingSprite]