<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'));}}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.