Проблема с mouseover на DOM img на js

Question

Проблема с mouseover на DOM img на js

Рейтинг: 1Ответов: 1Опубликовано: 18.10.2014

Помогите разобраться. Создал 3 картинки js'ом. Задача: когда я навожу мышкой на картинку, появляется описание в другом DIV'е. Но работает только первая картинка, остальные нет. Как правильно проверить, на какую картинку наведена мышь? Пробовал и через документId, и Name обращаться, но, видимо, как-то не так.

    // Воин
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 = '';
}

javascript dom img

Источник: Stack Overflow на русском

Answer 1

▲ 2Принят

Можно заменить код

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

На

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

Тем самым сразу сообщать функции, на какой картинке был (есть) фокус.

Функция over в свою очередь измениться на нечто вроде

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

Также можно воспользоваться this, для этого выражение if (imgW) { следует заменить на if (this.attr("id") == 'imgWarrior') {, и с последующими условиями так же.

Проблема с mouseover на DOM img на js

Ответы