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

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

galleria

03-05)　 1.　横方向リストのリンク選択にjs.ｊｓﾗｲﾌﾞﾗﾘを使用する。

　

メニューを横に並べて表示し、マウスオーバーでデザインを変更する
画像の変更はｊｓライブラリ(js.js)を利用する
<script type="text/javascript" src="../js/js.js"></script>

（指定例）
通常に表示するファイル名 ( bu01-off.gif)はXHTMLで指定し  
マウスオーバー時に表示するファイル名(bu01-oｎ.gif)はjsライブラリの規約名とする

ｃｓｓの書き方 /*-------------------------------------------------------
03-05 ナビゲーションのスタイル
-------------------------------------------------------- */
#navi-list.yoko {
 width: 690px;
}
#navi-list ul {
 list-style-type: none;
 margin: 0 10px 0 10px;
 padding: 0;
}
#navi-list li {
 float: left;
}
#navi-list li a {
 color: #000;
 text-decoration: none;
 display: block;
 padding: 5px;
 height:62px;
 border: 1px solid #ca7; /* 一行単位の枠の色指定 */
 background-color: #dc8; /* 背景の色　*/
}
#navi-list li a:hover {
 color: #000;
 text-decoration: none;
 border: 1px solid #ed9;
 background-color: #ed9;
}
HTMLの使用例 <ul id="navi-list" class="yoko">
 <li><a href="../index.html">
  <img src="../images/bu01-off.gif" alt="Information"/></a>
 </li>
 <li><a href="#">
  <img src="../images/bu02-off.gif" alt="Information"/></a>
 </li>
 <li><a href="#">
  <img src="../images/bu05-off.gif" alt="Information"/></a>
 </li>
 <li><a href="#">
  <img src="../images/bu07-off.gif" alt="Information"/></a>
 </li>
</ul>