var id1_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png";
var id11_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png";
var id12_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-2.png";
var id13_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-3.png";
var id2_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2.png";
var id21_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-1.png";
var id22_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-2.png";
var id23_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id2-3.png";
var id3_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3.png";
var id31_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-1.png";
var id32_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-2.png";
var id33_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id3-3.png";
var id4_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4.png";
var id41_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-1.png";
var id42_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-2.png";
var id43_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id4-3.png";
(...I have a bunch of other similar declarations, 58 images in all...)
var img = "";
function rolloverArea(area, orgImgSrc, tgtImgSrc, orgCursor, tgtCursor) // jQuery script for rollover effect
{
$("imgTab").attr("src","");
$("#imgTab").attr("src", orgImgSrc);
$(area).hover(
function()
{
//alert(orgImgSrc + " on hover");
//alert(tgtImgSrc + " on hover");
$("imgTab").attr("src","");
$("#imgTab").attr("src", tgtImgSrc);
$("#imgTab").css("cursor",tgtCursor);
},
function()
{
//alert(orgImgSrc + " after hover");
//alert(tgtImgSrc + " after hover");
$("imgTab").attr("src","");
$("#imgTab").attr("src", orgImgSrc);
$("#imgTab").css("cursor",orgCursor);
}
);
}
function changeImgState(img) // tab interface of Day Week and Month arrows
{
var myImgTab = document.getElementById("imgTab");
switch (img)
{
case 'id1':
$(myImgTab).attr("src", "");
$(myImgTab).attr("src", id1_src);
$("#D1").css({"visibility":"visible", "position":"relative", "top":"0px"});
$("#D2").css({"visibility":"hidden", "position":"relative", "top":"0px"});
$("#D3").css({"visibility":"hidden", "position":"relative", "top":"0px"});
// Rollover effect for the image
rolloverArea("#area1",id1_src,id1_src,"auto","auto");
rolloverArea("#area2",id1_src,id11_src,"auto","pointer");
rolloverArea("#area3",id1_src,id12_src,"auto","pointer");
rolloverArea("#area4",id1_src,id13_src,"auto","pointer");
rolloverArea("#area5",id1_src,id1_src,"auto","auto");
// onClick effect
$("#area2").click(function() {
img = "";
changeImgState("id2");
}
);
$("#area3").click(function() {
img = "";
changeImgState("id3");
}
);
$("#area4").click(function() {
img = "";
changeImgState("id4");
}
);
break;
case 'id2':
$(myImgTab).attr("src", id2_src);
$("#D1").css({"visibility":"hidden", "position":"relative", "top":"0px"});
$("#D2").css({"visibility":"visible", "position":"relative", "top":"-588px"});
$("#D3").css({"visibility":"hidden", "position":"relative", "top":"0px"});
// Rollover effect for the image
rolloverArea("#area1",id2_src,id21_src,"auto","pointer");
rolloverArea("#area2",id2_src,id2_src,"auto","auto");
rolloverArea("#area3",id2_src,id22_src,"auto","pointer");
rolloverArea("#area4",id2_src,id23_src,"auto","pointer");
rolloverArea("#area5",id2_src,id2_src,"auto","auto");
// onClick effect
$("#area1").click(function() {
$(myImgTab).attr("src", "");
img = "";
changeImgState("id1");
}
);
$("#area3").click(function() {
img = "";
changeImgState("id3");
}
);
$("#area4").click(function() {
img = "";
changeImgState("id4");
}
);
break;
case 'id3':
$(myImgTab).attr("src", id3_src);
$("#D1").css({"visibility":"hidden", "position":"relative", "top":"0px"});
$("#D2").css({"visibility":"hidden", "position":"relative", "top":"0px"});
$("#D3").css({"visibility":"visible", "position":"relative", "top":"-874px"});
// Rollover effect for the image
rolloverArea("#area1",id3_src,id31_src,"auto","pointer");
rolloverArea("#area2",id3_src,id32_src,"auto","pointer");
rolloverArea("#area3",id3_src,id3_src,"auto","auto");
rolloverArea("#area4",id3_src,id33_src,"auto","pointer");
rolloverArea("#area5",id3_src,id3_src,"auto","auto");
// onClick effect
$("#area1").click(function() {
changeImgState("id1");
}
);
$("#area2").click(function() {
changeImgState("id2");
}
);
$("#area4").click(function() {
changeImgState("id4");
}
);
break;
case 'id4':
$(myImgTab).attr("src", id4_src);
// Rollover effect for the image
rolloverArea("#area1",id4_src,id41_src,"auto","pointer");
rolloverArea("#area2",id4_src,id42_src,"auto","pointer");
rolloverArea("#area3",id4_src,id43_src,"auto","pointer");
rolloverArea("#area4",id4_src,id4_src,"auto","auto");
rolloverArea("#area5",id4_src,id4_src,"auto","auto");
// onClick effect
$("#area1").click(function() {
changeImgState("id1");
}
);
$("#area2").click(function() {
changeImgState("id2");
}
);
$("#area3").click(function() {
changeImgState("id3");
}
);
break;
(...There are some more similar cases, but they're all basically the same as those above, except for the variables...)
}
}
/* My page has two tabs, the first one has three options - First Day, First Week, and First Month. The other one is the one that uses the image. The former is tied to changeTab and the other one uses the changeImgState. However, the former also uses the codes of the latter. */
function changeTab(tab)
{
switch(tab)
{
case 'day1':
var myTab = document.getElementById("day1");
document.getElementById("week1").className = "active";
document.getElementById("month1").className = "active";
myTab.className = "current";
changeImgState("id1");
// Rollover effect for the image
rolloverArea("#area1",id1_src,id1_src,"auto","auto");
rolloverArea("#area2",id1_src,id11_src,"auto","pointer");
rolloverArea("#area3",id1_src,id12_src,"auto","pointer");
rolloverArea("#area4",id1_src,id13_src,"auto","pointer");
rolloverArea("#area5",id1_src,id1_src,"auto","auto");
// onClick effect
$("#area2").click(function() {
changeImgState("id2");
}
);
$("#area3").click(function() {
changeImgState("id3");
}
);
$("#area4").click(function() {
changeImgState("id4");
}
);
break;
case 'week1':
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "active";
document.getElementById("week1").className = "current";
changeImgState("iw1");
rolloverArea("#area1",iw1_src,iw1_src,"auto","auto");
rolloverArea("#area2",iw1_src,iw11_src,"auto","pointer");
rolloverArea("#area3",iw1_src,iw12_src,"auto","pointer");
rolloverArea("#area4",iw1_src,iw13_src,"auto","pointer");
rolloverArea("#area5",iw1_src,iw14_src,"auto","pointer");
// onClick effect
$("#area2").click(function() {
changeImgState("iw2");
}
);
$("#area3").click(function() {
changeImgState("iw3");
}
);
$("#area4").click(function() {
changeImgState("iw4");
}
);
$("#area5").click(function() {
changeImgState("iw5");
}
);
break;
case 'month1':
document.getElementById("week1").className = "active";
document.getElementById("day1").className = "active";
document.getElementById("month1").className = "current";
changeImgState("im1");
// Rollover effect for the image
rolloverArea("#area1",im1_src,im1_src,"auto","auto");
rolloverArea("#area2",im1_src,im11_src,"auto","pointer");
rolloverArea("#area3",im1_src,im12_src,"auto","pointer");
rolloverArea("#area4",im1_src,im13_src,"auto","pointer");
rolloverArea("#area5",im1_src,im1_src,"auto","auto");
// onClick effect
$("#area2").click(function() {
changeImgState("im2");
}
);
$("#area3").click(function() {
changeImgState("im3");
}
);
$("#area4").click(function() {
changeImgState("im4");
}
);
break;
}
}
</script>
<script lang="en" type="text/jscript">
$(window).load(function()
{
changeTab('day1');
//preLoadImages();
});
</script>
图形分为五个区域，因此我为每个区域分配了悬停效果。在初始加载时，它工作正常。当从初始加载（“id21”）开始，我将鼠标悬停在除area1之外的区域时也是如此。代码按预期工作。当我从其中一个区域点击区域1时出现问题。所以，例如，我在区域2，我点击区域1，图像变化开始变得混乱。
例如，在初始加载时，它应该转到id1。图像显示id1_src（即id1.png）。悬停在其他区域会产生以下结果：
区域2：id1-1.png（id11_src） 区域3：id1-2.png（id12_src） 区域4：id1-3.png（id13_src）
当我点击区域2时，图像的源变为id2.png（id2_src），因此这是我们的基本图形。悬停效果如下：
区域1：id1-1.png（id21_src） 区域3：id1-2.png（id22_src） 区域4：id1-3.png（id23_src）
其他区域遵循相同的模式。我遇到错误时，从任何其他领域，我点击的，而不是按照上文列出的ID1公约区域不知何故，图形开始感到困惑，通过混合（或者保留）之前的值。悬停效果的某些部分显示原始基本图形。
什么是奇是从其他区域过渡时，我只遇到在ID1（或区域1）这个问题。
请帮助:(提前谢谢，
POCH
答案 0 :(得分：0)
如果我更了解JavaScript，我可以给你一个合理的方法来压缩所有这些行：
var id1_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1.png";
var id11_src = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/id1-1.png";
有一些方法可以改善这一点;对于具有formatted print例程的语言，它看起来像这样：
char *basefn = "/systems_hr/onboarding/Custom%%20Pages/Checklist%%20EN/images/%s.png";
然后当你需要一个时，你会使用：
printf(basefn, "id1");
printf(basefn, "id11");
在没有格式化打印例程的语言中，您可能使用字符串连接：
basefn = "/systems_hr/onboarding/Custom%20Pages/Checklist%20EN/images/"
tailfn = ".png"
def mk_fn(image)
return basefn + image + tailfn
end
mk_fn("id1")
mk_fn("id11")