Home/ Questions/Q 8989807
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T22:21:08+00:00

I have a background image with object of some shape (example below). I would

  • 0

I have a background image with object of some shape (example below). I would like to add new images – layers (simple div with position:absolute – left/top) to this image and only on the shape where I want.

first sample

And then with PHP code added images (for example 10, 50,..) to only this shape and no other place:

second example

Is this possible to do on any simple way with PHP/JS/jquery/…? I just need to pass how many items and that many images is added to that area…

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Here’s a complete rewrite of my answer.

    Given a random picture, fit many smaller pictures only where some color is matched:

    I decided to go with a crab as a starting pictures, because crabs are cool:

    Crab

    I only want to add red dots where there is blue in the picture

    Red dots

    To do this, I will split my answer in 3 sections:

    HTML

    I start with a very simple HTML file:

    <html>
    <head>
        <title>Crab Example</title>
    </head>
    <body>
        <div>
            <h1>Dots on the crab example</h1>
        </div>
        <div id="crabSection">
            <img src="crab.png">
        </div>
    </body>
</html>

    This gives us a starting point for rendering our dotted crab!

    PHP

    Now, in PHP, I open both my crab.png and my dot.png to analyze their content, and locate random positions where the dot.png can fit in an all blue section. Right after the <img src="crab.png">, I inserted the following:

    <?php
        $crab = imagecreatefrompng("crab.png");
        $dot = imagecreatefrompng("dot.png");

        $numDesiredDots = 10;
        $numCreatedDots = 0;

        $crabWidth = imagesx($crab);
        $crabHeight = imagesy($crab);

        $dotWidth = imagesx($dot);
        $dotHeight = imagesy($dot);

        $spawnableWidth = $crabWidth - $dotWidth;
        $spawnableHeight = $crabHeight - $dotHeight;

        srand(time());

        $testingForDotSubpart = imagecreatetruecolor($dotWidth, $dotHeight);

        $validCoordinates = array();
        $invalidCoordinates = array();

        $colorWereLookingFor = 0xFF; // ARGB - our crab is blue

    Here, a few details:

    • $numDesiredDots is hardcoded to 10, but it could easily be a parameter!
    • $spawnableWidth and $spawnableHeight represent the greatest coordinate a dot can be placed in without going out of the picture
    • srand(time()); is simply used to have a different random everytime
    • $testingForDotSubpart is a small image I will be using to test a given coordinate to see if it only contains pixels of the right color
    • $colorWereLookingFor is set to blue now, because my crab is blue, if you wanted red, it should be something like 0xFF0000. For this example I used the same PNG for the HTML and the image processing, but you could easily just create a mask for the image processing and have a full color image for the HTML.

    Now, we need to create valid coordinates for each dot, which is done with the following php:

            while($numCreatedDots < $numDesiredDots)
        {
            $randomX = rand() % $spawnableWidth;
            $randomY = rand() % $spawnableHeight;

            imagecopy($testingForDotSubpart, $crab, 0, 0, $randomX, $randomY, $dotWidth, $dotHeight);
            $valid = true;
            for($x = 0; $x < $dotWidth; $x++)
            {
                for($y = 0; $y < $dotHeight; $y++)
                {
                    if(imagecolorat($testingForDotSubpart, $x, $y) != $colorWereLookingFor)
                    {
                        $valid = false;
                        break 2;
                    }
                }
            }

            if($valid)
            {
                array_push($validCoordinates, array('x' => $randomX, 'y' => $randomY));
                $numCreatedDots++;
            }
            else
            {
                // you can get rid of this else, it's just to show you how many fails there are
                array_push($invalidCoordinates, array('x' => $randomX, 'y' => $randomY));
            }
        }

    Again, some explanation:

    • We iterate as long as we haven’t created all the dots we want, for a very complex image, this might take too much time, you could add a maximum number of tries
    • We start by creating a random X,Y coordinate
    • We copy the small window where the dot could end up
    • We test all the pixels inside this window to make sure they are of the right color
    • If the window is valid, we add the coordinates to an array
    • For debugging purposes, I added an $invalidCoordinates array to show how many tries failed – the more complex the picture, the more fails there will be

    Now that we have computed all our positions, we need to clean up the resources:

            imagedestroy($testingForDotSubpart);
        imagedestroy($dot);
        imagedestroy($crab);

    Finally, I added some debug output that you can get rid of, but we need to output the dots on the crab! To show you that each dot is unique, I attached a JavaScript alert that shows the dot index:

            echo "<p>Valid Coords: <br>";

        foreach($validCoordinates as $coord)
        {
            echo "X: " . $coord['x'] . " Y: " . $coord['y'] . "<br>\n";
        }

        echo "<br>Invalid Coords " . count($invalidCoordinates) . "</p>\n";

        // Now add the dots on the crab!
        for($i = 0; $i < count($validCoordinates); $i++)
        {
            $coord = $validCoordinates[$i];
            echo "<div class='dot' style='left:".$coord['x'].";top:".$coord['y'].";'><a href='javascript:alert(".$i.");'><img src='dot.png'></a></div>\n";
        }        
?>

    Here, I am using the style left and top to give precise pixel positioning to the dots. To have them match precisely with the parent picture, we need to use position:relative; and position:absolute; as described in the next section.

    CSS

    As you can see, I’m using a class for the div, this is to take advantage of the relative positioning. I added at the top of the file, right after the title, the following

            #crabSection { position:relative; }
        .dot { margin: 0px 0px 0px 0px; position:absolute; }

    Result

    Here’s a run of the given script… you could easily save the HTML generated so you don’t have to recompute positions everytime:

    Browser

    Hope this helps!

    Edit: here’s the full code, if you need it: pastebin

    Edit 2: note that there is no overlap checking, you might want to check that the rectangle defined by $randomX, $randomY, $randomX + $dotWidth and $randomY + $dotHeight doesn’t overlap an existing rectangle from the coordinates in $validCoordinates.

    Edit 3: Once generated you can simply open the source of the page, and copy the div to your HTML so it’s not regenerated everytime. 

    <div class='dot' style='left:100;top:105;'><a href='javascript:alert(0);'><img src='dot.png'></a></div>
<div class='dot' style='left:150;top:151;'><a href='javascript:alert(1);'><img src='dot.png'></a></div>
<div class='dot' style='left:128;top:73;'><a href='javascript:alert(2);'><img src='dot.png'></a></div>
<div class='dot' style='left:144;top:93;'><a href='javascript:alert(3);'><img src='dot.png'></a></div>
<div class='dot' style='left:164;top:91;'><a href='javascript:alert(4);'><img src='dot.png'></a></div>
<div class='dot' style='left:108;top:107;'><a href='javascript:alert(5);'><img src='dot.png'></a></div>
<div class='dot' style='left:22;top:101;'><a href='javascript:alert(6);'><img src='dot.png'></a></div>
<div class='dot' style='left:54;top:151;'><a href='javascript:alert(7);'><img src='dot.png'></a></div>
<div class='dot' style='left:32;top:121;'><a href='javascript:alert(8);'><img src='dot.png'></a></div>
<div class='dot' style='left:142;top:87;'><a href='javascript:alert(9);'><img src='dot.png'></a></div>

    Also, as long as the color mask described by the $crab picture opened in PHP, you can change the img src to something else if you wanted a colorful crab. I added a crabc.png file which is now used by my img, but it still has the same outline as the crab.png file:

    Colored Crab

    Which gives this final look:

    Browser with Color

    • 0