<div class="block clear">
<div  class="flex">
<a href="#" data-src="http://placehold.it/140x240/cc0">link1</a>
<a href="#" data-src="http://placehold.it/140x240/c00">link2</a>
<a href="#" data-src="http://placehold.it/140x240/00c">link3</a>
</div>
<img src="http://placehold.it/140x240/cc0" alt="" id="img">
</div>
a{
  display: block;
}
div{
  float: left;
}
img{
  float: right;
}

.clear{
  clear: both;
  width: 300px;
  margin: auto;
}
let link = document.querySelectorAll("a");
     for(let i=0; i<link.length; i++){
     link[i].onmouseover = function (){
      document.querySelector("#img")
        .setAttribute('src', link[i]
        .getAttribute('data-src'));}}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.