ポップアップのソースの書き方を教えてください

質問

HTMLは素人で、ここの相談を探して読んでも、いまひとつわかりませんので、具体的にご指導ください。

--前省略--<SPAN title="江南地方で---省略---ばかり"> 　口語</SPAN>--後省略--

とソースを書いています。
「口語」　をポイントしたら、「江南地方で---省略---ばかり」　というポップアップの文字が出るのですが、数秒間で消えてしまいます。
これをポイントしている間はいつまでも現れておくようにするには、ソースをどう書けばよいのでしょうか。よろしくお願いいたします。

回答No.3

cat_2001 · ベストアンサー

#2です。masabowさん、今回を期にソース（HTML）を解析できるように頑張りましょうね！
では、今回はお教えします。
このJSは「フローティングメッセージ」と言います。
まず、以下のCSS（スタイルシートと言います。これはメッセージを装飾する為にあります。色味具合などは、自分で好きなように入れてみて、何処がどう変化するのか確認してください）をヘッダー内に挿入します。

<style>
<!--
/* フローティングメッセージのスタイル */
.spanstyle {
position:absolute;
visibility:hidden;
color:#000000; /* フォント色 */
font-size:10pt; /* フォントサイズ */
/* font-weight:bold; 太字の場合コメントを外す */
border:1px gray solid; /* 枠線の太さ、色、形状 */
padding:5px;
background-color:#ffffcc; /* 背景色 */
z-index:100;
/* センタリングはネスケで表示位置が大幅にずれるので使用しないで下さい */
}
.temp_style {
color:#666666;
font-weight:bold;
background-color:#ffff00;
text-decoration:none;
}
-->
</style>

次に、JSを組み込みます。これもヘッダー内に挿入してください（CSSの下とかで充分です）

<SCRIPT type="text/javascript" language="JavaScript">
<!--
var sep_x = 0; // メッセージのマウス位置からのX方向離れ（右方向＋）
var sep_y = 20; // メッセージのマウス位置からのY方向離れ（下方向＋）
var message = new Array();

// ポップアップメニューのメッセージ
message[0] = '江南地方で---省略---ばかり' // ここに入れたい文字を書き込みます。

// -------------------------- 以下は特に変更はありません -------------------------
var x = -300;
var y = -100;
var ms = 0;
var ie4 = (navigator.appVersion.indexOf('MSIE 4')>=0);
var op6 = (navigator.userAgent.indexOf('Opera 6')>=0)||(navigator.userAgent.indexOf('Opera/6')>=0);

// メッセージデーターの先読み
for (i=0;i<message.length;i++){
document.write("<div id='span"+i+"' class='spanstyle'");
if(ie4){document.write(" style='width:10;'><table><tr><td nowrap");}
document.write(">");
document.write(message[i]);
if(ie4){document.write("</td></tr></table>");}
document.write("</div>");
}

// マウス座標位置取得
function handlerMM(e){
x = (document.all) ? document.body.scrollLeft+event.clientX : (op6)?event.clientX : e.pageX;
y = (document.all) ? document.body.scrollTop+event.clientY : (op6)?event.clientY : e.pageY;
flg=1;
}

// フローティングメッセージの表示
function disp_mess(ms){
if (flg==1 && document.all){
var thisspan = document.all("span"+ms).style;
thisspan.posLeft=x+sep_x;
thisspan.posTop =y+sep_y;
thisspan.visibility="visible"
}
if (flg==1 && document.layers){
var thisspan = eval("document.span"+ms);
thisspan.left=x+sep_x;
thisspan.top=y+sep_y;
thisspan.visibility="visible"
}
if (flg==1 && !document.all && document.getElementById){
var thisspan = document.getElementById("span"+ms);
thisspan.style.left=x+sep_x;
thisspan.style.top =y+sep_y;
thisspan.style.visibility="visible"
}
}

// フローティングメッセージの非表示
function del_mess(ms){
if (document.all){
var thisspan = document.all("span"+ms).style;
thisspan.visibility="hidden";
}
if (document.layers){
var thisspan = eval("document.span"+ms);
thisspan.visibility="hidden";
}
if (!document.all && document.getElementById){
var thisspan = document.getElementById("span"+ms);
thisspan.style.visibility="hidden";
}
}

function NN_reload(){
if (document.layers) location.reload();// ネスケリロード（リサイズ時）
}

// マウスイベント設定
if (document.layers){
document.captureEvents(Event.MOUSEMOVE);
}
if (!document.all && document.getElementById && !op6){
window.onmousemove = handlerMM;
window.captureEvents(Event.MOUSEMOVE);
}else{
document.onmousemove = handlerMM;
}

window.onresize = NN_reload;

//-->
</SCRIPT>

次に、「口語」とある言葉にJSを組み込みます。

<a href="#" onMouseover="disp_mess(0)" onMouseout="del_mess(0)">口語</a>

です。以上で
＞「口語」　をポイントしたら、「江南地方で---省略---ばかり」　

とご希望の形になります。試してみてください。

お礼

おかげでうまく出来ました。
お忙しい中を、本当にご親切に、懇切丁寧に教えていただき、お礼の言葉もありません。
javaと聞いただけで敬遠していましたが、おかげで少し近づくことが出来ました。これを機会に勉強したいと思います。
またわからないことありましたら、ご相談しますので、よろしくお願いいたします。
重ねて御礼申上げます。

回答No.2

cat_2001

今日は。
titleは（又はalt）はそう言う意味で使用するわけでは有りませんので、「ずっと出ていて！」とお願いするのも、酷かもしれませんよ（笑）
私もクライアントにご質問の動作を求められますが、そんな時はJSを使用しています。
説明が長くなってしまうので、参考URLをご覧下さい。
結構「あ～、こんなのがあったんだ」と言われることが多かったです。
お役に立てれば幸いです。

参考URL：

http://members.jcom.home.ne.jp/1633348312/sample/dhtml/popupmes.html

補足

ご指導有難うございます。
早速参考URLを開き、ポップアップメッセージ（その1)を取り入れたく、ソースの書き方を探しましたが見当たりませんでした。それで、そのページのソースを表示して、見よう見まねでやってみましたが、JavaScriptの知識がないせいか、失敗で、どうしてもわかりません。
質問に書きましたように、「口語」をポイントしている間、「江南地方で---省略---ばかり」が現れるソースの書き方をお教えください。
大変ご面倒をおかけし申し訳ありません。
どうぞよろしくお願いいたします。

回答No.1

shy00

<span title="*****">○○</span>

http://www.lunartecs.ne.jp/~white/sol/tech/html_css/006_01.html

に記載がありますが、環境によります

参考URL：

http://www.lunartecs.ne.jp/~white/sol/tech/html_css/006_01.html

お礼

早速のお返事有難うございます。でも何か他に方法がありませんかねぇ。
仕方がないとあきらめきれない思いです。