アクティブリンク

◆アクティブリンク◆
 ┣１.リンクに触れると音が鳴る　　　・・・・　リンクにマウスが乗ると音が鳴る。
┣２.文字に触れると画像が出る　　　・・・・　リンクにマウスが乗ると記号が出る。
 ┣３.文字に触れると画像が出る　　・・・・　リンクにマウスが乗ると画像が出る。
┣４.文字に触れると解説が出るT　　　・・・・　文字にマウスが乗ると解説のポップアップウィンドウが出る。
 ┣５.文字に触れると解説が出るU　　・・・・　文字にマウスが乗ると半透明のポップアップウィンドウが出る。
┗６.文字に触れると解説が出るV　　・・・・　文字にマウスが乗るとポップアップウィンドウが開く。

　

リンクに触れると音が出る

■■１■■
[概要]
文字にマウスが乗ると文字列の説明が表示される。

[参照]
DHTML講座（表示/非表示）

[備考]
説明のスタイルは自由に設定しよう。説明や項目の数は好きなだけ増やせる。

[ソース]
<HTML>
<HEAD>
<TITLE>リンクに触れると音が鳴る</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
//リンク音を鳴らす
function runSound() {
    document.all.link_sound.src='サウンドファイルのＵＲＬ';
}
// -->
</SCRIPT>
<BGSOUND src="#" id="link_sound" loop=1 autostart="true">
</HEAD>
<BODY>
<A href="リンク１のURL" onMouseOver="runSound()">リンク１</A><P>
<A href="リンク２のURL" onMouseOver="runSound()">リンク２</A><P>
<A href="リンク３のURL" onMouseOver="runSound()">リンク３</A><P>
<A href="リンク４のURL" onMouseOver="runSound()">リンク４</A><P>
<A href="リンク５のURL" onMouseOver="runSound()">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

　

リンクに触れると記号が出る

■■２■■
[概要]
リンクにマウスが乗るとリンクの横に記号が出る。

[参照]

[ソース]
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//表示
function put(num){
    //ＩＤを取得
    menu_A = document.all.item("menu");
    //表示
    menu_A[num].style.visibility = "visible";
}

//消す
function not(num){
    //非表示
    menu_A[num].style.visibility = "hidden";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<SPAN id="menu" style={visibility:hidden;}>★</SPAN>　<A HREF="リンク１のＵＲＬ" onMouseOver="put(0)" onMouseOut="not(0)">リンク１</A><P>
<SPAN id="menu" style={visibility:hidden;}>★</SPAN>　<A HREF="リンク２のＵＲＬ" onMouseOver="put(1)" onMouseOut="not(1)">リンク２</A><P>
<SPAN id="menu" style={visibility:hidden;}>★</SPAN>　<A HREF="リンク３のＵＲＬ" onMouseOver="put(2)" onMouseOut="not(2)">リンク３</A><P>
<SPAN id="menu" style={visibility:hidden;}>★</SPAN>　<A HREF="リンク４のＵＲＬ" onMouseOver="put(3)" onMouseOut="not(3)">リンク４</A><P>
<SPAN id="menu" style={visibility:hidden;}>★</SPAN>　<A HREF="リンク５のＵＲＬ" onMouseOver="put(4)" onMouseOut="not(4)">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
※タグ内のput(数字),not(数字)の数字はリンクの数に従って増やす。

　

リンクに触れると画像が出る

■■３■■
[概要]
文字にマウスが乗ると文字列の説明が表示される。

[参照]

[ソース]

<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//画像を表示
function putImg(num){
    //ＩＤを取得
    menu_A = document.all.item("menu");
    //表示
    menu_A[num].style.visibility = "visible";
}

//画像を消す
function notImg(num){
    //非表示
    menu_A[num].style.visibility = "hidden";
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<img id="menu" SRC="画像のＵＲＬ" align="absmiddle" style={visibility:hidden;}>　<A HREF="リンク１のＵＲＬ" onMouseOver="putImg(0)" onMouseOut="notImg(0)">リンク１</A><P>
<img id="menu" SRC="画像のＵＲＬ" align="absmiddle" style={visibility:hidden;}>　<A HREF="リンク２のＵＲＬ" onMouseOver="putImg(1)" onMouseOut="notImg(1)">リンク２</A><P>
<img id="menu" SRC="画像のＵＲＬ" align="absmiddle" style={visibility:hidden;}>　<A HREF="リンク３のＵＲＬ" onMouseOver="putImg(2)" onMouseOut="notImg(2)">リンク３</A><P>
<img id="menu" SRC="画像のＵＲＬ" align="absmiddle" style={visibility:hidden;}>　<A HREF="リンク４のＵＲＬ" onMouseOver="putImg(3)" onMouseOut="notImg(3)">リンク４</A><P>
<img id="menu" SRC="画像のＵＲＬ" align="absmiddle" style={visibility:hidden;}>　<A HREF="リンク５のＵＲＬ" onMouseOver="putImg(4)" onMouseOut="notImg(4)">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
※タグ内のputImg(数字),notImg(数字)の数字はリンクの数に従って増やす。

　

リンクに触れると解説が出るT

■■４■■
[概要]
文字にマウスが乗ると解説のポップアップウィンドウが出る。

[参照]

[ソース]
<HTML>
<TITLE>ポップアップウィンドウ</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//ポップアップ表示
function pop(msg){
    //ウィンドウ位置設定
    x = event.clientX+document.body.scrollLeft+10; //左からの位置
    y = event.clientY+document.body.scrollTop+10; //上からの位置
    //ウィンドウセット
    box.style.left = x;
    box.style.top = y;
    box.style.visibility = "visible";
    box.innerHTML = msg;
}

//ポップアップを消す
function nonPop(){
    box.style.visibility = "hidden";
}
// -->
</SCRIPT>
<STYLE type="text/css">
<!--
.box {position:absolute;visibility:hidden;border:5 ridge blue;padding:5;background-color:#ccccff;}
//-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="box" id="box"></SPAN>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ１')" onMouseOut="nonPop()">リンク１</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ２')" onMouseOut="nonPop()">リンク２</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ３')" onMouseOut="nonPop()">リンク３</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ４')" onMouseOut="nonPop()">リンク４</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ５')" onMouseOut="nonPop()">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

　

リンクに触れると解説が出るU

■■５■■
[概要]
文字にマウスが乗ると半透明なポップアップウィンドウが出る。

[参照]

[ソース]
<HTML>
<TITLE>ポップアップウィンドウ</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
//ポップアップ表示
function pop(msg){
    //ウィンドウ位置設定
    x = event.clientX+document.body.scrollLeft+10; //左からの位置
    y = event.clientY+document.body.scrollTop+10; //上からの位置
    //ウィンドウセット
    box.style.left = x;
    box.style.top = y;
    box.style.visibility = "visible";
    box.innerHTML = msg;
}

//ポップアップを消す
function nonPop(){
    box.style.visibility = "hidden";
}
// -->
</SCRIPT>
<STYLE type="text/css">
<!--
.box {position:absolute;visibility:hidden;border:5 ridge blue;padding:5;background-image:url(画像のURL);}
//-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="box" id="box"></SPAN>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ１')" onMouseOut="nonPop()">リンク１</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ２')" onMouseOut="nonPop()">リンク２</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ３')" onMouseOut="nonPop()">リンク３</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ４')" onMouseOut="nonPop()">リンク４</A><P>
<A href="ＵＲＬ" onMouseMove="pop('メッセージ５')" onMouseOut="nonPop()">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。
※ウィンドウの背景画像に次のものを使うと半透明になる。
　←これ

　

リンクに触れると解説が出るV

■■６■■
[概要]
文字にマウスが乗るとポップアップウィンドウが開く。

[参照]

[ソース]
<HTML>
<TITLE>ポップアップウィンドウ</TITLE>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--

//ポップアップ表示
function pop(msg){
    box.style.visibility = "hidden";
    width = 0;
    height = 0; 
    message = msg;
    //ウィンドウ位置設定
    x = event.clientX+document.body.scrollLeft+10; //左からの位置
    y = event.clientY+document.body.scrollTop+10; //上からの位置
    //ウィンドウセット
    box.style.left = x;
    box.style.top = y;
    box.innerHTML = msg;
    box.style.visibility = "visible";
    zoom();
}
//ポップアップズーム
function zoom(){
    //拡大
    width += 20;
    height += 10;
    box.style.width = width;
    box.style.height = height;
    if(width>=200 && height>=100){
    }
    else{
        zoom_timer = setTimeout("zoom()",1);
    }
}
//ポップアップを消す
function nonPop(){
    box.style.visibility = "hidden";
}
// -->
</SCRIPT>
<STYLE type="text/css">
<!--
.box {position:absolute;visibility:hidden;border:0 ridge blue;padding:5;background-color:#ffcccc;overflow:hidden;}
//-->
</STYLE>
</HEAD>
<BODY>
<SPAN class="box" id="box"></SPAN>
<A href="ＵＲＬ" onMouseOver="pop('メッセージ１')" onMouseOut="nonPop()">リンク１</A><P>
<A href="ＵＲＬ" onMouseOver="pop('メッセージ２')" onMouseOut="nonPop()">リンク２</A><P>
<A href="ＵＲＬ" onMouseOver="pop('メッセージ３')" onMouseOut="nonPop()">リンク３</A><P>
<A href="ＵＲＬ" onMouseOver="pop('メッセージ４')" onMouseOut="nonPop()">リンク４</A><P>
<A href="ＵＲＬ" onMouseOver="pop('メッセージ５')" onMouseOut="nonPop()">リンク５</A><P>
</BODY>
</HTML>

※赤は変更点
※水色はid
※緑の部分はコメント部分。一緒に貼り付けても大丈夫。

　戻る