How to ensure that a link on an image doesn't move-CodePudding

I've been trying to put a link on a 1920x1080 picture at a specific spot. But when I resize the browser the link switches position. How can I ensure that the link stays at the same spot regardless of the size of the browser window?

<!DOCTYPE html>
<link rel="stylesheet" href="../style.css" />

<html>
    <head>
        <title>My Website</title>
    </head>

    <body>
        <div >
            <img
                src="image.png"
                alt="This is a 1920x1080 image"
                usemap="#myWorkmap"
                height="1080"
                width="1920"
            />
        </div>
    </body>

    <map name="myWorkmap">
        <area shape="rect" coords="910, 730, 1031, 758" alt="This is a link to another HTML page" href="index2.html" />
    </map>

</html>

CodePudding user response：

I've fixed it for you, for the positioning use percentage better

<!DOCTYPE html>
<link rel="stylesheet" href="../style.css" />

<html>

<head>
  <title>My Website</title>
</head>

<body>
  <div >
    <img src="image.png" alt="This is a 1920x1080 image" usemap="#myWorkmap" height="1080" width="1920" />
  </div>
  <map name="myWorkmap">
    <area shape="rect" coords="910,730,1031,758" alt="This is a link to another HTML page" href="index2.html" />
  </map>
</body>

</html>