Question

I have two DIV elements.
Inside DIV_1 i want certain images to be display when called upon, in DIV_2 i will have many LINKS.

When each individual LINK in DIV 2 is hovered I want the link-related image to appear in DIV 1, then change to another pic if another LINK is hovered, but also make it disappear when the mouse arrow doesn’t hover over the specific LINK.

Javascript

function showIt(imgsrc) 
{
    document.getElementById('bottle').src=imgsrc;
    document.getElementById('bottle').style.display='block';
}

function hideIt()
{
    document.getElementById('bottle').style.display='none';
}

Answer 1

Add to your links this code :

<a href="#" onmouseover="showIt('some_image.jpg')" onmouseout="hideIt()" >...</a>

However it wont look pretty. Consider using jQuery.

EDIT:

Using jQuery you could do this way:

HTML:

<a href="#" data-src="some.jpg" class="changeImage" >...</a>
<a href="#" data-src="another.jpg" class="changeImage" >...</a>
...
<img class="bottle" />

JavaScript

$(function(){
  $('.changeImage').hover(function(){
         $('.bottle').attr('src',$(this).attr('data-src'));
         $('.bottle').show();
     },
     function(){
         $('.bottle').hide();
     });

})

You can adjust animation speed by providing animation time as argument to show() and hide().
URL for images put in data-src attributes of a tags.