progyammer progyammer - 3 years ago 167
HTML Question

Changing footer image size displaces adjacent images

I am making the footer of my homepage that will contain the icons of three of my profiles and I'm using a javascript snippet to increase the size of the images when the cursor is brought on them and decrease it when the cursor is out. The images are to be displayed horizontally, next to one another (inline-block).

Although the script works fine, I'm having an issue with the HTML: when I hover over the first image in the row, its size increases but the other images get displaced from their position, i.e., the entire row gets disrupted.

I want the images to be independently changing their sizes upon the occurrence of the mouse events.

Here's the footer code:

<center><footer>

<div style="display:inline-block; height:40px; width:40px;">
<img style="vertical-align:center;" src="https://i.imgur.com/e9l6jhU.png"
id="0" height="30" width="30" onmouseover="footerimg2(0)"
onmouseout="footerimg1(0)" ></img>
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
<img style="vertical-align:center;" src="https://i.imgur.com/RvAl3ob.png"
id="1" height="30" width="30" onmouseover="footerimg2(1)"
onmouseout="footerimg1(1)" ></img>
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
<img style="vertical-align:center;" src="https://i.imgur.com/vYUYQw9.png"
id="2" height="30" width="30" onmouseover="footerimg2(2)"
onmouseout="footerimg1(2)" ></img>
</div>


</footer></center>


The javascript, in case it's relevant:

<script>

function footerimg2(id){
var x = document.getElementById(id);
x.width = 40;
x.height = 40;
}

function footerimg1(id){
var x = document.getElementById(id);
x.width = 30;
x.height = 30;
}

</script>





Here's the working JSFiddle



How do I make the images resize independently, without making the other images move?

Answer Source

Try to add position:absolute;

img {
  position: absolute;
}
<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/e9l6jhU.png" id="0" height="30" width="30" onmouseover="footerimg2(0)" onmouseout="footerimg1(0)" />
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/RvAl3ob.png" id="1" height="30" width="30" onmouseover="footerimg2(1)" onmouseout="footerimg1(1)" />
</div>

&nbsp;&nbsp;&nbsp;&nbsp;

<div style="display:inline-block; height:40px; width:40px;">
  <img style="vertical-align:middle;" src="https://i.imgur.com/vYUYQw9.png" id="2" height="30" width="30" onmouseover="footerimg2(2)" onmouseout="footerimg1(2)" />
</div>

<script>
  function footerimg2(id) {
    var x = document.getElementById(id);
    x.width = 40;
    x.height = 40;
  }

  function footerimg1(id) {
    var x = document.getElementById(id);
    x.width = 30;
    x.height = 30;
  }
</script>

Here is the Updated Fiddle.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download