画像置換-ライブラリ

ライブラリを利用

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


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>