Mouseoverは要素の配列からランダムロールオーバーを開始します

私が得るエラーは構文的なようです。私はこれを10日間以上働いており、事実上彼らが望むように機能しています。しかし、私が望むもの（理想的には）は、要素がマウスであるときに、関数が別の要素でイメージのロールオーバを開始するようにすることです。例えば。ポイント1,2,3。 mouseOver point1はポイント1,2または3からのランダム選択でロールオーバーを開始します。たとえば、マウスは 'demo1'にあるかもしれませんが、 'demo3'でロールオーバーを開始します。うまくいけば、これは理にかなっている。編集：（たとえば円上カラー/画像変化のmouseOver正方形結果）このページをWICHが変化する背景の代わりに他の要素を除いて同様の効果を有するが見出さhttps://processing.org/examples/rollover.htmlMouseoverは要素の配列からランダムロールオーバーを開始します

最初の例では、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>

出典

2016-04-27 theYnot

は、すべての項目は、新しい関数を呼び出してください。新しい関数で、1と3の間の乱数を生成します。次に、値を確認します。値が1の場合は、最初の関数を呼び出します。 2の場合は、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">

出典

2016-04-27 22:41:14

美しい答え！それについて学ぶためには1時間か2時間かかりましたが、それはうまくいっていますが、それは素晴らしい作品です！（特に私がランダム化したい要素が20種類ある場合） - ありがとう – theYnot

このような美しい答えは、私も** mouseOutAny ** for ** for（i = 0; i <5; i ++） ** ** ** ** – theYnot

非常に良い！喜んで助けてください。私の答えを「正しい」とマークすることを忘れないでください。 :) –

Mouseoverは要素の配列からランダムロールオーバーを開始します

答えて

関連する問題