从阵列中翻转调用图像

Rollover calling image from array

本文关键字：调用 图像 翻转 阵列      更新时间：2023-09-26

在一个网页上工作，我希望从同一基本图像进行多次翻转（分布在整个页面中的多个黑色像素 - 有点像弹出效果）。我认为最简单的方法是拥有一个包含所有翻转图像的数组和一个包含基本图像（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>

这很简单，但你发布的内容甚至没有接近：

下面是工作示例：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];
  }              
}
相关文章：