HTML での画像のロールオーバー処理

Newton's cradle(ニュートンのゆりかご)

(上の画像は Wikipedia の "Newton's cradle" (ニュートンのゆりかご) より)


 インターネットのサイトは、PCだけでなく タブレットのことも考えて作りましょう

 このホームページを作っている途中で ふと気付いたのは、PCとタブレットのどちらでも問題なく閲覧できるようにしておかなければならない、ということです。そこで問題になってくるのが、画像のロールオーバー処理です。画像のロールオーバー処理を実現するには CSS や JavaScript, jQuery のテクニックを用いるのが一般的なのですが、これらの方法はタブレットなどのタッチスクリーン画面では意図通りにはいきません。画面上の画像をタッチすれば画像がロールオーバーしますが、一度切り替わってしまうと ページの表示を更新しない限り元には戻らない。それにタブレットの使い勝手を考えると、画像をタップする度に画像が切り替わるほうがいいです。画像に触れたときだけロールオーバーしても、指が邪魔で画像が見えない。


 私の本職はソフトやさんなので、ここはひとつ 腕を振るっておかなければ。しかし、Java Script の知識はほとんどございません。それでも その気になれば何とかなるもので、適当にググって 関連する処理を寄せ集めて でっち上げました。下のソースは、使用しているスクリプトファイルそのままの内容です。


function flip_img() {
	if (document.getElementsByTagName) {
		var images = document.getElementsByTagName("img");

		for (var i=0; i < images.length; i++) {
			if (images[i].getAttribute("src").match("_off."))
			{
				if (window.TouchEvent) {
					images[i].onmouseover = function() {
						return false;
					};
					images[i].onmouseout = function() {
						return false;
					};
					images[i].ontouchstart = function() {
						if(this.getAttribute("src").match("_off.")) {
							this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
						} else {
							this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
						}
					};
				} else {
					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."));
					};
					images[i].ontouchstart = function() {
						return false;
					};
				}
			}
		}
	}
}

if (window.addEventListener) {
	window.addEventListener("load", flip_img, false);
} else if (window.attachEvent) {
	window.attachEvent("onload", flip_img);
}

 (実装の処理内容)


 このページの HTML でロールオーバーに関係するのは、上のスクリプトファイルを読み込む処理

<script type="text/javascript" src="../script/flip_img.js"></script>

と、画像を表示する処理

<img alt="Newton's cradle(ニュートンのゆりかご)" src="newtons_cradle_off.gif" style="border:solid 1px #0000FF; padding:1px;"></img>

の2箇所だけです。興味のある方は、ご参考にどうぞ。



| Slemanique | Software | HTML での画像のロールオーバー処理 |