SHOJI's Code
 仕事や趣味で書いた各種言語のプログラミングコード(エクセルVBA,PHP,C/C++/C#,JavaScript等)、その他雑記。
2018.09<<12345678910111213141516171819202122232425262728293031>>2018.11
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

最近、リンクなどにマウスポインタをあわすとポップアップ表示されるページがよく見られる。

と、いうことで作ってみた。
POPUP-TEST.jpg
<html>
<head>
<style type="text/css">
#popup {
display: block;
position: absolute;
opacity: 90;
filter: alpha(opacity:90);
background-image: url(test.gif);
width: 300px;
height: 50px;
font-size: 11px;
padding: 10px 3px 3px 3px;

visibility: hidden;
}
</style>

<script type="text/javascript">
<!--
var dragging = false;
var offsetX, offsetY;

function load()
{
var atag = document.getElementsByTagName("a");

for(var i=0;i<atag.length;i++)
{
atag[i].onmouseover = show_popup;
atag[i].onmouseout = hide_popup;
}
}

function show_popup()
{
var o = document.getElementById("popup");

var x = this.offsetLeft + this.offsetWidth/2 - 33;
var y = this.offsetTop + this.offsetHeight;

o.innerHTML = this.innerHTML + "<br/>URL: " + this.href;

o.style.left = x + "px";
o.style.top = y + "px";

o.style.visibility = "visible";
return false;
}

function hide_popup()
{
var o = document.getElementById("popup");
o.style.visibility = "hidden";
return false;
}

//-->
</script>
</headv

<body onLoad="load();">
<div id="popup"></div>

<a href="http://www.yahoo.co.jp">YAHOO!</a>で検索した場合と
<a href="http://www.google.co.jp">Google</a>で検索した場合では
検索結果に違いがある。<br/>
<br/>
私のこの<a href="http://shoji.blog1.fc2.com/">ブログ</a>の来訪者のほとんどが
<a href="http://www.google.co.jp">Google</a>の検索から来訪しており、
<a href="http://www.yahoo.co.jp">YAHOO!</a>の検索からの来訪者は極端に少ない。
まして、どこかかのリンクというのはほとんどない。<br/>
<br/>

</body>
</html>



ま、文字列の長さによって吹き出しを可変にしたり、画面外から出たときの処置などはしないといけないだろうが、とりあえずは備忘録的に・・・。

テーマ:JavaScript - ジャンル:コンピュータ
コメント
この記事へのコメント
コメントを投稿する

管理者にだけ表示を許可する
トラックバック
この記事のトラックバックURL
この記事へのトラックバック
copyright © 2004-2006 SHOJI, Powered By FC2ブログ all rights reserved.
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。