为什么这个鼠标悬停/翻转不起作用？

Question

我有3张图片（pic1，pic2，pic3），点击div ID更改为（pic4，pic5，pic6）。所有这一切工作正常，但我需要输入一个鼠标悬停命令，当鼠标悬停在pic2上时，它会更改为图7，并且在mouseout上它会返回到图片2.我不确定为什么我的代码的这部分不起作用，这是语法错误吗？我试图用来做这个的两个函数是“rolloverImage”和“init”。

HTML

   <div id="content1">
        <img src="pic1.jpg" alt="pic1"/>
        <img src="pic2.jpg" alt="pic2" id="pic2"/>
        <img src="pic3.jpg" alt="pic3"/>
    </div>

的Javascript

var g = {};

//Change background colors every 20 seconds
function changebackground() { 
    var backColors = ["#6AAFF7", "#3AFC98", "#FC9B3A", "#FF3030", "#DEDEDE"];
    var indexChange = 0;

    setInterval(function() { 
        var selectedcolor = backColors[indexChange];
        document.body.style.background = selectedcolor;
        indexChange = (indexChange + 1) % backColors.length;
    }, 20000);
}


function rolloverImage(){
    if (g.imgCtr == 0){
        g.pic2.src = g.img[++g.imgCtr];
    }
    else {
        g.pic2.src = g.img[--g.imgCtr];
    }
}

function init(){
    g.img = ["pic2.jpg", "pic7.jpg"];
    g.imgCtr = 0;

    g.pic2 = document.getElementById('pic2');


    g.pic2.onmouseover = rolloverImage; 
    g.pic2.onmouseout = rolloverImage;
}

window.onload = function() {

var picSets = [
  ["pic1.jpg", "pic2.jpg", "pic3.jpg"],
  ["pic4.jpg", "pic5.jpg", "pic6.jpg"],
];


var currentSetIdx = 0;

var contentDiv = document.getElementById("content1");
var images = contentDiv.querySelectorAll("img");

refreshPics();


contentDiv.addEventListener("click", function() {
  currentSetIdx = (currentSetIdx + 1) % picSets.length;
  refreshPics();
});

function refreshPics() {
  var currentSet = picSets[currentSetIdx];
  var i;

  for(i = 0; i < currentSet.length; i++) {
    images[i].src = currentSet[i];
  }
}
        changebackground();
        init();
}