ページトップ・ロールオーバー・前のページへ・小窓ポップアップ・印刷ボタンを作りました [IE7対応]

150730_001

デモはこちら

仕事で作る機会があったので保存。

検証済みブラウザとOS

IE 7～
Firefox
Google Chrome
Safari
Windows 7
OS X Yosemite

ページトップ（非スムーススクロール）

<span id="pagetop">ページ上部へ</span>

1	<span id="pagetop">ページ上部へ</span>

/*
To page top
Author: KEITA HIRAI
URL: keitahirai.net
*/
var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化
	ie7 = ua.indexOf("msie 7"), // 文字列検索
	ie8 = ua.indexOf("msie 8"),
	pageTop = document.getElementById("pagetop")
;

// IE7, IE8とそれ以外の切り替え
if (ie7 != -1 || ie8 != -1) {
	if (pageTop != null) {
		pageTop.attachEvent("onclick", function() {
			window.scrollTo(0, 0);
			event.cancelBubble = true;
		})
	}
}
else {
	if (pageTop != null) {
		pageTop.addEventListener("click", function(e) {
			window.scrollTo(0, 0);
			e.stopPropagation();
		})
	}
};

To page top

Author: KEITA HIRAI

URL: keitahirai.net

var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化

ie7 = ua.indexOf("msie 7"), // 文字列検索

ie8 = ua.indexOf("msie 8"),

pageTop = document.getElementById("pagetop")

;

// IE7, IE8とそれ以外の切り替え

if (ie7 != -1 || ie8 != -1) {

if (pageTop != null) {

pageTop.attachEvent("onclick", function() {

window.scrollTo(0, 0);

event.cancelBubble = true;

})

}

else {

if (pageTop != null) {

pageTop.addEventListener("click", function(e) {

window.scrollTo(0, 0);

e.stopPropagation();

})

}

};

ロールオーバー

ページを読み込んだ後に img タグを探して属性値を設定。class=”ro” が付与されていたら、マウスオーバーで末尾に _o がついた画像を読み込む。

ロールオーバー用の画像は、ファイル名末尾に _o を追加。

<ul>
	<li><a href=""><img class="ro" src="images/nav_01.png" width="88" height="69" alt=""></a></li>
	<li><a href=""><img class="ro" src="images/nav_02.png" width="108" height="69" alt=""></a></li>
	<li><a href=""><img class="ro" src="images/nav_03.png" width="114" height="69" alt=""></a></li>
	<li><a href=""><img class="ro" src="images/nav_04.png" width="115" height="69" alt=""></a></li>
	<li><a href=""><img class="ro" src="images/nav_05.png" width="121" height="69" alt=""></a></li>
</ul>

<ul>

</ul>

/*
Switch menu with cursor
Author: KEITA HIRAI
URL: keitahirai.net
*/
function rollOver() {
	var img = document.getElementsByTagName("img");

	for (var i = 0; i < img.length; i++) {
		var file = img[i].getAttribute("src"); // 属性値 src 取得
		var search = file.substring(file.lastIndexOf("."), file.length); // 拡張子を文字列として抜き出す
		var change = file.replace(search, "_o" + search); // . を _o. に変更

		if (img[i].className == "ro") {
			img[i].setAttribute("change", change) // 属性値を change に設定
			img[i].onmouseover = function() {
				this.setAttribute("src", this.getAttribute("change"))
			}
			img[i].onmouseout = function() {
				this.setAttribute("src", this.getAttribute("change").split("_o").join(""))
			}
		};
	};
}
window.onload = rollOver;

Switch menu with cursor

Author: KEITA HIRAI

URL: keitahirai.net

function rollOver() {

var img = document.getElementsByTagName("img");

for (var i = 0; i < img.length; i++) {

var file = img[i].getAttribute("src"); // 属性値 src 取得

var search = file.substring(file.lastIndexOf("."), file.length); // 拡張子を文字列として抜き出す

var change = file.replace(search, "_o" + search); // . を _o. に変更

if (img[i].className == "ro") {

img[i].setAttribute("change", change) // 属性値を change に設定

img[i].onmouseover = function() {

this.setAttribute("src", this.getAttribute("change"))

}

img[i].onmouseout = function() {

this.setAttribute("src", this.getAttribute("change").split("_o").join(""))

}

};

}

window.onload = rollOver;

前のページへ戻る

ごく普通のヒストリーバック。

<span id="btn-back">前のページへ戻る</span>

1	<span id="btn-back">前のページへ戻る</span>

/*
Back to the previous page
Author: KEITA HIRAI
URL: keitahirai.net
*/
var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化
	ie7 = ua.indexOf("msie 7"), // 文字列検索
	ie8 = ua.indexOf("msie 8"),
	pageBack = document.getElementById("btn-back")
;

// IE7, IE8とそれ以外の切り替え
if (ie7 != -1 || ie8 != -1) {
	if (pageBack != null) {
		pageBack.attachEvent("onclick", function() {
			history.back();
			event.cancelBubble = true;
		})
	}
}
else {
	if (pageBack != null) {
			pageBack.addEventListener("click", function(e) {
			history.back();
			e.stopPropagation();
		})
	}
};

Back to the previous page

Author: KEITA HIRAI

URL: keitahirai.net

var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化

ie7 = ua.indexOf("msie 7"), // 文字列検索

ie8 = ua.indexOf("msie 8"),

pageBack = document.getElementById("btn-back")

;

// IE7, IE8とそれ以外の切り替え

if (ie7 != -1 || ie8 != -1) {

if (pageBack != null) {

pageBack.attachEvent("onclick", function() {

history.back();

event.cancelBubble = true;

})

}

else {

if (pageBack != null) {

pageBack.addEventListener("click", function(e) {

history.back();

e.stopPropagation();

})

}

};

小窓ポップアップ（HTML直書き）

IE7/8 切り捨てであれば、HTMLを汚さずにJavaScriptだけで設置可能。

<span><a href="popup01.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a></span>

<span><a href="popup02.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a></span>

<span><a href="popup03.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a></span>

<a href="popup01.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a>

<a href="popup02.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a>

<a href="popup03.html" onclick="window.open(this.href, 'new', 'width=720, height=700, scrollbars=yes'); return false;">詳細を見る</a>

閉じるボタン

<span onclick="window.close();">× 閉じる</span>

1	<span onclick="window.close();">× 閉じる</span>

印刷ボタン

ごく普通の印刷ボタン。

<span id="btn-print">印刷する</span>

1	<span id="btn-print">印刷する</span>

/*
Print button
Author: KEITA HIRAI
URL: keitahirai.net
*/
var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化
	ie7 = ua.indexOf("msie 7"), // 文字列検索
	ie8 = ua.indexOf("msie 8"),
	paper = document.getElementById("btn-print")
;

// IE7, IE8とそれ以外の切り替え
if (ie7 != -1 || ie8 != -1) {
	if (paper != null) {
		paper.attachEvent("onclick", function() {
			window.print();
			event.cancelBubble = true;
		})
	}
}
else {
	if (paper != null) {
		paper.addEventListener("click", function(e) {
			window.print();
			e.stopPropagation();
		})
	}
};

Print button

Author: KEITA HIRAI

URL: keitahirai.net

var ua = navigator.userAgent.toLowerCase(), // ブラウザverを取得して小文字化

ie7 = ua.indexOf("msie 7"), // 文字列検索

ie8 = ua.indexOf("msie 8"),

paper = document.getElementById("btn-print")

;

// IE7, IE8とそれ以外の切り替え

if (ie7 != -1 || ie8 != -1) {

if (paper != null) {

paper.attachEvent("onclick", function() {

window.print();

event.cancelBubble = true;

})

}

else {

if (paper != null) {

paper.addEventListener("click", function(e) {

window.print();

e.stopPropagation();

})

}

};

JavaScript逆引きハンドブック

posted with amazlet at 15.10.20

古籏一浩
シーアンドアール研究所
売り上げランキング: 153,954

Amazon.co.jpで詳細を見る

鼻ちょうちん

ページトップ・ロールオーバー・前のページへ・小窓ポップアップ・印刷ボタンを作りました [IE7対応]

検証済みブラウザとOS

ページトップ（非スムーススクロール）

ロールオーバー

前のページへ戻る

小窓ポップアップ（HTML直書き）

閉じるボタン

印刷ボタン

コメントを投稿する返信をキャンセル

ページトップ・ロールオーバー・前のページへ・小窓ポップアップ・印刷ボタンを作りました [IE7対応]

検証済みブラウザとOS

ページトップ（非スムーススクロール）

ロールオーバー

前のページへ戻る

小窓ポップアップ（HTML直書き）

閉じるボタン

印刷ボタン

コメントを投稿する 返信をキャンセル

コメントを投稿する返信をキャンセル