Help me to understand. Created 3 pictures by js. Task : when I hover over the image, the description appears in another DIV. But only the first picture works, the rest are not. How to check which image is the mouse hovering? Tried and through document Id, and Name to address, but, probably, somehow not so.

// Воин var imgW = document.createElement ('img'); imgW.src = 'img/warrior.png'; imgW.id = 'imgWarrior'; imgW.name = 'imgWarrior'; //img.setAttribute('onClick', 'imgClick();'); imgW.setAttribute('onMouseOver', 'imgOver();'); imgW.setAttribute('onMouseOut', 'imgOut();'); document.getElementById('q').appendChild(imgW); // Охотник var imgH = document.createElement ('img'); imgH.src = 'img/hunter.png'; imgH.id = 'imgHunter'; imgH.name = 'imgHunter'; //img.setAttribute('onClick', 'imgClick();'); imgH.setAttribute('onMouseOver', 'imgOver();'); imgH.setAttribute('onMouseOut', 'imgOut();'); document.getElementById('q').appendChild(imgH); // Маг var imgM = document.createElement ('img'); imgM.src = 'img/mage.png'; imgM.id = 'imgMage'; imgM.name = 'imgMage'; //img.setAttribute('onClick', 'imgClick();'); imgM.setAttribute('onMouseOver', 'imgOver();'); imgM.setAttribute('onMouseOut', 'imgOut();'); document.getElementById('q').appendChild(imgM); function imgOver () { if (imgW) { document.getElementById('w').innerHTML = '<p><strong>Блядский Воин</strong>.</p>'; }else if (imgH){ document.getElementById('w').innerHTML = '<p><strong>Охотник за шелупонью</strong>.</p>'; }else{ document.getElementById('w').innerHTML = '<p><strong>Маг подщельник</strong>.</p>'; }; } function imgOut () { document.getElementById('w').innerHTML = ''; }

    1 answer 1

    You can replace the code

     imgH.setAttribute('onMouseOver', 'imgOver();'); imgH.setAttribute('onMouseOut', 'imgOut();');

    On

     imgH.setAttribute('onMouseOver', 'imgOver("imgWarrior");'); imgH.setAttribute('onMouseOut', 'imgOut("imgWarrior");');

    Thereby immediately inform the function on which picture was (is) focus.

    The over function in turn changes to something like

     function imgOver (hero) { switch (hero) { case 'imgWarrior': document.getElementById('w').innerHTML = '<p><strong>Блядский Воин</strong>.</p>'; break case 'imgHunter': document.getElementById('w').innerHTML = '<p><strong>Охотник за шелупонью</strong>.</p>'; break case 'imgMage': document.getElementById('w').innerHTML = '<p><strong>Маг подщельник</strong>.</p>'; break default: document.getElementById('w').innerHTML = '<p><strong>Вызов функции без параметров</strong>.</p>'; } }

    You can also use this , for this the expression if (imgW) { should be replaced by if (this.attr("id") == 'imgWarrior') { , and with subsequent conditions as well.

    • Thank you very much! This is what you need! This tried, but without .attr, and not at all correctly - now I realized that yes how. More on stackoverflow, it was suggested that such a construction could be written: imgM.onclick = function(){imgClick()}; - also did not know and did not see anywhere in textbooks. Here's what happened: jsfiddle.net/kachimov/6cxLa0Lz/7 - wowapk