How to implement similar on the site?

Question

css

Please tell me the easiest way to implement something like here 1belagro.com/drawing/selhoztehnika/mtz/mtz_082/dvi... or in the simplest version
Without third-party resources like auto2d com. I would be grateful for good advice. Thanks

Answer 1

I myself am interested in how to get it for free, because the subscription costs 15 thousand per month
https://tecdoc.abcp.ru/pricing
and consists of scans of tens of thousands of service books / manufacturers catalogs.
over 5 million nomenclature.

Answer 2

The easiest way is to take and open the source code of the site and see how it is done there - a picture in the background and elements with numbers on top. Just two clicks.

Answer 3

You have a group of commodity items, the group has this block with a drawing.
For each product, we create fields with absolute coordinates and write IDs, in fact, in the date attribute.
On the server side, when sorting through the goods, we take the key of the product array, in which the coordinates are located, and substitute it in the block with the drawing. As a result, we have 20 products and 20 markers on the drawing.
Next, in JS, we write the usual anchor, which, upon clicking on the marker, will take the ID of its parent product and scroll and activate the block with this product.
I would do something like this.