ページトップ・ロールオーバー・前のページへ・小窓ポップアップ・印刷ボタンを作りました [IE7対応]
仕事で作る機会があったので保存。
検証済みブラウザとOS
- IE 7~
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
ページトップ(非スムーススクロール)
1 | <span id="pagetop">ページ上部へ</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* 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 を追加。
1 2 3 4 5 6 7 | <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> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /* 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; |
前のページへ戻る
ごく普通のヒストリーバック。
1 | <span id="btn-back">前のページへ戻る</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* 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だけで設置可能。
1 2 3 4 5 | <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> |
閉じるボタン
1 | <span onclick="window.close();">× 閉じる</span> |
印刷ボタン
ごく普通の印刷ボタン。
1 | <span id="btn-print">印刷する</span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 | /* 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(); }) } }; |
posted with amazlet at 15.10.20
古籏 一浩
シーアンドアール研究所
売り上げランキング: 153,954
シーアンドアール研究所
売り上げランキング: 153,954
コメントを投稿する