Forum Moderators: open
I need some help figuring out how to turn a tab image "on" (change the image) if a user clicks on it. And then if a user clicks on a different tab the currently "on" tab needs to be switched back to "off" and the new selection needs to be "on".
I don't need any mouseover effects.
Any help would be GREATLY appreciated.
Let your onclick triggered function first set all images to the "off" version, and then set the applicable image to its "on" state. Alternately, you can use a variable to keep track of which image was last clicked, always reset that one to "off" before turning the applicable image "on".
Either way works, although the latter is much better if you have many tabs.
here is an example, that may suit your requirements...
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>simple tab swap</title>
<base href="http://mysite.orange.co.uk/azygous/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><style type="text/css">
<!--
body {
color:#000;
background-color:#eee;
}
#container{
width:466px;
margin:30px auto;
color:#000;
background-color:#fff;
}
.spacer {
float:left;
display:inline;
width:2px;
height:32px;
border-bottom:2px solid #000;
}
img{
float:left;
display:inline;
width:154px;
height:34px;
}
#contents {
clear:both;
padding-top:20px;
border:2px solid #000;
border-top:0px solid #000;
}
#contents p {
margin:20px;
text-align:justify;
}
.bg0 {
font-family:times,serif;
color:#006;
background-color:#eef;
}
.bg1 {
font-family:courier,monospace;
color:#600;
background-color:#fee;
}
.bg2 {
font-family:'comic sans ms',cursive;
color:#060;
background-color:#efe;
}
-->
</style><script type="text/javascript">
<!--
var imgs=new Array();
imgs[0]='images/tab_one_off.gif';
imgs[1]='images/tab_two_off.gif';
imgs[2]='images/tab_three_off.gif';
imgs[3]='images/tab_one_on.gif';
imgs[4]='images/tab_two_on.gif';
imgs[5]='images/tab_three_on.gif';window.onload=function() {
pic=document.getElementById('container').getElementsByTagName('img');
for(c=0;c<pic.length;c++) {
pic[c].onclick=function() {
num1=parseFloat(this.id.split('tab')[1]);
this.src=imgs[num1+3];
document.getElementById('contents').className='bg'+num1;
for(c=0;c<pic.length;c++) {
num0=parseFloat(pic[c].id.split('tab')[1]);
if(pic[c].id!=this.id) {
pic[c].src=imgs[num0];
}
}
}
}
}
//-->
</script></head>
<body><div id="container">
<img id="tab0" src="images/tab_one_off.gif" alt=""/>
<div class="spacer"></div>
<img id="tab1" src="images/tab_two_off.gif" alt=""/>
<div class="spacer"></div>
<img id="tab2" src="images/tab_three_off.gif" alt=""/><div id="contents">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim arcu,
ornare id, placerat eget, nonummy vitae, mauris. Nulla rutrum semper odio. Duis vulputate
ornare mauris. Praesent eget nibh sed ante ultricies scelerisque. Duis eget felis ut arcu porta
bibendum. Mauris rutrum. Vivamus consectetuer purus sit amet mi. Suspendisse eu augue.
</p>
</div></div>
</body>
</html>
