Mouseover инициирует случайный опрокидывание из массива элементов

Ошибки, которые я получаю, кажутся синтаксическими. Я работаю над этим более 10 дней и получил его работу практически так, как я хочу. Однако то, что я хочу (в идеале), это иметь его так, что когда элемент mousedOver, функция затем инициирует опрокидывание изображения на другом элементе. например. пункты 1,2,3. mouseOver point1 инициирует опрокидывание при случайном выборе из точек 1, 2 или 3. Так что, например, мышь может быть в «demo1», но инициирует опрокидывание на «demo3». Надеюсь, это имеет смысл. Edit: (., Например, MouseOver квадратных приводит изменение цвета/изображения на окружности) нашел эту страницу Wich имеет подобный эффект, за исключением изменений, которые фона вместо другого элемента https://processing.org/examples/rollover.htmlMouseover инициирует случайный опрокидывание из массива элементов

Первый пример возвращает getElementById (..) нуль, который, я думаю, означает, что указанная переменная еще не определена (потому что она не может быть определена до тех пор, пока все элементы не будут загружены). Но если это сработает, это также обеспечит эффект, на который я надеюсь?

<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, вызовите второе. И т.д.

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

Прекрасный ответ! Будучи noob, мне потребовался час или два, чтобы узнать об этом и заставить его работать, но он работает фантастически! (Особенно, когда у меня есть 20 разных элементов, которые я хочу рандомизировать между ними) - спасибо – theYnot

Такой красивый ответ я даже использовал для ** mouseOutAny ** с ** для (i = 0; i <5; i ++) ** выше ** var ** :) – theYnot

Очень приятно! Рад помочь. Не забудьте отметить мой ответ как «правильный». :) –

Mouseover инициирует случайный опрокидывание из массива элементов

ответ

Смежные вопросы