Ролловер вызывает изображение из массива

Question

Ролловер вызывает изображение из массива

Работа над веб-страницей, где я хотел бы, чтобы несколько ролловеров с одного и того же базового изображения (несколько черных пикселей, распределенных по всей странице - вроде как всплывающий эффект) Я полагаю, что самый простой способ сделать это - иметь массив со всеми изображениями ролловеров и массив с базовым изображением (pixel.png). У меня было много проблем даже с отображением изображений, и теперь, когда у меня отображается фоновое изображение, я не могу заставить работать ролловер. Попытка устранения неполадок в Chrome с помощью разработчика / отладки, но без игры в кости - даже не показывает сообщение об ошибке. Я предполагаю, что это что-то простое, например, не вызывать функции должным образом, но я просто не вижу этого..

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
            var revert = new Array('pixel.png');
            var inames = new Array('black1off.jpg', 'black2off.jpeg');

         //preload
            if (document.images) {
                var flipped = new Array();
                  for(i=0; i< inames.length; i++) {
                        flipped[i] = new Image();
                        flipped[i] = "media/"+inames[i];
                      }
                    }

            function over(num) {
              if(document.images) {
                revert[num] = document.images[inames[num]];
                document.images[inames[num]] = flipped[num];
              }
            }
            function out(num) {
              if(document.images) {
                document.images[inames[num]] = revert[num];
             }              
            }

 </script>
 </head>
 <body>
 <body bgcolor="#000000">

    <img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:50px;" onMouseOver="over(0)" onMouseOut="out(0)">
    <img src="media/pixel.png" name="pixel" height="50px" width="50px" style="position:absolute; top:30px; left:200px;" onMouseOver="over(1)" onMouseOut="out(1)"> 
  </body>
  </html>

0

javascript arrays image rollover rollovers

Источник

user6240194 24 апр '16 в 01:09

1 ответ

Решение

Другие вопросы по тегам javascript arrays image rollover rollovers

user6241054 24 апр '16 в 01:15 2016-04-24 01:15 · Accepted Answer · 2016-04-24 01:15

Это просто, но то, что вы опубликовали, даже близко не было:

Вот рабочий пример: https://jsfiddle.net/tqw84trm/1/

if (document.images) {
  var flipped = new Array();
  for(i=0; i< inames.length; i++) {
    flipped[i] = new Image();
    flipped[i].src = "media/"+inames[i];
  }
}

function out (num) {
  if(document.images) {
    var rev = revert.slice();
    revert[num] = document.images[num].src;
    document.images[num].src = rev[num];
  }              
}