I have a textbox on top of an image-map that is responsive, like this:
<div class="lala" role="main" style="height:100%">
<img class="imgg" src="../images/sellec.jpg" style="opacity:0; width:1790px; height:974px" usemap="#image-map">
<map name="image-map">
<area target="" alt="Tubeteira" title="Tubeteira" href="tub_oee.php" coords="290,250,140" shape="circle">
<area target="" alt="Rebobinadeira" title="Rebobinadeira" href="reb_oee.php" coords="715,250,130" shape="circle">
<area target="" alt="Cortadeira" title="Cortadeira" href="cort_oee.php" coords="1100,250,130" shape="circle">
<area target="" alt="CMW" title="CMW" href="empac_oee.php" coords="1510,250,130" shape="circle">
<area target="" alt="PW30" title="PW30" href="pw30_oee.php" coords="300,580,130" shape="circle">
<area target="" alt="S15" title="S15" href="s15_oee.php" coords="720,580,130" shape="circle">
<area target="" alt="IN3AL" title="IN3AL" href="in3al_oee.php" coords="1100,580,130" shape="circle">
<area target="" alt="Geral" title="Geral" href="geral_oee.php" coords="1480,580,130" shape="circle">
<form action="<?php echo $_SERVER['PHP_SELF']; ?>">
<input id="enter"type="text" class="heye"name ="tempo">
</map>
</div>
<script > $('map').imageMapResize();</script>
In the input CSS there is this:
.heye {
position: absolute;
top:840px;
left: 1530px;
}
I have tried to use these values in%. but it still did not work out. Whenever the screen resolution changes, the image-map resizes correctly, but the same does not happen with the input text. What can be done so that it also resizes?
Below is a print of how the image-map normally comes with the input text:
