I am currently in the process of learning how to develop mobile applications, and I am still in the early stages.
Although this question is not directly related to mobile development, it pertains more to html/css/js.
My goal is to create a simple game where users are presented with an image and several options that they can drag and drop onto the image. For example, there might be an image of a plant with options like #leaf #stem #flower #bud. The user would need to drag the correct option to the corresponding part of the image to earn points (e.g., dragging the #leaf option onto the leaf of the plant).
However, I am facing difficulties with handling the image and separating different points within it for this purpose.
In short: How can I access individual points/sections on a single image using html/js for the aforementioned purpose?
Detailed Query: I attempted to slice the image into multiple parts and reconstruct it using separate images, but encountered various issues:
1) Slicing the image resulted in a combined size about 1.5x larger than the original image when split into just 4 parts.
2) For complex pictures, dividing them into numerous images proved challenging and difficult to manage in css due to intricate splitting requirements based on the objects in the image.
3) The increased number of images led to more http requests (especially if the app is WebView based), causing longer loading times and inefficiencies.
After exploring alternative solutions, I came across the idea of using css sprites to access specific sections of my existing image as separate entities, rather than combining them into one sprite sheet. I have not yet implemented this approach but am working on it. Additionally, I have not found many examples of this technique being used, which has sparked my curiosity.
If anyone has suggestions, links, resources, or clarifications regarding my issue, please feel free to share. Any help would be greatly appreciated.
Regards, Rahul Agarwal