我想将jQuery悬停方法用于包含多个奇数形状的基本区域图像地图上方的鼠标悬停,以便在每个确切的形状上悬停都会触发图像交换,以及在单独的文本块中进行.innerhtml交换.我从完全透明的占位符“零”图像开始,然后在过渡时交换到实时图像地图区域上方的png,然后在过渡时返回到零图像.

因此,一个区域地图区域的代码如下所示.这里,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');
    });
};
});