簡単でソースが短かくなるロールオーバー「教えてマリオ」

マリオデザイン

マリオデザインスタッフブログ「教えてマリオ」

ホーム>>教えてマリオトップ>>簡単でソースが短かくなるロールオーバー

このブログはマリオデザインアルバイトスタッフがこれからWEbを勉強してみたいと思われている方や会社でホームページの更新業務を担当されているがよく意味が分からないという方のために、ホームページ作成の基礎を綴っていくものです。 難しい言葉を使わず(使えない)噛み砕いた言葉で書いていくので、参考になればと思います。
*勉強中の為、間違った解釈を説明すると思いますので、ご指摘コメントもお待ちしておいります。

簡単でソースが短かくなるロールオーバー

今回はロールオーバーについて説明したいと思います。ロールオーバーをするとボタンなどに動きがつき、わかりやすく、かっこよくなります。

目次
  1. ロールオーバーとは?
  2. ホームページビルダーでロールオーバー
  3. ドリームウィーバーでロールオーバー
  4. 簡単でソースが短かくなるロールオーバー
1.ロールオーバーとは?

ロールオーバーとは画像などにマウスポインターを乗せたときに画像や背景などが入れ替わることを言います。

ロールオーバーはCSSやJAVASCRIPTなどでできますが、今回はJAVASCRIPTのロールオーバー方法をご紹介いたします。

JAVASCRIPTとは簡単に説明するとHTMLは基本動きのあるものは作れませんがJAVASCRIPTを使用すれば動きのあるもの(画像が切り替わったり、スライドしたり、拡大したり)が作れます。

すでにロールオーバーをしている方もたくさんいらっしゃると思いますが、今回はソースコードが短くなるやり方でご紹介します。

皆さんは今ホームページ作成ソフトをつかわれていますか?ホームページビルダーやドリームウィーバーなどが有名ですが、これらには初めからロールオーバーのボタンがついていて簡単にロールオーバーをすることができます。これらの機能は大変便利です。

しかしホームページを作り始めのころはこの機能を使われていいと思いますが、より良いホームページ作成を目指すなら、見た目だけでなくソースコードも余計なものはなるべく書かないようにして作成していかなくてはならないので、今回は備え付けのロールオーバーとご紹介するロールオーバーのソースの長さを比べてみたいと思います。下記の例はリスト(li)に画像(img)を入れてロールオーバーした例です。

*ソースコードに余計なコードを少なくするとSEO的に良いとされています。読み込みもほんの少しだけ早くなります。

*ホームページビルダーやドリームウィーバーは私も大変お世話になっているソフトで中傷する意味で書いているわけではございませんのでよろしくお願いします。


2.ホームページビルダーでロールオーバー

まずはホームページ作成ソフト売上№1のホームページビルダーの備え付けのロールオーバー機能を使用した場合のソースコードを見てみたいと思います。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta name="GENERATOR" content="JustSystems Homepage Builder Version 15.0.8.0 for Windows" />
<title>ロールオーバーの勉強</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript" language="JavaScript">
<!--HPB_SCRIPT_ROV_50
//
//  (C) 2010 株式会社ジャストシステム
//

// HpbImgPreload:
//
function HpbImgPreload()
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=false,isN6=false,isIE=false;
  if (document.all && appVer >= 4) isIE=true; else
    if (document.getElementById && appVer > 4) isN6=true; else
      if (document.layers && appVer >= 4) isNC=true;
  if (isNC||isN6||isIE)
  {
    if (document.images)
    {
      var imgName = HpbImgPreload.arguments[0];
      var cnt;
      swImg[imgName] = new Array;
      for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++)
      {
        swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image();
        swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt];
      }
    }
  }
}
// HpbImgFind:
//
function HpbImgFind(doc, imgName)
{
  for (var i=0; i < doc.layers.length; i++)
  {
    var img = doc.layers[i].document.images[imgName];
    if (!img) img = HpbImgFind(doc.layers[i], imgName);
    if (img) return img;
  }
  return null;
}
// HpbImgSwap:
//
function HpbImgSwap(imgName, imgSrc)
{
  var appVer=parseInt(navigator.appVersion);
  var isNC=false,isN6=false,isIE=false;
  if (document.all && appVer >= 4) isIE=true; else
    if (document.getElementById && appVer > 4) isN6=true; else
      if (document.layers && appVer >= 4) isNC=true;
  if (isNC||isN6||isIE)
  {
    if (document.images)
    {
      var img = document.images[imgName];
      if (!img) img = HpbImgFind(document, imgName);
      if (img) img.src = imgSrc;
    }
  }
}
var swImg; swImg=new Array;
//-->
</script>
<script type="text/javascript" language="JavaScript">
<!--HPB_SCRIPT_PLD_50
HpbImgPreload('HPB_ROLLOVER1', 'img/btn01_off.png', 'img/btn01_on.png');
HpbImgPreload('HPB_ROLLOVER2', 'img/btn02_off.png', 'img/btn02_on.png');
HpbImgPreload('HPB_ROLLOVER3', 'img/btn03_off.png', 'img/btn03_on.png');
//-->
</script>
</head>
<body>
<div id="navi" class="clearfix" >
		<ul >
			<li><a href="#" id="HPB_ROLLOVER1" name="HPB_ROLLOVER1" onmouseout="HpbImgSwap('HPB_ROLLOVER1', 'img/btn01_off.png');" onmouseover="HpbImgSwap('HPB_ROLLOVER1', 'img/btn01_on.png');"><img src="img/btn01_off.png" alt="ボタン1" title="ボタン1" name="HPB_ROLLOVER1" /></a></li>
			<li><a href="#" id="HPB_ROLLOVER2" name="HPB_ROLLOVER2" onmouseout="HpbImgSwap('HPB_ROLLOVER2', 'img/btn02_off.png');" onmouseover="HpbImgSwap('HPB_ROLLOVER2', 'img/btn02_on.png');"><img src="img/btn02_off.png" alt="ボタン2" title="ボタン2" name="HPB_ROLLOVER2" /></a></li>
			<li><a href="#" id="HPB_ROLLOVER3" name="HPB_ROLLOVER3" onmouseout="HpbImgSwap('HPB_ROLLOVER3', 'img/btn03_off.png');" onmouseover="HpbImgSwap('HPB_ROLLOVER3', 'img/btn03_on.png');"><img src="img/btn03_off.png" alt="ボタン3" title="ボタン3" name="HPB_ROLLOVER3" /></a></li>
		</ul>
	
</div>
</body>
</html>
こんな感じです。10行~80行までは外部に書き出すことはできますが、85・86・87行目にはいっているonmouseoverやonmouseoutは外部に書き出すことはできないので、少し長いですね。


3.ドリームウィーバーでロールオーバー

次はプロ御用達のホームページ作成ソフトドリームウィーバーの備え付けのロールオーバー機能を使用した場合のソースコードを見てみたいと思います。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ロールオーバーの勉強</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script type="text/javascript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>

<body onload="MM_preloadImages('img/btn01_on.png',
'img/btn02_on.png','img/btn03_on.png')">
<div id="navi" class="clearfix">
		<ul>
			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','img/btn01_on.png',1)"><img src="img/btn01_off.png" name="Image4" width="100" height="50" border="0" id="Image4" alt="ボタン1" title="ボタン1" /></a></li>
			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','img/btn02_on.png',1)"><img src="img/btn02_off.png" name="Image2" width="100" height="50" border="0" id="Image2" alt="ボタン2" title="ボタン2" /></a></li>
			<li><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','img/btn03_on.png',1)"><img src="img/btn03_off.png" name="Image3" width="100" height="50" border="0" id="Image3" alt="ボタン3" title="ボタン3" /></a></li>
		</ul>
</div>
</body>
</html>
こんな感じです。こちらも7行~31行までは外部に書き出すことはできますが、38・39.40行目にはいっているonmouseoverやonmouseoutは外部に書き出すことはできないので、少し長いですね。




4.簡単でソースが短かくなるロールオーバー

上記2つのソースコードを見てもらってわかるとおり、2つとも優秀なソフトですがソフトの機能に頼りすぎてもよくないということですね。

では本題の簡単でソースが短かくなるロールオーバーをご紹介いたします。 まずjavascriptを外部から読み込みます。

読み込むファイルはsmartRollover.jsです。.jsファイルはjavascriptを書くファイルです。

ダウンロードはこちら

この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);
}

英語でたくさん書かれていて何が何だかわからないと思いますが、今はまだこの中身を理解する必要はありません。私もほとんどかけません。初めのうちは、世の中には頭がよくて優しいwebデザイナーさんやプログラマーさんがこのようなファイルを無償で考えてくれて、快く使わせてくれる方がたくさんいらっしゃるので感謝して使わせてもらいましょう。

ダウンロードが終わったら次にこのsmartRollover.jsファイルを.htmlファイルに読み込ませなければいけません。

少し復習ですが.cssファイルを読み込むには<head>と</head>の間に
<link rel="stylesheet" href="ここに.cssファイルが置いてある場所(パス)をかく" type="text/css" />
でしたが

.jsファイルを読み込む場合は<head>と</head>の間に次のように書きます。
<script src="ここに.jsファイルが置いてある場所(パス)をかく" type="text/javascript"></script>
です。

以前フォルダの管理で.htmlファイル以外はフォルダで分けたほうがわかりやすと書きましたので.jsファイルはjsという名前のフォルダに入れたいのでこのように書きます。
<script src="js/smartRollover.js" type="text/javascript"></script>
言葉で書くとjsの中にあるsmartRollover.jsを読み込んでねという意味です。
これで.htmlファイルに.jsファイルを読み込むことができました。

では上記の.jsファイルの中身の説明をします。

簡単に書くと通常時は拡張子の前に_offの名前の画像を表示しマウスポインターが画像の上に来たときは拡張子の前に_onの名前の画像を表示すると書いてあります。
なので画像を作る際に通常時の画像の名前は(例topに戻る場合のボタン)
top_off.png

マウスポインターが上に来た時の画像の名前は
top_on.png

です。_offと_onの前の名前は統一しないと画像がごちゃごちゃになってしまうので注意です。下記コードの3つのボタンは

ボタン1を
btn01_off.pngとbtn01_on.png

ボタン2を
btn02_off.pngとbtn02_on.png

ボタン3を
btn03_off.pngとbtn03_on.png

としています。画像の拡張子は.pngでも.jpgでも.gifでも良いそうです。

では最後に肝心のソースを見てみます。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ロールオーバーの勉強</title>
<link rel="stylesheet" href="css/style.css" type="text/css" />
<script src="js/smartRollover.js" type="text/javascript"></script>
</head>

<body>
<div id="navi" class="clearfix">
		<ul>
            <li><img src="img/btn01_off.png"alt="ボタン1" title="ボタン1" /></li>
            <li><img src="img/btn02_off.png"alt="ボタン2" title="ボタン2" /></li>
            <li><img src="img/btn03_off.png"alt="ボタン3" title="ボタン3" /></li>
		</ul>
</div>

</body>
</html>
なんとたったこれだけです。
ソースが少なく見やすくて、SEOにも少し良く、読み込みも少し早いし、難しくない、いいことずくめですね。



このように3つすべてのサンプルを見てもらった方はわかると思いますが、表面上(通常皆さんが見る画面)はすべて同じです。しかし内部的(ソースコード)には全然違うのがわかりましたね。よりよいホームページを作成するためになるべく余計なコードは書かないように少しづつがんばっていきましょう。

最後に完成見本を用意しておりますので外部のファイルの読み込みや、フォルダの分け方を参考にしてもらえたらと思います。

完成見本はこちら


このエントリーをはてなブックマークに追加

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

TRACKBACK_URL