JQuery悬停，图像映射，循环和数组

我想使用jQuery悬停方法在基础区域图像映射之上进行翻转，该映射包含许多奇怪的形状，以便滚动每个确切形状触发图像交换，以及.innerhtml在单独的文本块中交换。我从一个完全透明的占位符“零”图像开始，然后在翻转时切换到实时图像地图区域上方的png，然后在展开时返回零图像。JQuery悬停，图像映射，循环和数组

因此，一个区域地图区域的代码如下所示。这里，areamapImage1对应于基础图像的坐标区域。

$('#areamapImage1').hover(
    function() { 
     $('#imageSwap').attr('src','images/image1.png'); 
    }, 
    function() { 
     $('#imageSwap').attr('src','images/image0.png'); 
});

这就像一个魅力，只要我明确宣布每个悬停功能。对于20张图像，会产生大量不必要的代码;显然，它尖叫着阵列和循环。所以......应该很简单，以填充两个阵列：一个用于图像映射区域，一个用于交换图像。循环后的控制台日志记录给了我所期望的，但悬停功能不起作用。由于我从来没有在JS中做过很多任何事情，所以我强烈怀疑这里有一个大脑死亡的运算符错误，无论是由于JS/jQuery语法还是范围。据我所知，变量应该可用于悬停功能（？）。两个数组都返回字符串jQuery的语法将选择器放在单引号中;当我尝试设置imageArea数组以明确包含引号时，悬停引发了一个非常奇怪的语法错误，所以我认为jQuery只是使用常规字符串。

感谢您的任何建议！

$(document).ready(function() { 

    // image preload 
    var imageSource = []; 
    imageSource[0] = 'images/image0.png' //load 0 position with "empty" png 
    var imageAreas = []; 

    // area map and image array fill 
    for (var i=1; i<21; i++) { 
     imageSource[i] = 'images/image' + i + '.png'; // 
     imageAreas[i] = '#areamap_Image' + i; 

    $(imageAreas[i]).hover( // hover function 

     function() { 
      $('#imageSwap').attr('src',imageSource[i]); 
     }, 
     function() { 
      $('#imageSwap').attr('src','images/image0.png'); 
    }); 

}; 

});

来源

2009-04-18 boomturn

对不起，贴错码，悬停在与上述循环。 – boomturn 2009-04-18 15:03:38

由于发布，您的悬停呼叫不在您的for循环中，所以它只在i = 21时运行。

编辑：我打算扩大这个，实际上提出了一个不同的方法：首先循环遍历所有区域地图，并使用jQuery的'数据'调用向他们添加一些信息。这样，您可以将相同的悬停功能分配给所有区域地图。

实施例：

$(document).ready(function() { 
    for(var i = 1; i < 21; i++) { 
    $('#areamap_Image' + i).data('rolloverImage', 'images/image' + i + '.png'); 
    } 

    // Replace 'area' with a more specific selector if necessary 
    $('area').hover(
    function() { 
     $('#imageSwap').attr('src', $(this).data('rolloverImage')); 
    }, 
    function() { 
     $('#imageSwap').attr('src', 'images/image0.png'); 
    } 
); 
});

来源

2009-04-18 14:37:59

JQuery悬停，图像映射，循环和数组

回答

相关问题