Замена изображений при наведении курсора только на дочерние узлы и JavaScript - PullRequest
Новая
       40

Замена изображений при наведении курсора только на дочерние узлы и JavaScript

0 голосов
/ 26 мая 2019

Мне нужно разместить три изображения рядом, и функцию onmouseover, когда пользователь наводит курсор мыши на изображение, это конкретное изображение будет дублировать на двух других изображениях.Когда использование перемещает мышь из изображения, изображение будет восстановлено как на начальной странице.Но я должен использовать дочерние узлы для этого.Я не могу понять это.

Я попробовал следующий код, но он ничего не делает.Я попытался вставить код здесь, но он попал в тело сообщения, поэтому я сделал этот кодовый блок там, где вы можете его увидеть.Пока что мне нужно только чтобы index [1] и index [2] pic отображались в index [0], но никаких других изменений не происходит.https://codepen.io/anon/pen/xNjezN

function heroes(q){
    if(q.src == imgArray[0])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[0];
        }
    }
    else if(q.src == imgArray[1])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[1];
        }
    }
    else if(q.src == imgArray[2])
    {
        for(var index=0; index<images.length; index++)
        {
            images[index] = document.getElementById("legends").childNodes[index];
            images[index].src = imgArray[2];
        }
    }
}

Если кто-то может подсказать, пожалуйста.

Ответы [ 2 ]

1 голос
/ 26 мая 2019

Если это то, что вы хотите, я только что выбрал все теги img, из которых вы хотите получить src в событии onmouseout. onmouseout функция обратного вызова. Я только что заменил значение mnImg.src на текущее изображение.

Если вы хотите заменить img src на мышь, вы можете заменить onmouseout на onmouseover.

При отсутствии мыши 

let images = document.querySelectorAll('.img');
let mnImg = document.querySelector('#mnImg');

images.forEach(img => {
  img.onmouseout = function() {
    mnImg.src = this.src;
  };
})
img {
  height: 100px;
  width: 100px;
}
<body>
  <div id="legends">
    <img src="https://imagizer.imageshack.com/img921/9646/HCBvlG.jpg" id="mnImg">
    <img src="https://imagizer.imageshack.com/img924/3295/Fb6gMO.jpg" class='img'>
    <img src="https://imagizer.imageshack.com/img923/6089/01GQK7.jpg" class='img'>
  </div>
</body>

при наведении мыши на 

let images = document.querySelectorAll('.img');
let mnImg = document.querySelector('#mnImg');

images.forEach(img => {
  img.onmouseover = function() {
    mnImg.src = this.src;
  };
})
img {
  height: 100px;
  width: 100px;
}
<body>
  <div id="legends">
    <img src="https://imagizer.imageshack.com/img921/9646/HCBvlG.jpg" id="mnImg">
    <img src="https://imagizer.imageshack.com/img924/3295/Fb6gMO.jpg" class='img'>
    <img src="https://imagizer.imageshack.com/img923/6089/01GQK7.jpg" class='img'>
  </div>
</body>
0 голосов
/ 26 мая 2019

Ты почти у цели. Следует отметить две вещи. Во-первых, дочерние узлы на самом деле являются «NodeList», который является «массивоподобным» . Его можно преобразовать в массив с помощью Array.from (nodeList). Во-вторых, разрыв строки читался как «текстовый» узел, поэтому фактически отображал 7 дочерних узлов. Вы можете отфильтровать их методом Array.prototype.filter() .

child nodes

Затем, когда вы работаете с фактическими элементами DOM, вы можете установить и сбросить src: https://codepen.io/anon/pen/vwjwXm?editors=1010

...