Onclick image change

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.

 

Is the image currently wrapped with a link? Like

<a href="x.html"><img src="1.jpg" /></a>

 

Put an id field on the img tag so you can reference it then use onmouseclick:

[img id="myImage1" src="button1.gif" onmouseclick="document.getElementById('myImage1').src='button1pressed.gif';"]

If you want them to be able to press it again to go back to its normal status, it's best to wrap the change inside a function that will toggle it back and forth, and call that toggle function on the onmouseclick event.

 

How would you implement the toggle function?

 

hi,
here is my try.check this.

 

*whispers...ive sent an 'email' to you with the modifications that id like / need...:O)

ive tried n' tried n' to no avail tried to 'add' two more 'if val==3 and if val==4...aka to make the current 1 and 2 go back to their 'off state' if one of the two new buttons 2/4 where to be checked ...

i can get the pictures to change respective of the button...but be darned if i can get them to go to the 'on state' n' make sure the others are all off...:O(

hugs as always n' looking forward to your reply...n' oooooooooh so hopes that youre still active on this board...:O)

 

It depends if the page is reloaded when the active tab is changed or if AJAX is used...

 

(Didn't read whole thread)

To change the src with javascript you simply could do an inline onclick attribute, like this:

<img src="image.jpg" id="image1" onclick="this.src='newimage.jpg';" alt="image" />

Then just when you click a different one, all other images go back to their preset values, by using this:

this.src = getAttribute("src");

**Not tested, but should work**

 

hi jaxo...
just a quick note to say thank you very much ill give it a try...:O)



hi cam...
just a quick note to say nope on the page reloading...you click the thumbnail n' then the larger pictures show up on one common spot on the same page...

 

hi jaxo...
just a quick note to say :O(...heres where im at...

currently for the 'four' small squares its...

<a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1"  onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2"  onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front3.jpg')">3</a>
<a href="javascript:changeImage('front4.jpg')">4</a>

Code (markup):

and when they are clicked the 'one' main images changes...

<img name="mainimage" src="front1.jpg" width="700" height="304" border="0" alt="">

Code (markup):

the above uses the following php ...

<script type="text/javascript">
function set(val)
{
     var path=document.getElementById(val).src;
	 var start=path.lastIndexOf("/")+1;
	 var end=path.lastIndexOf(".");
	 var source = path.substring(start,end);
	 //alert(type);
	 if(val==1)
	 {
		 document.getElementById("2").setAttribute("src","gallery.jpg");
		if(source=="news")
		  document.getElementById(val).setAttribute("src","news1.jpg");
		else if(source=="news1")
		  document.getElementById(val).setAttribute("src","news.jpg");
	 }
	  if(val==2)
	 {
		 document.getElementById("1").setAttribute("src","news.jpg");
		if(source=="gallery")
		  document.getElementById(val).setAttribute("src","gallery1.jpg");
		else if(source=="gallery1")
		  document.getElementById(val).setAttribute("src","gallery.jpg"); 
	 }
	
}
</script>



AND>>>>
i also have this  script in play being used to 'change' the big image...
<script language="JavaScript" type="text/javascript">

function changeImage(filename)
{
   document.mainimage.src = filename;
}
</script>

Code (markup):

sooooooo...
what im trying to do is get the numbers three and four into the 'when clicked be the large coloured square'... AND if one of the other 4 are clicked the one you were just one goes back to small...:O)

<a href="javascript:changeImage('front1.jpg')"><img src="news.jpg" id="1"  onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front2.jpg')"><img src="gallery.jpg" id="2"  onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front3.jpg')"><img src="promotion.jpg" id="3"  onclick="set(this.id)" width="30" height="30" border="0"></a>
<a href="javascript:changeImage('front4.jpg')"><img src="community.jpg" id="4"  onclick="set(this.id)" width="30" height="30" border="0"></a>

Code (markup):

ive also seen scripts/css that just puts a border around the thumbnail which is a 'downsized copy' of the large one.....where as this php one uses two graphics for EACH of the four links...news and news1... gallery and gallery1...and id like to have large/small boxes vs a shrunk big one...:O(


hugs as always n' looking forward to your reply 'ifin' you have the time...:O)))))

 

Hi justame,
I have sent a mail ,regarding your problem.
looking forward to your Feedback