It should work with all of the latest versions. None of the core jquery events/functions have changed

Can actually be done fairly easily with just a couple of lines of jquery:

$('.img-btn.active').live('click',function(){
    $('.img-btn').toggleClass('active');
    $('#test').slideToggle();
});

Give the 2 images the class “img-btn” and add class “active” to the close button. See demo – http://www.designchemical.com/lab/jquery/demo/jquery_toggle_buttons.htm

i have 2 image buttons, one toggles a div open and the other toggles it closed.
im trying to make it where be default the open button is disabled image, and can’t click it, but then when you click the close button the opposite happens, however im having a real hard time achieving this, i can’t seem to get things figured out.

Thanks!

Although I have another question…. is it possible to substitute the second swapped image with text?

Thanks again!

Thanks for the cool trick.

I have a scenario that you can possibly look at?

I have a carousel gallery, and for each I want to add the image swap. if I were to click on an image (image A) and it swapped, is there a way to set up it to if I click on another image (Image B) – then Image A would swap back to the original picture and Image B show its new picture?

Thanks!
Jay

There are several ways you can do it. A few examples:

1. Load both images in the page and then show/hide based on clicked link

$('#book-1 li a').click(function(e){
		if($(this).hasClass('version-us')){
			$('#book-1 img.version-uk').fadeOut();
			$('#book-1 img.version-us').fadeIn();
		} else {
			$('#book-1 img.version-uk').fadeIn();
			$('#book-1 img.version-us').fadeOut();
		}
		e.preventDefault();
	});

2. Change the image using the “href” attribute of the link to switch the “src” value of the image

$('#book-2 li a').click(function(e){
		var src = $(this).attr('href');
		$('.book-version').attr('src',src);
		e.preventDefault();
	});

I think AJAX is maybe a bit of an overkill unless you need to dynamically generate the image in PHP and it cannot be done prior to loading the page. In this case though you cant call the pHP function directly in the jQuery code – you need to do an AJAX POST to a file, which then runs the function.

The function will return a value (e.g. the image HTML), which can then be used by jQuery to swap the images

$('#book-3 li a').click(function(e){
                // In this example we pass a variable using the rel attribute of the link.
		var rel = $(this).attr('rel');

                // AJAX POST - url of PHP file, any parameters you need to pass then finish off with the callback function if successful
		$.post('image_function.php', ({version: rel}),function(data){
			$('#book-3 img').fadeOut().remove();
			$('#book-3').append(data);
		});
		e.preventDefault();
	});

There are probably many other ways but this should hopefully give an idea of what kind of things you can do.

I have set up a demo page at the link below so you can also see the source code for each:

Jquery Demo – Change Image onclick

Thanks for your post. I have a similar scenario that I can’t quite figure out…

I’m working on a WordPress site which shows a list of books — and each book has 2 covers (a book cover for the US, and a different book cover for the UK/world).

I have a DIV with 2 links (US Version and UK Version) — and I’m trying to use jQuery and/or Ajax to switch the cover when you click on each link.

Here’s a screenshot: http://cl.ly/2W1U1j2k1c1S3q0g3w2m

I’m getting stuck because I need to call the image using a PHP function, let’s call it “get_image”

Here’s my code. Can you help?
HTML:

<a id="us-cover" href="#">US Version</a> | <a id="uk-cover"href="#">UK Version</a>

JAVASCRIPT:

jQuery(function(){
	 $("#us-cover").live('click', function() {
		<?php get_image('us'); ?>
	});
jQuery(function(){
	 $("#uk-cover").live('click', function() {
		<?php get_image('uk'); ?>
	});
});
});

You can use the following jQuery code:

$(function(){
	$("#btn-swap").click(function(){
		$('.img-swap').each(function(){
			if($(this).hasClass('on')){
				this.src = this.src.replace("_on","_off");
			} else {
				this.src = this.src.replace("_off","_on");
			}
			$(this).toggleClass("on");
		});
	});
});

All you then need to do is give the button/link that you want to use to toggle the image states an ID of “btn-swap”.

When clicked this will change any image that has the class “img-swap”. I have uploaded a demo page – jQuery Demo: Multiple Image Swap On Click Button

This helps solve a problem I was having at work, however, I also need a button to change the states of all my buttons “on” and “off.”

Since I have virtually zero programming skills, I was hoping you could point me in the right direction to accomplish that effect.

This blog is great too. Lots of great tutorials!

Any thoughts?

Use the following instead:

$(".img-swap:not(.active)").hover(
    function(){this.src = this.src.replace("_off","_on");},
    function(){
        if(!$(this).hasClass('active')){
            this.src = this.src.replace("_on","_off");
        }
    });
	$(".img-swap").click(function(){
		$(".img-swap.active").each(function(){
			this.src = this.src.replace("_on","_off");
			$(this).removeClass('active');
		});
	$(this).toggleClass('active');
	});

I just want these images to swap on click and mouse over. I am not that great with understanding the jQuery.

I slightly modified your code and I am getting something to happen with the hovers and clicks but the clicks are off a bit. Hit a few links and let me know what you think.

I really appreciate the help.

Check in firebug whether the image has class “active” after clicking

$(".img-swap:not(.active)").hover(
    function(){
        this.src = this.src.replace("_off","_on");
    },
    function(){
        this.src = this.src.replace("_on","_off");
    });
    $(".img-swap").click(function(){
        $(".img-swap.active").each(function(){
            this.src = this.src.replace("_on","_off");
            $(this).removeClass('active');
        });
         $(this).toggleClass('active');
    });

http://bridgfordfoodservice.net/ready_to_eat/products.php

It is suppose to work on the left hand menu that changes the product. You can see that it hovers but does no stay when the link is clicked.

.img-swap {cursor: pointer;}

Can see it working on the demo

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script&gt;

btw, I’ve never used js or jquery before so I may be missing something basic