I’ver been whacking my brain about this since last week :(I have a page that uses a tabbed interface but the menu is a graphic tied to a map layout. what I did was I used jQuery codes to do the hover effect for each of the five areas. Here’s the code:
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>
The graphic is broken down into five areas, so I’ve assigned each of them hover effects. On initial load, it works fine. Same is true when, from initial load (“id21”), I hover over the areas other than area1. The codes work as expected. The problem arises when I click on area 1 from one of the other areas. So, for example, I’m in area 2 and I click on area 1, the image change starts to get confused.
for example, on initial load, it’s supposed to go to id1. The image displays id1_src (which is id1.png). Hovers on the other areas result in the following:
area 2: id1-1.png (id11_src)
area 3: id1-2.png (id12_src)
area 4: id1-3.png (id13_src)
When I click on area 2, the image’s source changes to id2.png (id2_src), so that is our base graphic. hover effects are the following:
area 1: id1-1.png (id21_src)
area 3: id1-2.png (id22_src)
area 4: id1-3.png (id23_src)
The other areas follow the same pattern. I encounter the error when, from any other area, I click on area 1. Somehow, instead of following the convention listed above for id1, the graphic starts to get confused, by mixing (or perhaps retaining) the previous values. the hover effect somethings shows the original base graphic.
What’s odd is that I only encounter this problem in id1 (or area 1) when transitioning from other area.
Please help 🙁 thanks in advance,
Poch
If I knew JavaScript better, I could give you a reasonable way to compress all these lines:
There’s a handful of ways to improve this; for languages with a formatted print routine, it’d look something like this:
Then when you need one, you’d use:
In languages without a formatted print routine, you’d probably use string concatenation: