English
English
In web development, dividing images into hotspot areas is a common need, especially in interactive images, maps, or games, where users interact with the image by clicking on different areas. PHP provides many image processing functions, one of which is the imageopenpolygon() function that helps us achieve this feature.
The imageopenpolygon() function in PHP is not a standard GD library function, so it is usually not directly found in the official PHP documentation. However, many PHP developers may use extensions or custom implementations to perform polygon filling and hotspot area division in graphics.
To define a polygon hotspot area, we typically need to set the vertex coordinates of the polygon to identify a specific region. This feature can be applied when users need to click a specific area to trigger different events or redirects.
Load the image
Use functions like imagecreatefromjpeg() or imagecreatefrompng() to load the target image.
$image = imagecreatefromjpeg('image.jpg');
Define the polygon's vertex coordinates
We need to define a polygon for the hotspot area. The vertex coordinates of this polygon can be represented in an array. For example, the vertex coordinates of a rectangle could be:
$points = [
50, 50, // Point 1
150, 50, // Point 2
150, 150,// Point 3
50, 150 // Point 4
];
Draw the polygon hotspot area
Use the imagefilledpolygon() function to draw the polygon on the image and set a specific color. imagefilledpolygon() will fill the polygon with color on the image.
$color = imagecolorallocate($image, 255, 0, 0); // Red color
imagefilledpolygon($image, $points, count($points) / 2, $color);
Obtain the hotspot area and make it interactive
After generating the image, we can use image maps to set up interactions for these hotspot areas. By mapping the polygonal area to a corresponding URL, users can be redirected to specific pages when they click on certain areas.
For interactive images, it is typically necessary to use JavaScript and HTML in combination, while PHP handles the image processing and generation. For example:
<img src="image.php" usemap="#hotspot" />
<map name="hotspot">
<area shape="poly" coords="50,50,150,50,150,150,50,150" href="http://m66.net/target-page1" />
</map>
<?php
// Create image
$image = imagecreatefromjpeg('image.jpg');
<p>// Define the polygon's vertices<br>
$points = [<br>
50, 50, // Point 1<br>
150, 50, // Point 2<br>
150, 150,// Point 3<br>
50, 150 // Point 4<br>
];</p>
<p>// Set the color<br>
$color = imagecolorallocate($image, 255, 0, 0); // Red</p>
<p>// Draw the polygon<br>
imagefilledpolygon($image, $points, count($points) / 2, $color);</p>
<p>// Output the image<br>
header('Content-Type: image/jpeg');<br>
imagejpeg($image);</p>
<p>// Destroy image resource<br>
imagedestroy($image);<br>
?><br>
The above code will generate an image with hotspot areas and output it in JPEG format. If you want to use these hotspots on a webpage, you can make the image interactive using HTML image maps ( tag).
Polygon vertex coordinates: Make sure the coordinates you pass are correct and match the image size. Otherwise, the hotspot area may not display correctly.
Image format: Depending on your needs, you can use different image formats (JPEG, PNG, etc.), and adjust the functions accordingly, such as imagecreatefrompng() or imagejpeg() etc.
Interactivity: If more complex interactivity is needed, such as dynamically handling hotspot areas based on click positions, it is recommended to combine frontend technologies (like JavaScript) to enhance user experience.
PHP provides various image processing functions that help developers flexibly handle hotspot areas in images. When used with the imagefilledpolygon() function, developers can precisely divide different regions of an image to achieve more detailed interactive designs. For scenarios where dynamic images are generated and need to respond to user clicks, PHP, in combination with HTML and JavaScript, can easily implement rich image interaction features.
