我有一个复杂的背景图像,有很多小区域需要翻转图高亮,以及每个区域的附加文本显示和相关链接.最后的插图使用z-index堆叠了几个具有透明度的静态图像,并且高亮翻转插图需要在中间的"三明治"层之一中显示以实现期望的效果.
在一些不成功的摆弄块后,我决定这可能是用旧式的图像映射完成的.我制作了一个带有四个几何形状轮廓的示意性测试图,并使用png翻转"填充"它们.我们的想法是将图像映射与底部背景图层相关联,使用css {visibility:hidden}初始化所有翻转,并使用Jquery的悬停方法使它们可见,并在单独的div中显示相关文本.单独的文本函数是我没有尝试使用:hover pseudoclass而不是jQuery hover的原因.因为我正在使用图像映射,所以我将所有翻转png(具有透明背景)的大小设置为整个容器以进行精确放置,因此所有内容都准确排列.
我得到了什么......不是真的!正确映射图像映射以仅激活几何区域.但是每个翻转区域的href只是间歇性地工作,并且使用带有css可见性的Jquery悬停是混乱的.期望的行为是滚入该区域只会使形状变得坚固.实际发生的是,形状内的任何运动都可以在可见和隐藏之间快速切换; 当光标在形状内停止时,它可能是可见的,也可能不是.任何想法赞赏!
样本悬停设置(我最终会使用数组进行实际翻转,相关链接和文本):
$('#triangle').hover(
function() {
$('#ID_triangle').css({'visibility' : 'visible'});
},
function() {
$('#ID_triangle').css({'visibility' : 'hidden'});
}
)
图像地图:
<div id="container">
<img src="images/testMap_w.png" width="800" height="220" alt="TestMap W" usemap="#testMap">
<map name="testMap">
<area shape="polygon" coords="20,20,106,20,106,106,20,106" href="http://www.stackoverflow.com" id="box" />
<area shape="polygon" coords="216,50,339,50,277,156" href="http://www.google.com" id="triangle" />
<area shape="polygon" coords="460,0,574,0,460,220" href="http://www.cnn.com" id="bordertriangle" />
<area shape="polygon" coords="704,65,769,115,744,196,665,196,640,115" href="http://slashdot.org" id="pentagon" />
</map>
<img src="images/testMap_box.png" width="800" height="220" alt="TestMap Box" id="ID_box">
<img src="images/testMap_triangle.png" width="800" height="220" alt="TestMap Triangle" id="ID_triangle">
<img src="images/testMap_border_triangle.png" width="800" height="220" alt="TestMap Border Triangle" …我已经使用jQuery Validation插件整理了一个表单,并且所有输入都可以正常工作验证和错误消息 - 复选框除外.我有两个复选框问题.
第一个是Validation插件API似乎不处理分组上下文中的复选框(我使用字段集进行分组).在这里找到了几个解决这个问题的方法,包括参考Rebecca Murphey关于使用自定义方法和类的更一般情况的帖子.适应这种情况:
jQuery.validator.addMethod('required_group', function(val, el) {
var fieldParent = $(el).closest('fieldset');
return fieldParent.find('.required_group:checked').length;
});
jQuery.validator.addClassRules('required_group', {
'required_group': true
});
jQuery.validator.messages.required_group = 'Please check at least one box.';
这种方法有效,但会在每个复选框上生成错误消息,并且仅在单击每个框时将其删除.这对用户来说是不可接受的情况,用户只能通过点击误报来消除它们.理想情况下,我猜需要的是在显示之前阻止或消除额外消息,并使用errorPlacement在父字段集中显示单个错误消息,然后通过单击任何复选框将其删除.理想情况下,也许它们都会显示,但事件处理程序可以通过点击关闭整套冗余消息,这就是tvanfosson提供的这种方法.(这里有另一个定制的方法,但我无法让它工作.)我想我还应该注意这个表单要求复选框有不同的名称.
我的第二个问题是,表单中带有复选框的其中一个字段集还包含一个外部复选框下的复选框的嵌套字段集.因此,除了第一级单框检查要求之外,如果选中包含第二级复选框的特定复选框,则必须至少检查一个第二级框.不确定正确的方法; 我猜测需要发生什么(遵循上述方案)是触发器复选框将使用toggleClass向子域中的所有复选框添加/删除'required_group'类,然后(希望)表现与父项相同领域:
$("#triggerCheckbox").click(function () {
$(this).find(":checkbox").toggleClass("required_group");
});
任何建议或想法欢迎.我已经远远超出了我在这一方面有限的jQuery技能,并且很高兴听到我错过了简单,优雅和/或明显的方法来做到这一点!
一直试图围绕功能范围包围大脑的Javascript关闭一直在努力,但我认为他们正在缠绕我.我看了很多帖子(Nyman是最有帮助的),但显然仍然没有得到它.试图在jQuery中对悬停方法运行循环.需要悬停功能才能最终触发多个动作,但是很高兴让他们现在可以使用单个图像交换.
$(document).ready(function() {
imageSource = [];
imageSource[0] = 'images/img0.png' //load 0 position with "empty" png
imgArea = [];
for (var i=1; i<11; i++) {
(function( ){ //anonymous function for scope
imageSource[i] = 'images/img' + i + '.png';
imgArea[i] = '#areamap_Img' + i;
// running console.log here gives expected values for both
$(imgArea[i]).hover( //imgArea[i] (selector) works correctly here
function() {
$('#imgSwap').attr('src',imageSource[i]); // imageSource[i] is undefined here
},
function() {
$('#imgSwap').attr('src','images/img0.png');
});
})(); // end anonymous function and execute
}; // for …