96's blog

WEBサイト制作科　６ヶ月コース

JavaScript04（画像置換）

JavaScript

ボタン画像の置換

imgタグ内で置換指定する方法

  • imgタグ内に、onMouseover（hover状態）とonMouseout（hover解除）を記述。
  • title属性（imgタグ内）　画像の指マークの下にタイトルを表示する（ツールチップ）。必要に応じて使う。IE旧バージョンではaltで表示されるが、他のブラウザでは表示されない。
<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ボタンの画像置換</title>
<linkrel="stylesheet"href="css/js20.css"media="all">
</head>
<body>
<divid="nav">
<ul>
<li><ahref="#"><imgsrc="img/01.jpg"alt="ホーム"
title="ホーム"width="160"height="50"
onMouseOver="this.src='img/01_o.jpg'"onMouseOut="this.src='img/01.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/02.jpg"alt="カフェフード"
width="160"height="50"
onMouseOver="this.src='img/02_o.jpg'"onMouseOut="this.src='img/02.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/03.jpg"alt="カフェドリング"
width="160"height="50"
onMouseOver="this.src='img/03_o.jpg'"onMouseOut="this.src='img/03.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/04.jpg"alt="インフォメーション"
width="160"height="50"
onMouseOver="this.src='img/04_o.jpg'"onMouseOut="this.src='img/04.jpg'"></a></li>
<li><ahref="#"><imgsrc="img/05.jpg"alt="お問い合わせ"
width="160"height="50"
onMouseOver="this.src='img/05_o.jpg'"onMouseOut="this.src='img/05.jpg'"></a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body, div, ul, li, img{
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#nav{
  width: 800px;
  height: 50px;
  margin: 20px 0 0 20px;
}
#nav ul{
  width: 800px;
  list-style: none;
}
#nav ul li{
  float: left;
}
img {
  border: none;
  vertical-align: bottom;
}

外部ファイルのJavaScriptを使う方法

  • Daniel NolanからJSファイルをダウンロード。JSフォルダをつくって管理。
  • head内にscript srcで保存場所にリンク。
  • imgタグ内にclass="imgover"を追加。

※JQueryを使っている場合にかち合うことがある。

<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>ボタンの画像置換</title>
<linkrel="stylesheet"href="css/js21.css"media="all">
<scriptsrc="js/rollover.js"></script>
</head>
<body>
<divid="nav">
<ul>
<li><ahref="#"><imgsrc="img/01.jpg"alt="ホーム"
title="ホーム"width="160"height="50"class="imgover"></a></li>
<li><ahref="#"><imgsrc="img/02.jpg"alt="カフェフード"
width="160"height="50"class="imgover"></a></li>
<li><ahref="#"><imgsrc="img/03.jpg"alt="カフェドリング"
width="160"height="50"class="imgover"></a></li>
<li><ahref="#"><imgsrc="img/04.jpg"alt="インフォメーション"
width="160"height="50"class="imgover"></a></li>
<li><ahref="#"><imgsrc="img/05.jpg"alt="お問い合わせ"
width="160"height="50"class="imgover"></a></li>
</ul>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body, div, ul, li, img{
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}

body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
#nav{
  width: 800px;
  height: 50px;
  margin: 20px 0 0 20px;
}
#nav ul{
  width: 800px;
  list-style: none;
}
#nav ul li{
  float: left;
}
img {
  border: none;
  vertical-align: bottom;
}

/*
	Standards Compliant Rollover Script
	Author : Daniel Nolan
	http://www.bleedingego.co.uk/webdev.php
*/

function initRollovers() {
	if (!document.getElementById) return
	
	var aPreLoad = new Array();
	var sTempSrc;
	var aImages = document.getElementsByTagName('img');

	for (var i = 0; i < aImages.length; i++) {		
		if (aImages[i].className == 'imgover') {
			var src = 
aImages[i].getAttribute('src');
			var ftype = 
src.substring(src.lastIndexOf('.'), src.length);
			var hsrc = src.replace(ftype, '_o'+ftype);

			aImages[i].setAttribute('hsrc', hsrc);
			
			aPreLoad[i] = new Image();
			aPreLoad[i].src = hsrc;
			
			aImages[i].onmouseover = function() {
				sTempSrc = 
this.getAttribute('src');
				this.setAttribute('src', 
this.getAttribute('hsrc'));
			}	
			
			aImages[i].onmouseout = function() {
				if (!sTempSrc) sTempSrc = 
this.getAttribute('src').replace('_o'+ftype, ftype);
				this.setAttribute('src', sTempSrc);
			}
		}
	}
}

window.onload = initRollovers;

f:id:webtm2013:20130729150108j:image

サムネール画像によるメイン画像の置換

  • メイン画像のimgタグ内でnameをmainImgに指定。
  • サムネイル画像のimgタグ内でonMouseoverでdocument.mainImgを指定。
<!DOCTYPE HTML>
<htmllang="ja">
<head>
<metacharset="utf-8">
<title>サムネール画像でメイン画像を置換</title>
<linkrel="stylesheet"href="css/js22.css"media="all">
</head>
<body>
<divid="container">
<h2>北欧もどきのインテリア</h2>
<pclass="thumbnail">
<imgsrc="img/img01t.jpg"width="112"height="84"
alt=""onMouseOver="document.mainImg.src='img/img01.jpg'">
<imgsrc="img/img02t.jpg"width="112"height="84"
alt=""onMouseOver="document.mainImg.src='img/img02.jpg'">
<imgsrc="img/img03t.jpg"width="112"height="84"
alt=""onMouseOver="document.mainImg.src='img/img03.jpg'">
<imgsrc="img/img04t.jpg"width="112"height="84"
alt=""onMouseOver="document.mainImg.src='img/img04.jpg'">
<imgsrc="img/img05t.jpg"width="112"height="84"
alt=""onMouseOver="document.mainImg.src='img/img05.jpg'">
</p>
<pclass="main"><imgsrc="img/img01.jpg"width="600"height="450"
alt=""name="mainImg"></p>
</div>
</body>
</html>

@charset "utf-8";
/* CSS Document */
body, h1, p, img{
  margin: 0;
  padding: 0;
}
body {
  font-family:
    "Hiragino Kaku Gothic ProN",
    Meiryo,
    sans-serif;
}
h2 {
  color: #82A76D;
  font-size: 1.1em;
}
img {
  border: none;
}
#container {
  width: 700px;
  margin: 0 auto;
  text-align: center;
}

f:id:webtm2013:20130729142954j:image