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

I want to use the jQuery hover method for rollovers above a base area image map that incorporates numerous odd shapes, so that rolling over each exact shape triggers an image swap, as well as an .innerhtml swap in a separate text block. I started with a placeholder “zero” image that’s completely transparent, then swap to a png above the live image map area on rollover, then back to the zero image on rollout.

我想在基础区域图像映射上方使用jQuery悬停方法进行翻转,其中包含许多奇怪的形状,因此滚动每个确切的形状会触发图像交换,以及单独文本块中的.innerhtml交换。我开始使用一个完全透明的占位符“零”图像,然后在翻转时交换到实时图像映射区域上方的png,然后在转出时返回到零图像。

So, code for one area map zone looks something like the below. Here, areamapImage1 corresponds to a coordinate zone of the base image.

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

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

This works like a charm, as long as I declare each hover function explicitly. For 20 images, that generates a ton of unnecessary code; obviously, it screams for arrays and a loop. So... should be simple to fill two arrays: one for the image map areas and one for the swap images. Console logging after the loop gives me what I expect, but the hover function doesn’t work. As I’ve never done much of anything in JS, I strongly suspect there’s a brain-dead operator error here, either due to JS/jQuery syntax or scope. As far as I can tell though, the variables should be available to the hover function(?). Both arrays return strings. jQuery has a syntax that puts selectors in single quotes; when I tried setting up the imageArea array to include the quotes explicitly, the hover threw a very strange syntax error, so I assume jQuery just uses regular strings instead.

这就像一个魅力,只要我明确声明每个悬停功能。对于20张图像,会产生大量不必要的代码;很明显,它会为数组和循环而尖叫。所以...应该很容易填充两个数组:一个用于图像映射区域,另一个用于交换图像。循环后的控制台记录给出了我的期望,但悬停功能不起作用。因为我从来没有在JS中做过太多的事情,所以我强烈怀疑这里有一个脑死亡的操作符错误,无论是由于JS / jQuery语法还是范围。据我所知,变量应该可用于悬停功能(?)。两个数组都返回字符串jQuery有一种语法,可以将选择器放在单引号中;当我尝试设置imageArea数组以显式包含引号时,悬停引发了一个非常奇怪的语法错误,因此我假设jQuery只使用常规字符串。

Thanks for any suggestions!

谢谢你的任何建议!

$(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');
    });

};

});

1 个解决方案

#1

As posted, your hover call isn't within your for loop, so it's only running for i=21.

发布时,您的悬停调用不在for循环中,因此它仅在i = 21时运行。

EDIT: I'm going to expand this and actually propose a different method: first loop through all your area maps and add some information to them using jQuery's 'data' call. That way you can assign the same hover function to all your area maps.

编辑:我将扩展它并实际提出一个不同的方法:首先遍历所有的区域地图,并使用jQuery的“数据”调用向它们添加一些信息。这样,您可以为所有区域地图指定相同的悬停功能。

Example:

$(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');
    }
  );
});