0

I have a requirement to load multiple images into a one single image. These individual images needs to be clickable. I am looking for a solution in javascript / php or whatever that can be called from php as my main application is in php.

Thanks for your help

Regards Latha

Latha
  • 11
  • Posting some code and saying what you have tried will make it easier for people to help you – leighboz Nov 06 '22 at 14:19
  • 2
    Hi Latha, welcome! SO is not a forum where you can drop a requirement and have other ppl write the code for you. We need your (trial) code to help you with your problem. Please provide a [reprex]. – Rene van der Lende Nov 06 '22 at 14:26
  • The question doesn't provide enough detail to suggest a solution. Are these images different dimensions, size, and formats? How should they be joined? How many is "multiple" .... 2 or 1000? – Yogi Nov 06 '22 at 14:26
  • Are you looking for a masonry layout? – A Haworth Nov 06 '22 at 16:20

1 Answers1

2

If you really need a single image, use the gd image library to create a single image and use an image map to make the small images clickable. You will need to save the coordinate of smaller images to be able to create an image map.

Here is a question that will give a clue how to do that:

Merge two PNG images with PHP GD library

In your case, you need to allocate a big image, where all smaller images will fit and put them into the right position. Then save the output image.

If you don't want a single image you can use CSS Grid layout to make them look like a single image.

jcubic
  • 61,973
  • 54
  • 229
  • 402