las imágenes cambian en la pantalla div a medida que pasa el mouse sobre los enlaces de otra div

Tengo dos DIVelementos
En el interior, DIV_1quiero que se muestren ciertas imágenes cuando se las solicite, en DIV_2muchas tendré LINKS.

Cuando cada individuo LINKen DIV 2decir flotaba Quiero que la imagen-enlace relacionado que aparezca en DIV 1, a continuación, cambiar a otra foto si otro LINKse cernía , sino también la hace desaparecer cuando el puntero del ratón no lo hace flotar sobre la específica LINK.

Javascript

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

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

Agregue a sus enlaces este código:

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

Sin embargo, no se verá bonito. Considere usar jQuery.

EDITAR:

Usando jQuery puedes hacer esto:

HTML:

<a target='_blank' href="#" data-src="some.jpg" class="changeImage" >...</a>
<a target='_blank' 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();
     });

})

Puede ajustar la velocidad de animación proporcionando el tiempo de animación como argumento para mostrar () y ocultar (). URL para imágenes puestas en atributos data-src de una etiqueta.

Una alternativa que podría considerar sería establecer la background-imagepropiedad en CSS y luego agregar la :hoverpseudoclase para cambiar a la nueva imagen, evitando que tenga que lidiar con Javascript.

Usando la transitionpropiedad, incluso podría agregar un desvanecimiento entre las dos imágenes sin trabajo adicional de su parte, o la necesidad de incluir otra biblioteca como jQuery.

Aquí hay algunos jQuery simples que podría usar:

$('#DIV1').delegate('a', 'mouseenter mouseleave', function (e) {
    if (e.type === "mouseenter") {
        switch ($(this).attr('href')) {
            case "#link1":   
                $('#DIV2').html('<img src="image1.jpg" />');
                break;
            case "#link2":   
                $('#DIV2').html('<img src="image2.jpg" />');
                break;
        }
    } else if (e.type === "mouseleave") {
        $('#DIV2 img').fadeOut();
    }
});