横浜、東京に拠点を置き、検証システム/金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
スライドの画像を選択して表示する
動作; 選択部(#d03
a;テキストラベル)をクリック(.click(function())すると、
選択した画像を表示領域(img#disp213)に
表示(
.attr("src",$(this).attr("href")) )する。
jQueryの書き方 |
/* ----------------------------------------* //21-03) 1. スライド選択 * -----------------------------------------*/ //2-3 クリック処理 click() $("#d03 a").click(function(){ $("img#disp213") .attr("src",$(this).attr("href")) /*選択画像を表示 */ .attr("alt",$(this).text()); return false; }); |
---|---|
cssの書き方 |
/*------------------------------------------------------- 21-03) 自動スライド処理 -------------------------------------------------------- */ .mode_213{ margin: 10px 0 10px 50px;; width: 400px; } .mode_213 ul { } .mode_213 li { float: left; width: 60px; /*セルの幅*/ padding: 10px 0 0 20px; height: 30px; font-weight: bold; background-color: burlywood; list-style-type: none; } .mode_213 li a.selected{ background:red; } |
HTMLの書き方 |
<div id="d03" class="mode_213"> <ul> <li><a href="../images/1.jpg">湖</a></li> <li><a href="../images/2.jpg">釣り</a></li> <li><a href="../images/3.jpg">川</a></li> <li><a href="../images/4.jpg">スキー</a></li> <li><a href="../images/5.jpg">車</a></li> </ul> <p><img id="disp213" src="../images/1.jpg" alt="花" /></p> </div> |