28日目 | JavaScriptで画像置換

授業

JavaScriptで画像置換するナビゲーションを作る


HTMLソース。javascriptで画像置換のスクリプトを書いています。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>ナビゲーション | JavaScript画像置換</title>
<link rel="stylesheet" href="css/style2.css" media="screen,print">
</head>
<body>
<nav>
<ul>
<li><a href="#"><img src="img/btn01_o.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/btn01.jpg'" onMouseOut="this.src='img/btn01_o.jpg'"></a></li>
<li><a href="#"><img src="img/btn02_o.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/btn02.jpg'" onMouseOut="this.src='img/btn02_o.jpg'"></a></li>
<li><a href="#"><img src="img/btn03_o.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/btn03.jpg'" onMouseOut="this.src='img/btn03_o.jpg'"></a></li>
<li><a href="#"><img src="img/btn04_o.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/btn04.jpg'" onMouseOut="this.src='img/btn04_o.jpg'"></a></li>
<li><a href="#"><img src="img/btn05_o.jpg" alt="" width="160" height="50" onMouseOver="this.src='img/btn05.jpg'" onMouseOut="this.src='img/btn05_o.jpg'"></a></li>
</ul>
</nav>
</body>
</html>

CSS　これは横並びを作るためだけのものです。

@charset "UTF-8";
*{
  margin:0;
	padding:0;
}

nav{
  width:800px;
	margin:30px auto;
}

ul{
  list-style-type:none;
	overflow:hidden;
}

li{
	float:left;
	display:inline;
}

li a{
  width:160px;
	height:50px;
	display:block;
	text-decoration:none;
}

[Dreamweaver JavaScript削除方法]

  • のjavascript部分をカットアンドペーストして、新規ファイル作成（javascript形式で）して書き出し、htmlソースにはscript指定する。但しbodyに書かれている先読み指定は削除しきれず残ることになる。
  • この他、タグインスペクタのビヘイビアでスワップイメージマイナスにする方法もあります。

マウスオンで別の画像を置換するロールオーバー

画像にマウスオンで別の画像がホバーする
某牛丼チェーンのメニューから画像をちょっと借りてきて作りました。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>画像にマウスオンで別の画像がホバーする</title>
<link rel="stylesheet" href="css/style3.css" media="screen,print">
</head>
<body>
<div id="container">
<noscript>
<p>
このWEBページはJavaScriptを使用しています。<br>
お使いのブラウザがJavaScriptに未対応の場合や<br>
JavaScriptの設定が無効になっている場合には、<br>
正しく表示されないことがあります。
</p>
</noscript>
<h2>すき家の牛丼</h2>
<p class="thumbnail">
<img src="img/sukiya1s.jpg" width="107" height="74" alt="" onMouseOver="document.mainImg.src='img/sukiya1.jpg'">
<img src="img/sukiya2s.jpg" width="107" height="74" alt="" onMouseOver="document.mainImg.src='img/sukiya2.jpg'">
<img src="img/sukiya3s.jpg" width="107" height="74" alt="" onMouseOver="document.mainImg.src='img/sukiya3.jpg'">
<img src="img/sukiya4s.jpg" width="107" height="74" alt="" onMouseOver="document.mainImg.src='img/sukiya4.jpg'">
<img src="img/sukiya5s.jpg" width="107" height="74" alt="" onMouseOver="document.mainImg.src='img/sukiya5.jpg'">
</p>
<p class="main"><img src="img/sukiya1.jpg" width="534"  height="370" alt="" name="mainImg"></p>
</div>
</body>
</html>

@charset "UTF-8";

*{
  margin:0;
	padding:0;
}

img{
  border:none;
}

#container{
  width:700px;
	margin:0 auto;
	text-align:center;
}

h2{
  color:#82A76D;
	font-size:1.1em;
	margin:10px 0 0 0;
}

p.main{
	background-color:#fff;
	background-image:url(../img/main.jpg);
	background-repeat:no-repeat;
	background-position:center center;
	width:554px;
	height:390px;
	margin:0px auto;
}

p.main img{
  margin-top:10px;
}

p.thumbnail{
  margin:0 0 0 5px;
}

p.thumbnail img{
  margin:0 5px 0 0;
}
scrollable　

無料で使えるjQueryライブラリサイト
「TAB」「横スクロール」「オーバーレイ」などの見せ方を作ることができます。

タイ観光案内サイト | 【公式】タイ国政府観光庁

ブラウザの表示幅に従って変化するサイトです。面白い。こういうサイト作ってみたいです。