文字１７ ■実用■　ポップアップ説明文(画像)

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

１．動くJavaScript

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

３．HOME 　MOUSE　　 SLIDE　　 LINK

４．

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

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

今回のJavaScriptの記述とは無関係ですが、altタグとtitleタグの属性の違いを説明したサイトはこちら。

前回の　ポップアップ説明文のCSSの装飾を変更して、「ふきだし画像」を背景画像に使用しました。
背景画像使用でも柄だけの背景ならよいですが、今回のように、ふきだし一個を説明文の長さに応じて伸縮させる場合は、少し工夫が必要です。

background-size:100% 100%;指定して、説明文のスペース一杯に、ふきだしを表示させます。
ふきだしの縦横の比率によって、paddingの数値を変え、説明文の改行(br)で文章のバランスを取ります。
そして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-image:url("ira8.png"); /*★背景画像ふきだし。背景画像実寸は横80px縦63px*/
background-size:100% 100%;/*★今回は背景画像１個を、説明サイズ一杯に表示させるために指定*/
font-size:80%; /*★文字サイズ*/
padding:30px; /*★背景と文字の隙間。読みやすい隙間が空くよう調整*/
line-height:1.1;/*★行間指定。背景画像に収まりやすい行間で*/
}
-->
</style>
<!--★ここまでコピー。bodyにもコピーがあります-->

</head>
<body bgcolor="#cceeee">
<br><br>

<!--★ここからコピー-->
<p>■下の文や画像には、全部「<span style="color:#f00;">ふきだし画像の</span>ポップアップ説明文」が付いています。マウスオーバーしてみて下さい。</p>
<h2 onMouseover="pu('タイトルに<br>使用できます')" 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('リンクにも<br>spanタグにも<br>使用できます')" 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>メニューの説明にも<br>使用できます')" onMouseOut="no()"> LINK</a><br>
<br>
４．<img src="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>

<hr style="background-color:red; color:red; height:2px;">
<p>前回の　<a href="hoka_moji16.html">ポップアップ説明文</a>のCSSの装飾を変更して、「ふきだし画像」を背景画像に使用しました。<br>
背景画像使用でも柄だけの背景ならよいですが、今回のように、ふきだし一個を説明文の長さに応じて伸縮させる場合は、少し工夫が必要です。<br>
<br>
background-size:100% 100%;指定して、説明文のスペース一杯に、ふきだしを表示させます。<br>
ふきだしの縦横の比率によって、paddingの数値を変え、説明文の改行(br)で文章のバランスを取ります。<br>
そしてJavaScriptのソースの、マウスとポップアップの位置調整をして、見やすい位置にポップアップするようにします。</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=-100;//★マウスとポップアップの位置調整。縦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/22

１．動くJavaScript

　文字１７ ■実用■　　ポップアップ説明文(画像)　　　　UP日時 : 2014/10/22