Javascriptで画像置換4　ライブラリ利用

Js

ライブラリの利用

ファイルダウンロード

利用方法
  1. ファイルをダウンロード
  2. ヘッダーにscrpt~/scriptでファイルを呼び出す
  3. 表示画像と同じディレクトリに置換用の画像を置き、ファイル名_o.拡張子にする
  4. imgタグのクラスを　imgoverにする


ブラウザ表示

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title></title>
    <script src="libraryover/rollover.js" type="text/javascript"></script><!--ダウンロードしたファイルを呼び出す-->
    <style type="text/css">
	*{
		margin: 0;
		padding: 0;
		border: none 0;
		}
    #nav{
		margin: 50px 0 0 50px;
		}
	#nav ul{
		width: 150px;
		height: auto;
		list-style: none;
		border-top: silver 2px solid;
		border-right: silver 1px solid;
		border-left: silver 1px solid;
		}
	#nav li{
		width: 150px;
		height: 60px;
		margin: 0;
		border-bottom: silver 2px solid;

		}
    </style>
</head>
<body>
	<div id="nav">
    <ul>
    	<li><a href="#"><img src="libraryover/train.jpg" alt="" class="imgover"></a></li><!--imgのクラスをimgoverにする-->
    	<li><a href="#"><img src="libraryover/subway.jpg" alt="" class="imgover"></a></li><!--同じディレクトリに置換のファイル_o.jpgを置く-->
    	<li><a href="#"><img src="libraryover/bus.jpg" alt="" class="imgover"></a></li>
    	<li><a href="#"><img src="libraryover/walking.jpg" alt="" class="imgover"></a></li>
    	<li><a href="#"><img src="libraryover/bookmark.jpg" alt="" class="imgover"></a></li>
    </ul>
    </div>
</body>
</html>