The SitePoint Forums have moved.

You can now find them here.
This forum is now closed to new posts, but you can browse existing content.
You can find out more information about the move and how to open a new account (if necessary) here.
If you get stuck you can get support by emailing forums@sitepoint.com

If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

Tab Images switch on tab menu click

My question is how can I begin to have the tab image for articles go from articles_current.gif to just articles.gif (turn off the highlight) when another tab is clicked. And the tab that is clicked has it's image switched to for example blogs_current.gif (turn on highlight).

Because this is interesting idea I uploaded there another one unobtrusive version, which works even without images and with img use just one image so when it is loaded it react immediately. http://xy.wz.cz/a/index2.html

function defPos(){
var ar=document.getElementById('keeper'); //choose area where script will works
var al=ar.getElementsByTagName('em'); //choose lements on which script will work
for(var i=0;i<al.length;i++){ //make an array from this elements
al[i].style.backgroundPosition=-((i*92)+37)+'px 0';
//set defaule position, each tab is 92px width so move each one to appropriate positon
//this array contains 4 elements em, every one is 92px width, it is set by css
//this script is here to set them to default position
/* in css it is this part
a#tab1 em{background-position:-37px 0;}
a#tab2 em{background-position: -129px 0;}
a#tab3 em{background-position: -221px 0;}
a#tab4 em{background-position: -313px 0;}
*/
}
}
function init(){
var ar=document.getElementById('keeper'); // again choose area where script should work
var al=ar.getElementsByTagName('a'); // now we choose element a
for(var i=0;i<al.length;i++){ // make an array from a elements
al[0].lastChild.style.backgroundPosition='-37px -22px';
// set first em background to position onload
// em is lastChild of each a element
// al[0] is first a element in created array
// the same is in css this a#tab1 em{background-position:-37px -22px;}
var rl=al[i].getAttribute('href'); // pickup value of href from a elements
al[i].setAttribute('rel',rl); // set attribute rel and leave in this attribute hrefs which you picked up before
al[i].setAttribute('rev',i); // create an attribute rev and put there i, it is order in array (number)
al[i].removeAttribute('href'); // remove all href, you don't need them more, they are in rel attribute and you will not have to use reurn false, it makes problems in firefox with some addons
al[i].onclick=function(){ // call function when you click href
n=-((this.getAttribute('rev')*92)+37);// variable pickup rev attribute and times it by width of tab (37 means it is moved to center on bg.jpg)
m=-44-(this.getAttribute('rev')*362); // variable pickup rev attribute and times it by height of div 362px it is the same as beginning pictures height, 44 is height of active and inactive tab 2*22px
defPos(); // set deafault position of tabs
this.lastChild.style.backgroundPosition=n+'px -22px'; // set position of clicked tab to em{background-position:variable -22px;} it will be dark blue
document.getElementById("desc").firstChild.nodeValue=this.title; // set description from href title
document.getElementById('ph').style.backgroundPosition='0 '+m+'px'; // set bacground image of div#ph counted from attribute rev times by begining height + height of tabs
};
}
}
window.onload=function(){init();};