jQuery toggle(トグル)を使って画像置換
バージョンは1.8.2を使用すること
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>toggle</title> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script> <style> p{ cursor: pointer; } #container{ width:500px; margin: 0 auto; } </style> </head> <body> <div id="container"> <h1>クリックで画像を変更</h1> <p id="imgChange"><img src="img/img01.jpg"></p> </div> <script> $(function(){ $('#imgChange').toggle(function(){ $('img').attr('src','img/img02.jpg'); },function(){ $('img').attr('src','img/img03.jpg'); },function(){ $('img').attr('src','img/img04.jpg'); }); }); </script> </body> </html>