Cambiar una imagen dentro de un al pasar el cursor sobre otro

Tengo un div principal, #crbigimg , que tiene una imagen dentro de él #copyrightimagecurrent .

Además de esto, hay cuatro divs más pequeños dentro del div principal, cada uno de diferentes tamaños y posiciones sobre la imagen #copyrightimagecurrent .

Estructurado así:

 
Copyright

Lo que me gustaría hacer es, al pasar el cursor sobre cada uno de los divs secundarios #copyright , cambiar el src de la imagen #copyrightimagecurrent para mostrar una imagen diferente, y al quitar el mouse de una posición de vuelo estacionario, devolverlo al src original .

Supongo que para hacer esto necesito llamar a la función .hover jQuery en el div infantil, antes de alterar el HTML mismo. Esta segunda parte, sin embargo, actualmente se encuentra fuera de mis habilidades.

Si alguien pudiera ayudarme, lo agradecería.

Para una comstackción en vivo de la página en cuestión, consulte: http://bonfiredog.co.uk/copyright

Y para el código en bruto en sí:

HTML

   
Copyright

CSS

 #crbigimg{ margin-left:auto; margin-right:auto; margin-top:0%; width:25%; text-align:center; } #crbigimg img{ display:block; margin-left:auto; margin-right:auto; width:100%; height:auto; } #copyright1{ border: 2px solid green; width:3%; height:6%; position:absolute; top:21%; left:50%; z-index:5; } #copyright2{ border: 2px solid red; width: 6.5%; height: 15.4%; position: absolute; top: 20%; left: 45.3%; z-index: 2; } #copyright3{ border: 2px solid purple; width: 5.4%; height: 8%; position: absolute; top: 11.5%; left: 45.4%; z-index: 3; } #copyright4{ border: 2px solid blue; width: 4.1%; height: 6.6%; position: absolute; top: 11.6%; left: 49.6%; z-index: 4; } 

¡Sin Javascript / jQuery hasta el momento!

Agregue el nuevo src en cada elemento '#copyright' :

 
....

En mouseenter , aplique esta ruta data-src a la img:

 $('#crbigimg > div').on('mouseenter', function() { var newSrc = $(this).attr('data-src'); var img = $('#copyrightimagecurrent'); img.attr('data-orSrc', img.attr('src')); img.attr('src',newSrc); }).on('mouseleave', function() { var img = $('#copyrightimagecurrent'); img.attr('src',img.attr('data-orSrc')); }); 
 var img = $('#copyrightimagecurrent'); var originalSrc = img.attr('src'); $('#crbigimg > div').on({ mouseenter: function () { img.attr('src',$(this).data('src')); }, mouseleave: function () { img.attr('src',originalSrc); } }); 
 #crbigimg{ margin-left:auto; margin-right:auto; margin-top:0%; width:25%; text-align:center; } #crbigimg img{ display:block; margin-left:auto; margin-right:auto; width:100%; height:auto; } #copyright1{ border: 2px solid green; width:3%; height:6%; position:absolute; top:21%; left:50%; z-index:5; } #copyright2{ border: 2px solid red; width: 6.5%; height: 15.4%; position: absolute; top: 20%; left: 45.3%; z-index: 2; } #copyright3{ border: 2px solid purple; width: 5.4%; height: 8%; position: absolute; top: 11.5%; left: 45.4%; z-index: 3; } #copyright4{ border: 2px solid blue; width: 4.1%; height: 6.6%; position: absolute; top: 11.6%; left: 49.6%; z-index: 4; } 
  
Copyright

Mantenga todas las imágenes src en un json abject o matriz y úsela como se muestra a continuación

 var copywrightImg = { "copyright1": "img1path", "copyright2": "img2path", "copyright3": "img3path", "copyright4": "img4path" } $("#crbigimg div").hover(function () { if (Object.keys(copywrightImg).indexOf(this.id) != -1) { $("#copyrightimagecurrent").attr("src", copywrightImg[this.id]) } }, function () { $("#copyrightimagecurrent").attr("src", "http://bonfiredog.co.uk/ooo/icons/copyrightbase.png") }); 

Hice un pequeño ejemplo para ti aquí https://fiddle.jshell.net/5913ba1q/

Este es el js que necesitas para cambiar la imagen al pasar el mouse

 var currentImage = $('#copyrightimagecurrent').attr('src'), mainImage = $('.main-image img'); function changeImage(){ $('.copyright').hover(function(){ var el = $(this); imgUrl = el.data('image'); mainImage.attr('src',imgUrl) }, function(){ mainImage.attr('src',currentImage) }); } changeImage(); 

Cambié un poco tu html, aquí está:

 
Copyright

Puede llamar a las funciones .mouseover () y .mouseout () para hacer esto, así:

 jQuery(document).ready( function () { //Set your images (I've set two here for clarity) var rollover_image = "/images/image1.jpg"; var normal_image = "/images/image2.jpg"; //Roll the image jQuery("#copyright1") .mouseenter(function() { jQuery("#copyrightimagecurrent").attr("src", rollover_image); }) .mouseout(function() { jQuery("#copyrightimagecurrent").attr("src", normal_image); }); }); 
 
Copyright
one
two
three
four

 $('.cps').hover(function() { var that = $(this); var newSrc = that.attr('data-src'); var img = $('#copyrightimagecurrent'); img.attr('src',newSrc); },function() { var that = $(this); var img = $('#copyrightimagecurrent'); img.attr('src',img.attr('old-src')); }); 

Js Fiddle Demo

Creo que almacenar su src antes de cambiar lo hará.

Código de muestra :

 //First Get the Current src and Store it to Variable var initialImgSrc = $('#copyrightimagecurrent').attr('src'); $('#copyrightimagecurrent').hover( function () { //Change img src when hover over $('#copywriteimgecurrent').attr('src','picture-1.png'); }, function () { //When hover out get back to initial image $('#copywriteimgecurrent').attr('src',initialImgSrc); } );