株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。

　　　　　横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。

jQuery

21-04)　1. マウスオーバーのイベントで動く画像　　mouseover()イベント

　

スライドの画像をマウスオーバーで選択して表示する

動作；　選択部（#d04 a)；テキストラベル）を
　　　　　マウスオーバー（.mouseover(function()）すると、
　　　　　選択した画像を表示領域（img#disp214）に
　　　　　表示（.attr("src",$(this).attr("href")) ）する。

jQueryの書き方 /* ----------------------------------------*
//21-04) 1. スライド選択
* -----------------------------------------*/
//2-4 マウスオーバー処理 mouseover()
$("#d04 a").mouseover(function(){
  $("img#disp214")
    .attr("src",$(this).attr("href"))   /*選択画像を表示 */
    .attr("alt",$(this).text());
  return false;
});
//2-4 ｸﾘｯｸ処理 click()
$("#d04 a").click(function(){
  return false;
});
ｃｓｓの書き方 /*-------------------------------------------------------
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="d04" 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="disp214" src="../images/1.jpg" alt="花" /></p>
</div>