画像置換-ライブラリ
ライブラリを利用
- 手軽に画像のロールオーバー効果を実装するJavaScript
rollover.js
ライブラリの読み込み
<script src="js/rollover.js"></script>
- 画像には「class="imgover"」を追加する
- 「_o」が、付与してある同一階層の画像と置き替わります
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>ナビゲーション</title> <link rel="stylesheet" href="css/style.css" media="all"> <script src="js/rollover.js"></script> </head> <body> <div id="nav"> <ul> <li><a href="#"><img src="img/01.jpg" width="160" height="50" alt="ホーム" class="imgover"></a></li> <li><a href="#"><img src="img/02.jpg" width="160" height="50" alt="カフェフード" class="imgover"></a></li> <li><a href="#"><img src="img/03.jpg" width="160" height="50" alt="カフェドリンク" class="imgover"></a></li> <li><a href="#"><img src="img/04.jpg" width="160" height="50" alt="インフォメーション" class="imgover"></a></li> <li><a href="#"><img src="img/05.jpg" width="160" height="50" alt="お問い合わせ" class="imgover"></a></li> </ul> </div> </body> </html>
@charset "UTF-8"; body, div, ul, li, img { margin: 0; padding: 0; } ul { list-style: none; } img { border: none; vertical-align: bottom; } a { text-decoration: none; } #nav { width: 800px; height: 50px; margin: 50px; } #nav li { float: left; }
smartRollover.js
function smartRollover() { if(document.getElementsByTagName) { var images = document.getElementsByTagName("img"); for(var i=0; i < images.length; i++) { if(images[i].getAttribute("src").match("_off.")) { images[i].onmouseover = function() { this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on.")); } images[i].onmouseout = function() { this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off.")); } } } } } if(window.addEventListener) { window.addEventListener("load", smartRollover, false); } else if(window.attachEvent) { window.attachEvent("onload", smartRollover); }
smart-crossfade.js
- 画像置換の際にフェードイン・フェードアウトの効果が得られるライブラリ
- ファイル名の「_off」に反応して同じファイル名で末尾が「_on」の画像に切り替わる仕組み
jQueryプラグイン
navの画像置換(yuga.js を導入)
- 画像置換(ロールオーバー効果)
- 現在のページをハイライト表示
- 外部リンクを別ウインドウに設定
- 画像へ直リンクするとthickboxで表示(thickbox.js利用)
- ページ内リンクのスムーズスクロール
- 簡易タブ機能
- 奇数、偶数を自動追加
- 最初・最後の要素、空の要素を指定できる
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>練習課題【天然温泉】</title> <link href="css/import.css" rel="stylesheet" type="text/css" media="screen, print"> <script src="js/jquery.js" type="text/livescript"></script> <script src="js/yuga.js" type="text/livescript"></script> </head> <body> <div id="wrapper"> <header> <h1>練習用課題:天然温泉</h1> <h2><a href="index.html"><img src="images/logo.gif" alt="天然温泉"></a></h2> </header> <nav> <ul> <li><a href="#"><img src="images/nav01.jpg" alt="料金" class="btn"></a></li> <li><a href="#"><img src="images/nav02.jpg" alt="施設案内" class="btn"></a></li> <li><a href="#"><img src="images/nav03.jpg" alt="お食事処" class="btn"></a></li> <li><a href="#"><img src="images/nav04.jpg" alt="アクセス" class="btn"></a></li> <li><a href="#"><img src="images/nav05.jpg" alt="写真集" class="btn"></a></li> </ul> </nav> </div> </body> </html>