Question

我在js中创造了3个图片。 我想要的是什么：当我在图片上点击鼠标时，会显示说明。

但是只能先工作img。如何正确检查图片鼠标悬停？我会尝试使用documentID和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 = '';
}

Answer 1

如果您的html和span元素中有3个图像用于描述，则可以添加隐藏和可见类，只需在将鼠标悬停在图像上时打开和关闭它们即可。例如：

<div>
  <img class="image" src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
  <span class="hidden">image 1 description</span>
</div>

<div>
  <img class="image" src="http://charlottemcmanus.files.wordpress.com/2012/03/butterclock-2.jpg" />
  <span class="hidden">image 2 description</span>
</div>

使用jQuery，查看addClass，removeClass，toggleClass方法以获取帮助。它们对于操作元素中的样式很有用。我找到了带有.next（）方法的description元素，但是你可以想到一个更好的方法。

$(document).ready(function () {
  $( ".image" ).hover(
    function() {
      $(this).next('span').toggleClass('visible');
    }, function() {
      $(this).next('span').toggleClass('visible');
    }
  );
});

同时添加您要添加的CSS样式以显示和隐藏您的描述。

.image {
  height: 200px;
  width: 400px;
}

.hidden {
  visibility: hidden;
}

.visible {
  visibility: visible;
}

以下是一个例子：

jsfiddle example

Answer 2

我认为问题只是一些小的语法错误。最明显的是使用setAttribute来定义点击处理程序，在元素上使用.onclick，或者使用addEventListener（）方法，onmouseover和onmouseout也是小写。

以下是对代码的更新：

// Mage
var imgM = document.createElement ('img');
imgM.src = 'http://3runbrothers.ru/im/mage.png';
imgM.id = 'imgMage';
imgM.name = 'imgMage';
imgM.onclick = function(){imgClick()};
imgM.onmouseover = function(){imgOver()};
imgM.onmouseout = function(){imgOut()};

updated jsFiddle

在js上没有使用鼠标移植DOM img

2 个答案: