0
I have a text box on top of an image-map that’s responsive, that way:
<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’ve tried using these values in %. but it still didn’t work. Whenever the screen resolution changes, the image-map resizes correctly, but not the input text. What can be done to make it also resize?
Below is a print of what image-map looks like with input text:
How so, how do you want the input resize? You don’t want to have scroll bars on the screens? How do you want the behavior of this input?
– hugocsl
I would like it to remain at the same point in the image when it decreases or increases.
– Márcia
Seeing the image made it easier to understand. Try to edit the question and put the full CSS/HTML of what you have so far makes it easier. Also, I don’t know if you know, but this layout could have been done completely with CSS, didn’t need to make the image-map for this, doesn’t make sense...
– hugocsl