我想将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');
});
};
});
最佳答案
如前所述,您的悬停调用不在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');
}
);
});
