Как поменять изображение другим при наведении на другое изображение?

Question

У меня есть 5 маленьких изображений и 1 изображение, которое в два раза больше, чем маленькие. То, что я пытаюсь сделать, - это всякий раз, когда вы наводите указатель на маленькие изображения, большое изображение меняется на изображение, которое вы висите. Мне сложно искать методы и функции, но пока что удачи. это то, что у меня есть

<div class="bigImg"> 
    <img id="image0" src="images/image1.png"> 
</div> 
<img id="image1" src="images/image1.png"> 
<img id="image2" src="images/image2.png"> 
<img id="image3" src="images/image3.png"> 
<img id="image4" src="images/image4.png"> 
<img id="image5" src="images/image5.png"> 

Я пытался добавить эту функцию, что я видел где-то еще здесь

function mouseOver() { 
    document.getElementById("image0").innerHTML = '<"image2.png"/>'; 
} 


function mouseOut() { 
    document.getElementById("image0").innerHTML = '<img src="image1.png" />'; 
} 

Я написал IMG тег, как

<img id="image1" onmouseover="mouseOver()" onmouseout="mouseOut()" src="images/image1.png">

для всех изображения, но не работает. Может ли кто-то направить меня в правильном направлении, пожалуйста?

Answer 1

Это, как я это сделал:

function mouseOut() { 
    document.getElementById("image0").src = 'http://lorempixel.com/g/600/600/'; 
} 

function changePic(elem) { 
    document.getElementById("image0").src = elem.src; 
} 

Here is the JSFiddle demo

Answer 2

Если вы хотите сделать это с помощью JQuery, вы можете попробовать это.

<div class="bigImg"></div> 
<img class="imgLink" src="http://dummyimage.com/100x100/eb00eb/fff" target="http://dummyimage.com/100x100/eb00eb/fff"> 
<img class="imgLink" src="http://dummyimage.com/100x100/000/fff" target="http://dummyimage.com/100x100/000/fff"> 
<img class="imgLink" src="http://dummyimage.com/100x100/999/fff" target="http://dummyimage.com/100x100/999/fff"> 

JS

$('.imgLink').hover(function(){ 
    $('.bigImg').css({'background':'url('+ $(this).attr('target') +')'}); 
},function(){ 
    $('.bigImg').css({'background':''}); 
}); 

Demo here

Answer 3

Базовая концепция заключается в том, что нам приходится ловить мыши и события мыши. Теперь при наведении мыши мы должны изменить атрибут src этого конкретного изображения и наоборот, чтобы вернуть исходное изображение.

Попробуйте это:

function mouseOver(element) { 
 
document.getElementById(element).src = 'https://www.google.co.in/images/google_favicon_128.png'; 
 
} 
 

 
function mouseOut(element) { 
 
document.getElementById(element).src = 'https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png'; 
 
}

<div class="bigImg"><img id="image0" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"></div> 
 
<img id="image1" onmouseover="mouseOver('image1')" onmouseout="mouseOut('image1')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"> 
 
<img id="image2" onmouseover="mouseOver('image2')" onmouseout="mouseOut('image2')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"> 
 
<img id="image3" onmouseover="mouseOver('image3')" onmouseout="mouseOut('image3')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"> 
 
<img id="image4" onmouseover="mouseOver('image4')" onmouseout="mouseOut('image4')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png"> 
 
<img id="image5" onmouseover="mouseOver('image5')" onmouseout="mouseOut('image5')" src="https://cdn0.iconfinder.com/data/icons/yooicons_set01_socialbookmarks/128/social_google_box.png">