文字１６ ■実用■　ポップアップ説明文

■下の文や画像には、全部「ポップアップ説明文」が付いています。マウスオーバーしてみて下さい。

１．動くJavaScript

２．こちらのサイトとこちらのサイトのJavaScriptを合体して作成。

３．HOME 　MOUSE　　 SLIDE　　 LINK

４．

画像タグの中にも入れられます。

■つまりtitleタグが使用できる場所なら、全部使用可能です。
リンクや画像タグに
onMouseover="pu('説明文')" onMouseout="no()"
と記述して下さい。改行タグ br も使用できます。おしゃれなtitleタグのような使用感です。

今回のJavaScriptの記述とは無関係ですが、altタグとtitleタグの属性の違いを説明したサイトはこちら。
ポップアップ説明文に「ふきだし画像」を使用したJavaScriptはこちら。

◆全ソース◆
ソースの中でマウスの右クリックで『すべて選択』した後に、
再度右クリックして『コピー』

<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<meta http-equiv="Content-Style-Type" content="text/css">

<title>文字１６ ■実用■　ポップアップ説明文</title>

<!--★ここからコピー-->
<style type="text/css">
<!--
/*★ポップアップの装飾。#ppは必須*/
#pp{
position: absolute; /*★←この１行は必須。後の装飾は好みで*/
color:#000; /*★文字色 黒*/
background-color:#cfc; /*★背景色 薄緑色*/
font-size:80%; /*★文字サイズ*/
padding:5px; /*★背景と文字の隙間*/
border: solid 1px #075; /*★枠線 濃緑色*/
border-bottom-left-radius:5px;/*★左下角丸*/
border-top-right-radius:10px;/*★右上角丸*/
border-bottom-right-radius:10px;/*★右下角丸*/
box-shadow:2px 2px 5px #333333;/*★影指定*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body>
<br><br>

<!--★ここからコピー-->
<p>■下の文や画像には、全部「ポップアップ説明文」が付いています。マウスオーバーしてみて下さい。</p>
<h2 onMouseover="pu('タイトルの説明に使用できます')" onMouseout="no()">１．動くJavaScript</h2>
<p>
２．こちらの<a href="http://javascript.eweb-design.com/1003_puh.html" onMouseOver="pu('eWeb')" onMouseOut="no()" >サイト</a>とこちらの<a href="http://himajin.moo.jp/freejava/poptext2.html" onMouseOver="pu('himajin')" onMouseOut="no()" >サイト</a>の<span style="color:#f00;" onMouseover="pu('リンクにもspanタグにも使用できます')" onMouseout="no()">JavaScriptを合体</span>して作成。<br>
<br>

３．<a href="../index.html" onMouseOver="pu('当サイトの説明')" onMouseOut="no()" >HOME</a>  　<a href="../mouse_setumei.html" onMouseOver="pu('マウスストーカーの<br>JavaScript')" onMouseOut="no()" >MOUSE</a>　　
<a href="../slide_setmei.html" onMouseOver="pu('スライドショーの<br>JavaScript')" onMouseOut="no()" >SLIDE</a>　　
<a href="../link.html" onMouseOver="pu('リンク集。<br>このようにメニューの説明にも<br>使用できます')" onMouseOut="no()"> LINK</a><br>
<br>
４．<img src="../hoka/hya8.png" alt="" onMouseOver="pu('３本のポップな花')" onMouseOut="no()"> 画像タグの中にも入れられます。
</p>
<hr>
<p>■つまりtitleタグが使用できる場所なら、全部使用可能です。<br>
リンクや画像タグに<br>
onMouseover="pu('説明文')" onMouseout="no()"<br>
と記述して下さい。改行タグ br も使用できます。おしゃれなtitleタグのような使用感です。<br>
<br>
今回のJavaScriptの記述とは無関係ですが、altタグとtitleタグの属性の違いを説明したサイトは<a href="http://creativememomemo.com/html_alt_title/" target="_new"" onMouseOver="pu('creative memomemo')" onMouseOut="no()" >こちら。</a>
</p>

<script type="text/JavaScript">
<!--
/*==============================================================================
ポップアップ説明文 BY 
eWeb(onMouseoutの指定方法)http://javascript.eweb-design.com/1003_puh.html
HIMAJIN(ブラウザFireFoxのxy座標)http://himajin.moo.jp/freejava/poptext2.html
=================================================================================*/
set_x=20;//★マウスとポップアップの位置調整。横px
set_y=0;//★マウスとポップアップの位置調整。縦px
document.write("<span id='pp' style='visibility: hidden;'></span>");
function pu(t) {
document.getElementById("pp").innerHTML=t;
s_text=t;
t="<span id='pp'>"+s_text+"</span>";  
pp.style.left=rx+"px";
pp.style.top=ry+"px"; 
pp.style.visibility ="visible";
}
function no() {
pp.style.visibility="hidden";
}
document.onmousemove=function (e){
//ポップアップの位置を調整
rx = e.pageX+set_x;  // 表示するx座標
ry = e.pageY+set_y;   // 表示するy座標
}
//-->
</script>
<!--★ここまでコピー-->

<br><br><br>
</body>
</html>

文字１６ ■実用■ ポップアップ説明文 UP日時 : 2014/10/21

１．動くJavaScript

　文字１６ ■実用■　　ポップアップ説明文　　　　UP日時 : 2014/10/21