class="post-template-default single single-post postid-658 single-format-standard wp-custom-logo wp-embed-responsive right-sidebar nav-float-right separate-containers header-aligned-left dropdown-hover" itemtype="https://schema.org/Blog" itemscope>

How to get coordinates for image map in html

नमस्कार दोस्तों! इस लेख में हम How to get coordinates for image map in html का जवाब देने वाले है। इसमें हम आपको code भी दे रहे होंगे जिसको आप जहा चाहे वहा use कर सकते है।

How to get coordinates for image map in html

किसी भी इमेज का coordinates find करने का कुछ तरीका है जो इस प्रकार है:

  • आप इन tools का use कर सकते है।
  • आप photoshop का उसे कर सकते है।
  • आप Browser Developer Tools का भी use कर सकते है।
  • आप चाहे तो इसको manualy भी ढूंढ सकते है।

Image Map Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Map Example</title>
</head>
<body>

    <h1>Image Map Example</h1>

    <!-- Image with an associated image map -->
    <img src="example.jpg" alt="Example Image" usemap="#example-map" width="500" height="300">

    <!-- Define the image map -->
    <map name="example-map">
        <!-- Define a rectangular area -->
        <area shape="rect" coords="50,50,200,200" href="https://www.example.com/rectangle" alt="Rectangle Area">
        
        <!-- Define a circular area -->
        <area shape="circle" coords="300,150,50" href="https://www.example.com/circle" alt="Circle Area">
        
        <!-- Define a polygonal area -->
        <area shape="poly" coords="350,100,400,200,300,250,250,150" href="https://www.example.com/polygon" alt="Polygon Area">
    </map>

</body>
</html>

How to get coordinates for image map in html

इसे भी पढ़े:

Leave a comment