homepage Welcome to WebmasterWorld Guest from 54.167.179.48
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
OnClick Image Change
alphacooler

5+ Year Member



 
Msg#: 3027425 posted 7:59 pm on Jul 29, 2006 (gmt 0)

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.

 

DrDoc

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



 
Msg#: 3027425 posted 8:46 pm on Jul 31, 2006 (gmt 0)

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.

birdbrain

WebmasterWorld Senior Member 10+ Year Member



 
Msg#: 3027425 posted 12:22 pm on Aug 1, 2006 (gmt 0)

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

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved