横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
ボタン(画像を変更)をクリックする(toggle())毎に、異なる画像を表示する
動作; ボタン(#btn2105;画像を変更)をクリック( .toggle(function())するたびに、
次の画像を切替て表示(,function())する。
jQueryの書き方 |
/*------------------------------------ */ //21-05) クリック処理 toggle() /*------------------------------------ */ $("#btn2105") .toggle(function(){ $("img#img2105") /*1回目のクリック:画像を表示 */ .attr("src","../images/1.jpg") .attr("alt","海"); } ,function(){ /*2回目のクリック:画像を表示 */ $("img#img2105") .attr("src","../images/2.jpg") .attr("alt","くらげ"); } ,function(){ /*3回目のクリック:画像を表示 */ $("img#img2105") .attr("src","../images/3.jpg") .attr("alt","建物"); } ,function(){ /*4回目のクリック:画像を表示 繰返し */ $("img#img2105") .attr("src","../images/4.jpg") .attr("alt","花"); }); |
---|---|
cssの書き方 | ---------- |
HTMLの書き方 |
<button id="btn2105">画像を変更</button>
<p class="marLft50"> <img id="img2105" src="../images/5.jpg" alt="花" /> </p> |