Welcome to WebmasterWorld Guest from 54.161.135.168

Forum Moderators: open

OnClick Image Change

   
7:59 pm on Jul 29, 2006 (gmt 0)

10+ Year Member



I have a sortable table with a few tab images at the top (i.e. "top today" "this week" "all time"). Each tab has 2 possible images (tabname_on or tabname_off).

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.

8:46 pm on Jul 31, 2006 (gmt 0)

WebmasterWorld Senior Member drdoc is a WebmasterWorld Top Contributor of All Time 10+ Year Member



You should probably create an array of all possible images. Use a common naming convention (such as "blah_on" and "blah_off").

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.

12:22 pm on Aug 1, 2006 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hi there alphacooler,

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>


birdbrain
 

Featured Threads

Hot Threads This Week

Hot Threads This Month