Need help making the callout numbers clickable...

Image maps

Bring back HTML hotspots!

If you absolutely must turn this into a clickable image, image maps are your friend. That’s exactly what they’re for. I would recommend finding some way to structure the coordinates and link data per image in JSON and dynamically generate the image map, on the server side preferably. Edit: You should be mindful that image maps are not responsive by default, so you’ll need to recalculate and update clickable coordinates via JavaScript. CSS Tricks has an image map and a clickable SVG solution if you want to check that out. Personally, I still think an image and list of corresponding links is the safest and easiest approach.

A team of 5,000 Indians, have you considered Pyramid, Wipro, Cognizant, or Accenture?

This is the correct approach. Furthermore if done as OP wants it, it will be an absolute nightmare interacting with this because of so many tiny clickable elements clustered together. Remember, what works in print does not necessary work on screen.

Disagree. I've got a classic car and both Rimmer Bros and Canley Classics have these exploded parts diagrams with clickable numbers that take you to the part where you can select your quantity. It's great UX

Have you considered approaching this from the SVG side instead? If you can get the source vector file for these diagrams (or even just trace them), you'd have way more control over click targets than trying to reverse-engineer positions from a rasterized image. Callouts become actual elements you can bind events to, and the reference table is just another element you exclude. If you're stuck with raster inputs though, the issue with OCR picking up the table is that the numbers look identical to the callout numbers. One approach that might help: train a small YOLO or even template-matching model specifically on the leader line + bubble combo rather than just the digits. The callouts have that characteristic line connecting to the part, while table entries don't. Detecting the leader line geometry could be a stronger signal than OCR confidence alone. Also worth checking if these diagrams have any consistent metadata you can lean on, sometimes the OEM publishes these with embedded part numbers in the file structure, or there's a companion XML/JSON with the callout coordinates already mapped. Would save you a ton of pain.

Everything old is new again

It's about identifying the coordinates of the numbers in the image. If you can write some software to find numbers in the images, you can translate those into coordinates for use with the web. Sounds like a fun problem tbh Edit: I read the body text, seems you have tried a lot. It sounds like you got pretty close, just need to exclude certain regions. The bulk of the work will be creating a translation program that can take an image and spit out html and/or coordinates for later processing. You said it was having problems with reference rectangle - can you isolate that on its own and use it to exclude things from the output?

I agree with this. Yes interactivity bring some flair to this, but who are your end users? People who need to know how to change and fix parts I presume? If acceptable to your users/stake holders, you can simplify this feature by showing the image with numbered parts and an interactive legend on the side. Clicking on numbers in the legend you show corresponding description, that way you minimize the UI required to display all the descriptions.

You're overthinking this. This should be a picture of the image with numbers and then a legend to the side that has the number and the part description. Make that clickable.

Is it bad if that was my first thought?

OCR - Optical Character Recognition. Used to use tesseract, no clue what is best today. OCR on the image, identify the ROI (regions of interest) as bounding boxes with top left and bottom right pixels. Calculate position relative to size of image. Lookup tesseract OCR. Save metadata to file for each image so you dont need to reprocess. Ping me with Qs

classic, never fails. (you're totally right of course though, btw)

I think you know no matter what you do, it’s a lot of work for 12k diagrams. Do they have to be clickable images? Could they just be an image with a corresponding list of links below it? The UX and A11Y will not be great either way, but at least a diagram and list of links is obvious and will feel like a typical website of content.

OP, do this. People repairing the tractor will need to print out the page and take it to the tractor. Nobody is going to go back and fourth from a computer to hover an item to see what it says

Text recognition or OCR

I saw this post, although it would be a lot of work to use that tool the creator u/mxlawr definitely has the right answer for you or it might even be a feature in his tool https://www.reddit.com/r/webdev/comments/1uaqrh2/i_spent_6_months_building_a_figmainspired/

Use them as captchas on your site and use humans to build maps via consensus

I’ve built a couple of mapping projects that have very similar principles to this, using Leaflet but not a latlong coordinates or map tiles like usual. Instead, using CRS Simple (https://leafletjs.com/examples/crs-simple/crs-simple.html), it allows you to put a Cartesian coordinate grid over the top of any image and then place custom pins (with icons, tooltips, popovers, etc). One of my use cases was a map used in a physical flyer: I made it a 4000px square PNG and put a 400x400 grid over it, allowing me to place pins on each point of interest that were clickable with tooltips etc. The whole map can be panned and zoomed, and I often made them on standalone borderless webpages that can then be iframed in elsewhere.

Either SVG shapes or responsive image maps. You can use a tool like this to make it easier: https://imagemapper.noc.io/#/

Just do a legend underneath with number, name, and link

Set the pic as the background map in leaflet and use the api to add the spots as markers.

For your bulk problem - I think this is a decent job for OCR. You can run ocr on all images and get the coordinates, width and height for each number (though don't expect it to be 100% depends a lot on the images). Tesseract is one tool that you can use locally. On a quick search got this https://stackoverflow.com/questions/75524534/how-to-get-the-coordinates-of-text-on-an-image-with-node-js Edit: Ah i see you mentioned easy ocr. Tesseract works a bit differently so maybe you have better luck. Or if the legend is always in the same spot then put a white box over it with sharp or smth