CSS背景图像更改与JavaScript翻转innerhtml

Question

我正在为我的课程做作业，需要使用javascript更改图像-这是CSS背景图像。 我真正想要的是当鼠标滑过图像时在图像上方弹出一些文本。 我正在尝试：

function mouseRollover(MyImage)
{
    MyImage.getElementById('picture1').innerHTML = "Aphex Twin";
    }

在我的html文档中，我有一个id为“ picture1”的div，其中还有函数名称的onmouseover和onmouseout。

但是我被告知“无法获取未定义或空引用的属性'getElementById'”，因此“ getElementById”似乎无法满足我的需要。 有什么方法可以使用innerHTML在图像上方放置单词吗？

Answer 1

使用事件监听器。 这是一个适合您的示例。

addEventListener('mouseover', function() { document.getElementById( "picture1" ).innerHTML = "Aphex Twin"; } );
addEventListener('mouseout', function() { document.getElementById( "picture1" ).innerHTML = ""; } );

Answer 2

不确定如何实现鼠标事件处理程序注册。 “无法获取未定义或空引用的属性'getElementById'”错误的根本原因是DOM引用错误。 如果mouseRollover是evnet侦听器，则“ MyImage”将是事件对象。 您应该使用“ event.target”或“ event.srcElement”（取决于浏览器）来获取DOM引用，然后对其进行操作。 尝试以这种方式实现：

的HTML

<div id="picture1" class="dynamic-img"></div>
<div id="picture2" class="dynamic-img"></div>

的CSS

#picture1{
width:512px;
height:349px;
background-image: url(http://www.vetprofessionals.com/catprofessional/images/home-cat.jpg);
}
#picture2{
width:512px;
height:349px;
background-image: url(http://images.wisegeek.com/young-calico-cat.jpg);
}

JS

function onMouseOver(e){
  var target = e.target || e.srcElement;

  switch(target.id){
    case "picture1":
    target.innerHTML = "Aphex Twin";
    break;
    case "picture2":
    target.innerHTML = "image2";
    break;      
  }

}
function onMouseOut(e){
  var target = e.target || e.srcElement;
  target.innerHTML = "";
}

var imgs = document.getElementsByClassName("dynamic-img"), len=imgs.length;

for(var i=0;i<len;i++){
  if(window.addEventListener){  //W3C
    imgs[i].addEventListener("mouseover",onMouseOver);
    imgs[i].addEventListener("mouseout",onMouseOut);
  }else if(window.attachEvent){  //IE<9
    imgs[i].attachEvent("onmouseover",onMouseOver);
    imgs[i].attachEvent("onmouseout",onMouseOut);
  }
}

这是jsFiddle演示

更新：请注意，在DOM准备好之后，您需要在这些div上注册悬停事件处理程序。 请把脚本部分放在正文的底部。 文档结构应如下所示：

<html>

<head>
<!--meta tag, style-->
<style>
<!--*****STYLE*****-->
</style>
</head>

<body>
    <!--*****DIV*****-->
    <div id="picture1" class="dynamic-img"></div>
    <div id="picture2" class="dynamic-img"></div>
    <!--*****JS*****-->
    <script src=""file.js></script>
</body>
</html>

CSS背景图像更改与JavaScript翻转innerhtml

问题描述

2 个解决方案

解决方案1
0 2014-05-14 05:17:22

解决方案2
0 已采纳 2014-05-14 06:33:26

CSS背景图像更改与JavaScript翻转innerhtml

问题描述

2 个解决方案

解决方案1 0 2014-05-14 05:17:22

解决方案2 0 已采纳 2014-05-14 06:33:26

解决方案1
0 2014-05-14 05:17:22

解决方案2
0 已采纳 2014-05-14 06:33:26