<!DOCTYPE html> <html lang="ja-JP"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=yes,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.5"> <title></title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> $(function(){ $("#before").click(function(){ $("img").attr({ src:"img/before.png", title:"変更前" }); $("h1").text("変更前"); }); $("#after").click(function(){ $("img").attr({ src:"img/after.png", title:"変更後" }); $("h1").text("変更後"); }); //要領の良い記述 /* $("#before").click(function(){ $("img").attr({ src:$(this).attr("title"), title:$(this).attr("value") }); $("h1").text($(this).attr("value")); }); $("#after").click(function(){ $("img").attr({ src:$(this).attr("title"), title:$(this).attr("value") }); $("h1").text($(this).attr("value")); }); */ //もっと要領の良い記述 /* $("input").click(function(){ $("img").attr({ src:$(this).attr("title"), title:$(this).attr("value") }); $("h1").text($(this).attr("value")); }); */ }); </script> </head> <body> <h1>変更前</h1> <p> <input id="before" type="button" value="変更前" title="img/before.png"> <input id="after" type="button" value="変更後" title="img/after.png"> </p> <img src="img/before.png"> </body> </html>