HTMLは素人で、ここの相談を探して読んでも、いまひとつわかりませんので、具体的にご指導ください。
--前省略--<SPAN title="江南地方で---省略---ばかり"> 口語</SPAN>--後省略--
とソースを書いています。
「口語」 をポイントしたら、「江南地方で---省略---ばかり」 というポップアップの文字が出るのですが、数秒間で消えてしまいます。
これをポイントしている間はいつまでも現れておくようにするには、ソースをどう書けばよいのでしょうか。よろしくお願いいたします。
No.3ベストアンサー
- 回答日時:
#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
- 回答日時:
今日は。
titleは(又はalt)はそう言う意味で使用するわけでは有りませんので、「ずっと出ていて!」とお願いするのも、酷かもしれませんよ(笑)
私もクライアントにご質問の動作を求められますが、そんな時はJSを使用しています。
説明が長くなってしまうので、参考URLをご覧下さい。
結構「あ~、こんなのがあったんだ」と言われることが多かったです。
お役に立てれば幸いです。
参考URL:http://members.jcom.home.ne.jp/1633348312/sample …
この回答への補足
ご指導有難うございます。
早速参考URLを開き、ポップアップメッセージ(その1)を取り入れたく、ソースの書き方を探しましたが見当たりませんでした。それで、そのページのソースを表示して、見よう見まねでやってみましたが、JavaScriptの知識がないせいか、失敗で、どうしてもわかりません。
質問に書きましたように、「口語」をポイントしている間、「江南地方で---省略---ばかり」が現れるソースの書き方をお教えください。
大変ご面倒をおかけし申し訳ありません。
どうぞよろしくお願いいたします。
No.1
- 回答日時:
<span title="*****">○○</span>
http://www.lunartecs.ne.jp/~white/sol/tech/html_ …
に記載がありますが、環境によります
参考URL:http://www.lunartecs.ne.jp/~white/sol/tech/html_ …
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・【大喜利】【投稿~11/12】 急に朝起こしてきた母親に言われた一言とは?
- ・好きな和訳タイトルを教えてください
- ・うちのカレーにはこれが入ってる!って食材ありますか?
- ・好きな「お肉」は?
- ・あなたは何にトキメキますか?
- ・おすすめのモーニング・朝食メニューを教えて!
- ・「覚え間違い」を教えてください!
- ・とっておきの手土産を教えて
- ・「平成」を感じるもの
- ・秘密基地、どこに作った?
- ・【お題】NEW演歌
- ・カンパ〜イ!←最初の1杯目、なに頼む?
- ・一回も披露したことのない豆知識
- ・これ何て呼びますか
- ・チョコミントアイス
- ・初めて自分の家と他人の家が違う、と意識した時
- ・「これはヤバかったな」という遅刻エピソード
- ・これ何て呼びますか Part2
- ・許せない心理テスト
- ・この人頭いいなと思ったエピソード
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・あなたの習慣について教えてください!!
- ・ハマっている「お菓子」を教えて!
- ・高校三年生の合唱祭で何を歌いましたか?
- ・【大喜利】【投稿~11/1】 存在しそうで存在しないモノマネ芸人の名前を教えてください
- ・好きなおでんの具材ドラフト会議しましょう
- ・餃子を食べるとき、何をつけますか?
- ・あなたの「必」の書き順を教えてください
- ・ギリギリ行けるお一人様のライン
- ・10代と話して驚いたこと
- ・家の中でのこだわりスペースはどこですか?
- ・つい集めてしまうものはなんですか?
- ・自分のセンスや笑いの好みに影響を受けた作品を教えて
- ・【お題】引っかけ問題(締め切り10月27日(日)23時)
- ・大人になっても苦手な食べ物、ありますか?
- ・14歳の自分に衝撃の事実を告げてください
- ・架空の映画のネタバレレビュー
- ・「お昼の放送」の思い出
- ・昨日見た夢を教えて下さい
- ・ちょっと先の未来クイズ第4問
- ・【大喜利】【投稿~10/21(月)】買ったばかりの自転車を分解してひと言
- ・メモのコツを教えてください!
- ・CDの保有枚数を教えてください
- ・ホテルを選ぶとき、これだけは譲れない条件TOP3は?
- ・家・車以外で、人生で一番奮発した買い物
- ・人生最悪の忘れ物
- ・【コナン30周年】嘘でしょ!?と思った○○周年を教えて【ハルヒ20周年】
- ・あなたの習慣について教えてください!!
- ・都道府県穴埋めゲーム
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スクロール可能なチェックボックス
-
CSSで背景を下までのばすには?
-
テーブルの1つのセル内で、上揃...
-
文字を固定したいのですが…
-
borderがおかしくなる・・・
-
画面が真っ白になるのはどうして?
-
MAX関数を使ってからLEFT JOIN...
-
embed要素のsrc属性の値を変更...
-
複数の画像をフェードイン・ア...
-
createElementで作成した要素を...
-
テキストボックスに入力された...
-
初心者です。クリッカブルマッ...
-
textareaに画像を表示したい
-
【HP作成】クリックすると下...
-
CSSでマウスオーバーした画像を...
-
htmlの記述で link rel=styles...
-
表示・非表示のスクリプトで、...
-
<EMBED>タグのSRCの値のみ変更
-
JavaScriptで変更した属性の元...
-
中心を軸にくるくる回るjQuery ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
フッター上部に謎の隙間
-
CSS <div>の入れ子が反映さ...
-
オンマウス時に別画像を上に重...
-
Ctrl+F(検索)の窓を出したいの...
-
スタイルシートで画面を上下に...
-
JQuery UIを使用したドラッグ&...
-
スクロール可能なチェックボックス
-
文字を固定したいのですが…
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
-
【CSS】floatで左右に並べた...
-
すいません、このタグですが、...
-
youtubeをHPに載せたいです。
-
スライダーの枠に動画を収める...
-
リンクで違うページの指定箇所...
-
CSSを使って3カラムにしたいの...
-
【html5】canvasでの文字の形の...
-
positionのrelativeとabsolute...
-
フッターの下に隙間ができてしまう
-
メニューやヘッダー背景だけを...
おすすめ情報