ブログFC2ブログ
日本で一番使われているFC2ブログで あなたもブログをはじめよう!
FC2動画 FC2動画
自分で撮った動画を公開!共有!携帯でも利用できる!!
FC2プロフFC2プロフ
自己紹介ページをすぐに公開できるサービス。 今すぐプロフを作ってみんなに見てもらおう!
FC2アフィリエイト
FC2ブログを紹介してお金がもらえる
FC2アフィリエイトに登録しよう!

TOP > スポンサー広告 > title - ポップアップ説明TOP > 使える?小技 > title - ポップアップ説明

スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ

ポップアップ説明

リンク先の説明をポップアップして説明してくれると見ている人はどこに移動するのかがわかってとっても親切ですよね。

という事でそのやり方を紹介します。

簡単なポップアップ説明させる方法

test楽天市場20061018041830.gif

作り方は、リンクを作る時にリンクのツールを使うと、<a href="リンク先のアドレス" target="_blank">タイトル</a>という様にテキスト記入欄に記入されます。

その記入されたtarget="_blank"の後にtitle="リンク先の説明"を書き足して下さい。
すると、見本の様にリンク先の説明が出てくる様になります。

難しいポップアップ説明させる方法

簡単なポップアップ説明の作り方だと、説明の文字が表示されるのに少し時間がかかってしまいます。それがどうしても嫌だという人はjavaスクリプトを使った少し難しいポップアップ説明を使って下さい。

test難しいポップアップ説明の見本20061018041830.gif(別窓で開きます)

作り方は管理画面の環境設定の変更→テンプレートの設定→[編集]→HTMLの編集を開いて下さい。
そして上の方にある</head>というタグを見つけます。Ctrl+Fを使うと見つけやすいです。
見つけたら</head>のすぐ上に以下のソースを書き加えます。
<script language="JavaScript">
<!--
b_color="#000000";     //枠の色
g_color="#ffffff";     //背景の色
f_size="12px";       //文字サイズ
f_color="#000000";     //文字色
set_x=50;         //ポップアップの横の位置
set_y=20;         //ポップアップの縦の位置
//--------------------------------------
document.write("<div ID='tiptext'STYLE='position:absolute;z-index:2;border:1px solid;padding:5px;");
document.write("border-color:"+b_color+";font-size:"+f_size+"pt;background-color:"+g_color+";");
document.write("color:"+f_color+";");
document.write("display:none'></div>");
function opentext(settxt){
divid="tiptext";
if(document.all){
d_div=document.all(divid);
rx = event.clientX + document.body.scrollLeft +set_x;
ry = event.clientY + document.body.scrollTop +set_y;
}else{
d_div=document.getElementById(divid);
rx = NNX + set_x;
ry = NNY + set_y;
}
if(settxt){
d_div.style.display="block";
d_div.style.left = rx +"px";
d_div.style.top = ry +"px";
d_div.innerHTML = settxt;
}else{
d_div.style.display="none";
d_div.innerHTML = ""; }
}
function MouseXY(NNevent){
NNX = NNevent.pageX;
NNY = NNevent.pageY;
}
window.onmousemove = MouseXY;/* himajin.moo.jp */
// -->
</script>

そしてリンクを作る時に、target="_blank"の後に「onMouseover="opentext('ここに説明を記入する(<br/>で改行できます)')" onMouseout="opentext('')"」を書き加えます。

これで出来上がりです。

任意の場所だけに説明させる方法

今までの方法はリンクの近くにポップアップを作って説明を表示させていましたが、この方法は自分で決めた1箇所だけにリンクの説明を表示させる方法です。

test任意の場所に説明させる方法見本20061018041830.gif(別窓で開きます)

作り方は管理画面の環境設定の変更にある[テンプレートの設定]→[編集]→[HTMLの編集]を開いて下さい。
そして上の方にある</head>というタグを見つけます。Ctrl+Fを使うと見つけやすいです。
見つけたら</head>のすぐ上に以下のソースを書き加えます。
<script language="JavaScript">
<!--
function sp(msg){
if(msg==""){info.innerHTML="";
}else{info.innerHTML=msg;}}
//-->
</script>

次にリンク先の説明を表示させたい任意の場所に以下のソースを設置します。
ここに説明を表示します→→→<span id=info></span>

最後にリンクを作る時に、target="_blank"の後に「onMouseOver=sp("ここに説明を記入する"); onMouseOut=sp("");」を書き加えます。

これで出来上がりです。



◆FC2ブログの事でどうしても疑問が解決しない人はFC2ブログ ユーザーフォーラムへ。
★アフィリエイト人気ランキング★  [アフィリエイトとは?]
リンクシェア
の詳細はこちら
エーハチネット
の詳細はこちら
バリューコマース
の詳細はこちら
アフィリエイト リンクシェア ブログ 携帯対応 成果報酬 広告 テンプレート ブログパーツ
コメント
この記事のトラックバックURL

http://rgrg.blog61.fc2.com/tb.php/600-b45a8bf7   

Template Designed by DW99

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。