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';
}
Respuesta 1

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.

Respuesta: 2

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.

Respuesta: 3

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();
    }
});
Respuesta: 4

¡Gracias por adelantado! Soy nuevo en gcp y estoy tratando de usar Cloud SQL Postgres. Tengo una base de datos que se crea y me gustaría crear / actualizar / eliminar tablas usando Java o Scala. Soy ...

Quiero crear una aplicación Java que pueda extraer un icono de tamaño específico de un archivo ico. Es decir, extraer un icono de 64 x 64 de un archivo Ico de múltiples iconos. ¿Hay alguna forma de hacer esto en Java?

Tome el bloc de notas por ejemplo. Puede abrir un archivo con el bloc de notas (haga clic derecho y abrir con, o haga doble clic en el archivo si ya está asociado con el bloc de notas) y mostrará el contenido de un ...

Tengo algunos problemas para analizar un archivo XML. El problema: <verificación apariencia = "4"> contenido = "<myTag> prueba <myTag> /images/titleIcon.png" </verification> para ...