鼠标悬停从元素数组开始随机翻转

Question

我得到的错误似乎是语法错误。我已经为此工作了 10 多天，并且几乎按照我想要的方式运行。但是，我想要的（理想情况下）是拥有它，以便当一个元素被 mousedOver 函数然后启动不同元素上的图像翻转。例如。第 1、2、3 点。 mouseOver point1 在点 1,2 或 3 的随机选择处启动翻转。例如，鼠标可能位于 'demo1' 但在 'demo3' 处启动翻转。希望这是有道理的。编辑：发现此页面具有类似的效果，除了更改背景而不是其他元素（例如，鼠标悬停在正方形上导致 color/image 改变圆形）https://processing.org/examples/rollover.html

第一个例子returns getElementById(..) null，我认为这意味着指向的变量还没有定义（因为要等到所有元素都加载完才能定义）。但如果它有效，它是否也会提供我希望的效果？

<head>
<script>
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg",    "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage
points= ["demo", "demo1", "demo2", "demo3"]
var pointed

//do not delete
document.getElementById(pointed).onmouseover = function() {mouseOver()};
document.getElementById(pointed).onmouseout = function() {mouseOut()};
document.getElementById(pointed).onmouseover = function() {mouseOver1()};
document.getElementById(pointed).onmouseout = function() {mouseOut1()};
document.getElementById(pointed).onmouseover = function() {mouseOver2()};
document.getElementById(pointed).onmouseout = function() {mouseOut2()};
document.getElementById(pointed).onmouseover = function() {mouseOver3()};
document.getElementById(pointed).onmouseout = function() {mouseOut3()};
//Random Image
function randomPick(arr) {
  var selected = arr[Math.floor(Math.random()*inames.length - 1)]
  return selected;
}
//Random Element
function randomPoint(arr) {
    var pointed = arr[Math.floor(Math.random()*points.length + 1)]
  return pointed;
}
//DEMO -> working
function mouseOver() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO -> working
function mouseOut() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO1 -> working
function mouseOver1() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO1 -> working
function mouseOut1() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO2 -> working
function mouseOver2() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO2 -> working
function mouseOut2() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
//DEMO3 -> working
function mouseOver3() {
    var myImage = document.getElementById(pointed);
    var selImage = randomPick(inames);
    myImage.src = "media/" + selImage;
}
//DEMO3 -> working
function mouseOut3() {
    var myImage = document.getElementById(pointed);
    myImage.src = "media/black.png";
}
}
</script>
  </head>
  <body>

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">

<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">

<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>

第二个例子是我所用的一个相当大的片段，我一直在尝试修改它以添加随机化。再一次，这是我第一次真正努力编写任何代码，但我一直在努力工作——我不会问我是否可以自己找到如何做。任何帮助都感激不尽。我一直在寻找一种更优雅的解决方案来创建我想要的效果，但由于时间限制，我刚刚决定这样做但是可行..

<head>
<script type="text/javascript">
//preload
window.onload = function(){
var pixel= ("black.png")
inames= ["black1.jpg", "black2.jpeg", "black3.jpg", "black4.jpg", "black5.jpg", "black6.jpg", "black7.jpg", "black8.jpg", "black9.jpg", "black10.jpg", "black11.jpg", "black12.jpg", ,"black.png", "black13.jpg", "black14.jpg", "black15.jpg", "black16.jpg", "black17.jpg", "black18.jpg", "black19.jpg", "black20.jpg", "black21.jpg", "black22.jpg", "black23.jpg", "black.png", "black24.jpg", "black25.jpg", "black26.jpg", "black27.jpg", "black28.jpg", "black29.jpg", "black30.jpg", "black31.jpg", "black32.jpg", "black33.jpg", "black34.jpg", "black35.jpg", "black36.jpg", "black37.jpg", "black38.jpg", "black39.jpg", "black40.jpg", "black41.jpg", "black.png", "black42.jpeg", "black43.jpg", "black44.jpg", "black45.jpg", "black46.jpg", "black47.jpg", "black48.jpg", "black49.jpg", "black50.jpg", "black51.jpg", "black52.jpg", "black53.jpg", "black54.jpg", "black55.jpg", "black56.jpg", "black57.jpg", "black58.jpg"]
var selected
var myImage
var selImage

//do not delete
document.getElementById("demo").onmouseover = function() {mouseOver()};
document.getElementById("demo").onmouseout = function() {mouseOut()};
document.getElementById("demo1").onmouseover = function() {mouseOver1()};
document.getElementById("demo1").onmouseout = function() {mouseOut1()};
document.getElementById("demo2").onmouseover = function() {mouseOver2()};
document.getElementById("demo2").onmouseout = function() {mouseOut2()};
document.getElementById("demo3").onmouseover = function() {mouseOver3()};
document.getElementById("demo3").onmouseout = function() {mouseOut3()};

//Random Image
    function randomPick(arr) {
      var selected = arr[Math.floor(Math.random()*inames.length + 1)]
      return selected;
    }
//DEMO -> working
    function mouseOver() {
        var myImage = document.getElementById(pointed);
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO -> working
    function mouseOut() {
        var myImage = document.getElementById(pointed);
        myImage.src = "media/black.png";
    }
//DEMO1 -> working
    function mouseOver1() {
        var myImage = document.getElementById("demo1");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO1 -> working
    function mouseOut1() {
        var myImage = document.getElementById("demo1");
    myImage.src = "media/black.png";
}
//DEMO2 -> working
    function mouseOver2() {
        var myImage = document.getElementById("demo2");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
    }
//DEMO2 -> working
    function mouseOut2() {
    var myImage = document.getElementById("demo2");
    myImage.src = "media/black.png";
}
//DEMO3 -> working
    function mouseOver3() {
    var myImage = document.getElementById("demo3");
        var selImage = randomPick(inames);
        myImage.src = "media/" + selImage;
}
//DEMO3 -> working
    function mouseOut3() {
        var myImage = document.getElementById("demo3");
    myImage.src = "media/black.png";
}
</script>
</head>
<body>
<image id="demo" src="media/black.png" style="position:absolute; top:35px; left:200px; height:auto; width:auto;" onMouseOver=mouseOver()  onmouseOut=mouseOut() alt="image1">

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOver1() onmouseOut=mouseOut1() alt="image2">

<image id="demo2" src="media/black.png" style="position:absolute; top:95px; left:50px; height:auto; width:auto;" onMouseOver=mouseOver2() onmouseOut=mouseOut2() alt="image3">

<image id="demo3" src="media/black.png" style="position:absolute; top:500px; left:10px; height:auto; width:auto;" onMouseOver=mouseOver3() onmouseOut=mouseOut3() alt="image4">
</body>

Answer 1

让所有项目都调用一个新函数。在新函数中，生成一个介于 1 和 3 之间的随机数。现在检查该值。如果值为 1，则调用第一个函数。如果是 2，则调用第二个。等等

function mouseOverAny(){

  var numberBetweenOneAndThree = (Math.random()*2)+1;
  switch(expression) {
    case 1:
      mouseOver1();
      break;
    case 2:
      mouseOver2();
      break;
    case 3:
      mouseOver3();
      break;
  }

}

...

<image id="demo1" src="media/black.png" style="position:absolute; top:250px; left:500px; height:auto; width:auto;" onMouseOver=mouseOverAny() onmouseOut=mouseOut1() alt="image2">

鼠标悬停从元素数组开始随机翻转

Mouseover initiates random rollover from array of elements

javascript

arrays

random

rollover

getelementbyid