How to show a picture when hover a link (mouseover/mouseout)?

Question

I am trying to get a link to show a box with a picture in it, with mouseover and mouseout . I have tried an array, but couldn't get any result out of that and right now, this is the code I have (which gives me the same result as the array).

I get the image to show, but I only get the first one, for all links. I got the same result when I used an array (that all links shows a pic, but only the first pic), but I guess I just fail to connect the right picture with the right link.

Can someone please help me with this?

<p id="lankar"><a href="#" alt="site1" />Link 1</p>
<p id="link" class="hide"><img src="img/bild1.jpg"></p>

<p id="lankar1"><a href="#" alt="site2" />Link 2</p>
<p id="link1" class="hide"><img src="img/bild2.jpg"></p>

<p id="lankar2"><a href="#" alt="site3" />link 3</p>
<p id="link2" class="hide"><img src="img/bild3.jpg"></p>

<script>
var links = document.getElementById('lankar');
links.addEventListener("mouseover", showBox);
links.addEventListener("mouseout", hideBox);
var links1 = document.getElementById('lankar1');
links1.addEventListener("mouseover", showBox);
links1.addEventListener("mouseout", hideBox);
var links2 = document.getElementById('lankar2');
links2.addEventListener("mouseover", showBox);
links2.addEventListener("mouseout", hideBox);

function showBox() {
if(document.getElementById('lankar'))
document.getElementById('link').style.display = 'block';
else if(document.getElementById('lankar1'))
document.getElementById('link1').style.display = 'block';
else if(document.getElementById('lankar2'))
document.getElementById('link2').style.display = 'block';
}


function hideBox() {
if(document.getElementById('lankar'))
document.getElementById('link').style.display = 'none';
else if(document.getElementById('lankar1'))
document.getElementById('link1').style.display = 'none';
else if(document.getElementById('lankar2'))
document.getElementById('link2').style.display = 'none';
}
</script>

Answer 1

Use CSS :hover ... and drop a few markup's

 .lankar { display: block } .hide { display: none; } .lankar:hover + .hide, .hide:hover { display: block; } 

 <a class="lankar" href="#" alt="site1">Link 1</a> <img class="hide" src="http://placehold.it/150x100/00f"> <a class="lankar" href="#" alt="site1">Link 2</a> <img class="hide" src="http://placehold.it/150x100/0f0"> <a class="lankar" href="#" alt="site1">Link 3</a> <img class="hide" src="http://placehold.it/150x100/f00">