<!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> window.addEventListener("load",function(){ //書き方① document.querySelector("#first a").addEventListener("mousedown",function(){ document.querySelector("#first img").setAttribute("src","img/after.png"); document.querySelector("#first img").setAttribute("alt","変更後"); }); document.querySelector("#first a").addEventListener("mouseup",function(){ document.querySelector("#first img").setAttribute("src","img/before.png"); document.querySelector("#first img").setAttribute("alt","変更前"); }); //書き方② document.querySelector("#second a").addEventListener("mousedown",function(){ document.querySelector("#second img").setAttribute("src","img/after.png"); document.querySelector("#second img").setAttribute("alt","変更後"); }); document.querySelector("#second a").addEventListener("mouseup",function(){ document.querySelector("#second img").setAttribute("src","img/before.png"); document.querySelector("#second img").setAttribute("alt","変更前"); }); document.querySelector("#second a").addEventListener("click",function(e){ e.preventDefault(); }); }); </script> <body> <div id="first"> <p><a href="javascript:void(0)">画像を変更</a></p> <p><img src="img/before.png" alt="変更前" /></p> </div> <div id="second"> <p><a href="img/after.png">画像を変更</a></p> <p><img src="img/before.png" alt="変更前" /></p> </div> </body> </html>
<!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> $(function(){ //書き方① $("#first a").mousedown(function(){ $("#first img").attr("src","img/after.png").attr("alt","変更後"); }).mouseup(function(){ $("#first img").attr("src","img/before.png").attr("alt","変更前"); }); //下の記述でも可 /* $("#first a").bind("mousedown",function(){ $("#first img").attr("src","img/after.png").attr("alt","変更後"); }).bind("mouseup",function(){ $("#first img").attr("src","img/before.png").attr("alt","変更前"); }); */ //下の記述でも可 /* $("#first a").bind( { "mousedown":function(){ $("#first img").attr("src","img/after.png").attr("alt","変更後"); }, "mouseup":function(){ $("#first img").attr("src","img/before.png").attr("alt","変更前"); } } ); */ //書き方② $("#second a").mousedown(function(){ $("#second img").attr("src",$(this).attr("href")).attr("alt","変更後"); }).mouseup(function(){ $("#second img").attr("src","img/before.png").attr("alt","変更前"); }).click(function(){ return false; }); //下の記述でも可 /* $("#second a").bind("mousedown",function(){ $("#second img").attr("src",$(this).attr("href")).attr("alt","変更後"); }).bind("mouseup",function(){ $("#second img").attr("src","img/before.png").attr("alt","変更前"); }).bind("click",function(){ return false; }); */ //下の記述でも可 /* $("#second a").bind( { "mousedown":function(){ $("#second img").attr("src",$(this).attr("href")).attr("alt","変更後"); }, "mouseup":function(){ $("#second img").attr("src","img/before.png").attr("alt","変更前"); }, "click":function(){ return false; } } ); */ }); </script> <body> <div id="first"> <p><a href="javascript:void(0)">画像を変更</a></p> <p><img src="img/before.png" alt="変更前" /></p> </div> <div id="second"> <p><a href="img/after.png">画像を変更</a></p> <p><img src="img/before.png" alt="変更前" /></p> </div> </body> </html>
Unique siblings: