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

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

jQuery

21-18)　1.一覧からマウスオーバーで詳細画像を切り替える　mouseover()

　

一覧から詳細画像を選択表示する

動作；　説明パネル（"#mode_3112-list li”）をマウスオーバー（.mouseover(function()）後、
　　　　　選択状態を表示（.addClass("current")）する。
　　　　　選択された詳細画像（”.mode_3112-img-item”）を
　　　　　表示（.css("display","block")）する。

jQueryの書き方 /*　-----------------------------------------*
//21-18)　1.パネルをマウスオーバーでにスライドさせる
/*　-----------------------------------------*/
$("#mode_3112-list li").mouseover(function(){
var i =$("#mode_3112-list li").index(this);
$("#mode_3112-list li").removeClass("current");
$("#mode_3112-list li").eq(i).addClass("current");
$(".mode_3112-img-item").css("display","none");
$(".mode_3112-img-item").eq(i).css("display","block");
});
/*-------------------------------------------------------
31-12.　画像の表示部　
-------------------------------------------------------- */
#mode_3112-img{
width:350px;
float:left;
height:425px;
background-color:#000;
overflow:hidden;
position:relative;
}
#mode_3112-img img{
margin:0;
}
#mode_3112-img p{
padding:10px 8px;
font-size:14px;
line-height:20px;
/*background-color:#000;*/
color:#fff;
margin:0;
}
#mode_3112-img p span{
font-weight:bold;
}
#mode_3112-img p span a,
#mode_3112-img p span a:active,
#mode_3112-img p span a:visited{
color:#7d7137;
}
#mode_3112-img p span a:hover{
color:#d7cea8;
}
/*-------------------------------------------------------
31-12.　画像の選択部　
-------------------------------------------------------- */
#mode_3112-list{
float:right;
width:280px;
}
#mode_3112-list ul{
padding:0;
margin:0;
}
#mode_3112-list ul li{
border-bottom:dashed 1px #999;
padding:3px 3px 6px 17px;
_padding:3px 3px 3px 18px;
margin:0px 0px 0px 0px;
_margin:0px 0px 0px 0px;
height:47px;
}
* html #mode_3112-list ul li{
height:56px;
}
#mode_3112-list ul li h3{
font-size:13px;
line-height:14px;
font-weight:normal;
margin:0;
padding-top:4px;
}
#mode_3112-list ul li h3 a{
color: #000000;
}
#mode_3112-list ul li h3 span{
font-size:12px;
font-weight:normal;
color:#7d7137;
display:block;
}
#mode_3112-list ul li.current{
background:url("../images/feature-back.jpg") no-repeat scroll left center transparent;
font-weight:bold;
}
#mode_3112-list ul li.current h3{
font-weight:bold;
color:#7d7137;
}
#mode_3112-list ul li.current h3 a{
font-weight:bold;
color:#7d7137;
}
#mode_3112-list ul li.current h3 span{
font-weight:normal;
}
/*-------------------------------------------------------
31-12.　画像の選択　
-------------------------------------------------------- */
.mode_3112-img-item{
display:none;
left:0px;
top:0px;
position:absolute;
}
HTMLの書き方 <div id="mode_3112">
<div id="mode_3112-img">
<div class="mode_3112-img-item " style="display:block;">
<a href="motn31-02.html"><img src="../images/gval-001.jpg" alt="" width="350" height="305" /></a>
<p>札幌市時計台は　・・・</p>
</div>
<div class="mode_3112-img-item">
<a href="motn31-02.html"><img src="../images/gval-002.jpg" alt="" width="350" height="305" /></a>
<p>さっぽろ雪まつり　・・・</p>
</div>
<div class="mode_3112-img-item">
<a href="motn31-02.html"><img src="../images/gval-003.jpg" alt="" width="350" height="305" /></a>
<p>約4,500店ともいわれる　・・・</p>
---　省略　---
</div>
<div id="mode_3112-list">
<ul>
<li class="current">
<h3><a href="motn31-01.html"><span>[ ＪＲ札幌 ]</span>観光施設　</a></h3>
</li>
<li>
<h3><a href="motn31-02.html"><span>[ 大通公園 ]</span>「さっぽろ雪まつり</a></h3>
</li>
<li>
<h3><a href="motn31-03.html"><span>[ すすきの ]</span>今でも深夜　</a></h3>
</li>
</ul>
---　省略　---
</div>
</div>

札幌市時計台は、北海道大学の前身である札幌農学校の演武場として明治11（1878）年10月に建設されました。 演武場は生徒の兵式訓練や心身鍛錬の場であるとともに、入学式、卒業式など農学校の中央講堂として使用されました …»もっと読む

「さっぽろ雪まつり」「さっぽろライラックまつり」、「YOSAKOIソーラン祭り」などのイベント会場などのほか、夏のビアガーデンや盆踊り大会 、 冬の雪まつりやホワイトイルミネーションの会場としても使用され、札幌観光の顔ともいうべき …»もっと読む

約4,500店ともいわれる飲食店や娯楽施設がひしめく東京以北最大、日本3大歓楽街のひとつとして数えられる街、すすきの。 「ラーメン横丁」など、北海道を代表する味覚スポットも数多く、季節を問わず、多くの人で賑わっています。 …»もっと読む

明治9年、開拓使麦酒醸造所として発足したサッポロビール発祥の地に建てられた総合商業施設。 歴史的な赤レンガの建物を生かしてショッピングモール、レストラン、ホテル、フィットネスクラブなど、さまざまな施設を配置 …»もっと読む

赤レンガの開拓使館で工場直送の生ビールとジンギスカンを味わえるビール園。 広い敷地内には、大正元年製造の仕込み釜がある「ケッセルホール」「トロンメルホール」をはじめ、「ポプラ館」「ライラック」の他に …»もっと読む

雪印メグミルク株式会社の敷地内にあり、当時の雪印乳業が創業50周年を記念して建てた歴史館です。 ここは、大正15年に当時の雪印乳業が本格的にバターをつくり始めた場所でもあります。約850点の展示品が並ぶ館内では、創業当時から …»もっと読む