検索サーチエンジンと動画リンク集byねっとねこ

リンクテキストにマウスを乗せる(ポイント)すると説明文が表示される、Javaスクリプト

リンクにマウスをポイントすると説明文が枠内に表示されます。リンクは、画像でも OK!!です。 工夫して使ってみましょう。

リンクにマウスを乗せると説明が出る、Javaスクリプト

ここでは、テキストリンクを使っていますが、画像リンクでも使えます。
百聞は、一見というので、先ずは、下のテキストリンクにマウスを
乗せてみましょう。(^^)/ リンク先の簡単な説明が出ます。

家の子猫ちゃん達

家の子犬ちゃん達

私のプロフィール


リンク先は、このページになっているのでクリックしても大丈夫です。

先ず、この下のスタイルシートとJavaスクリプトをコピーします。
エリア内で 右クリック→ コピー

コピーしたソースを、
<head> から </head> の間の部分に、貼り付けます。

変更箇所は、<style type="text/css"> の下の
border:1 solid #ffaaaa; ←ここの、カラーコードを
好みのカラーコードに変更。説明文の出る枠の色です。

background-color:#ffffff; ←ここのカラーコードは、
説明文のバックカラーです。ここでは、白色です。

font-size:8pt; ←説明文の文字の大きさです。
これらは、好みに合わせて変更可能です。

<script language="JavaScript"> この中では、
// 説明枠の左からの位置
// 説明枠の上からの位置
// 説明が出る枠の大きさの割合
// 説明が出る枠
と、なったところの数値を任意に変更してください。
説明文の枠の大きさや説明文の出る位置を変更できます。

次に、リンクタグのコピーです。この下が、ここのリンクです。
エリア内で 右クリック→ コピー

リンクタグを書き入れる上の部分に、
<SPAN class="box" id="box"></SPAN> を書き入れます。

コピーしたリンクタグを自分用に変更して下さい。

リンクタグ内の
onmouseover="pop('家のかわいい子猫達の<br>写真を見て下さい♪<br>毎日癒されています。')" onmouseout="nonPop()"

は、表示される説明文です。自分用に編集して下さい。
編集時に、' や " を消さないようにします。

また、指定した枠内に上手く納まるように文章を書きます。
改行タグやフォントタグも使えます。
説明文を書く時は、改行しないで、そのまま続けて書きます。
改行すると、表示されません。


おしまい。。。








Copyright © 2008 - 2009 ねっとねこ Net-NekoProduction. All Rights Reserved.アクセスランキング