ちょっと思い立ったので軽く作ってみました。まずは画面イメージをどうぞ：
白い半透明の部分をクリックすると消えてページが閲覧できます。黒い部分はリンクになっていて、新しいウィンドウで他のWebサイトへ飛び、同時に消えてページが閲覧できます。今回はAmazonアソシエイトでパソコンのページに行くようにしてみました。
IE8、Chrome、Firefoxで確認しています。中身は続きから。
Windows XPユーザーへ新しいPCへの買い替えをすすめる仕組みを入れました
動きを作っているのはこの2つのファイルです。jQuery等がなくても動くように平たく、泥臭く書いています。
あとはこれらを読み込むようにHTMLに3行加えるだけです。
<head>
<!-- head内でCSS読み込み -->
<link rel="stylesheet" href="css/xpalert.css" />
</head> <body>
<!-- body末尾へ置き場所とjsを記載 -->
<div id="xpalert"></div> <script src="js/xpalert.js"></script>
</body>
JavaScriptはUserAgentを見ているだけです。UAなら書き換えられるじゃん！というツッコミはありますが、そういうカスタマイズができない層をメインのターゲットにしていますので...。
window.onload = function() {
var ua = navigator.userAgent;
if (ua.match(/Win(dows )?(NT 5\.1|XP)/)) {
// ここで表示制御
}
}
ファイルはコピー・改変してご自身のサイトに使用するなど、ご自由にお使いください。多くのサイトに組み込む事で効果のあるものだと思っています。
コメントする