WEST MiRa JavaScript¨サンプル礁(257硷梧) - リンク - ポイントすると、リンク黎のヘルプを山绩

[ JavaScriptの誊肌 ]

ⅴトップペ〖ジ
ⅴ答撩梦急
ⅴ答塑拎侯
ⅴその戮
ⅴサンプル礁(257硷梧)
ⅴその戮

[ 戮の办枉 ]

ⅰホ〖ムへ

ⅲ JavaScript - サンプル礁(257硷梧) - リンク
　　 - ポイントすると、リンク黎のヘルプを山绩

步狙墒アウトレットセ〖ル

リンク黎をポイントすると、その玻に棱汤矢を山绩させるスクリプトです。

ただしDHTML滦炳ブラウザでしか浩附されません。
IEならば4.01笆惧、NNならば4.0笆惧が涩妥です。

ˇサンプルを斧る
ˇソ〖スを瘦赂する
∈宝クリックⅹ≈滦据をファイルに瘦赂∽or≈リンクを叹涟を烧けて瘦赂∽して布さい。∷
ˇソ〖スを斧る
ˇ豺棱を斧る

[ ソ〖ス ]


<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">

<script language="JavaScript">
<!--//Copyright (C) WEST MiRa http://www.west-mira.jp

	moji=new Array();

	//ヘルプに山绩する矢机误を回年する
	moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。";
	moji[1]="フォ〖ムのサンプル礁です。";
	moji[2]="リンクのサンプル礁です<br>";
	moji[3]="リンクペ〖ジです。<br>";

	//ヘルプを山绩する腕の秦肥咖を回年する
	bg_color="#f4d0ab";

	//ヘルプを山绩する腕の玻升を回年する
	tabel_width=300;

	//ヘルプをマウスポインタからどの镍刨违すのか、玻の调违を回年する
	x_purasu=40;
	//ヘルプをマウスポインタからどの镍刨违すのか、侥の调违を回年する
	y_purasu=0;


	function hyouji(doko,event){
		kazari='<div style="width:'+tabel_width+';background-color:'+bg_color+';border-width:3pt;border-style:solid;border-color:'+bg_color+';padding:0;margin:0;">';
		kazari2='</div>';
		if(document.layers){
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.layers["lay"+doko].moveTo(x_iti+x_purasu,y_iti+y_purasu);
			document.layers["lay"+doko].document.open();
			document.layers["lay"+doko].document.write(kazari+moji[doko]+kazari2);
			document.layers["lay"+doko].document.close();
			document.layers["lay"+doko].visibility='show';}

		else if((document.getElementById) && (!document.all)){
			x_iti=event.pageX;
			y_iti=event.pageY;
			document.getElementById("lay"+doko).style.left=x_iti+x_purasu;
			document.getElementById("lay"+doko).style.top=y_iti+y_purasu;
			document.getElementById("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
			document.getElementById("lay"+doko).style.visibility='visible';}

		else if(document.all){
			x_iti=document.body.scrollLeft+event.clientX;
			y_iti=document.body.scrollTop+event.clientY;
			document.all("lay"+doko).style.pixelLeft=x_iti+x_purasu;
			document.all("lay"+doko).style.pixelTop=y_iti+y_purasu;
			document.all("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
			document.all("lay"+doko).style.visibility='visible';}
		}

	function hihyouji(doko){
		if(document.layers)
			document.layers["lay"+doko].visibility="hidden";
		else if((document.getElementById) && (!document.all))
			document.getElementById("lay"+doko).style.visibility="hidden";
		else if(document.all)
			document.all("lay"+doko).style.visibility="hidden";
		}

//-->
</script>

</head>

<body>

<a href="../../index.html" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a>
<span id="lay0" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../lib_form.html" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">サンプル礁∈フォ〖ム∷</a>
<span id="lay1" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">サンプル礁∈リンク∷</a>
<span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

<a href="../../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">リンク</a>
<span id="lay3" style="position:absolute;visibility:hidden;"></span>

　ˇ
　ˇ
　ˇ

</body></html>

[ 豺棱 ]

まず山绩させたい棱汤矢の矢咐を今き垂えます。
惧から6×9乖誊に山绩させる棱汤矢が4つあります。

リンクの界戎と滦炳しており、办戎誊が呵介のリンクの棱汤矢、企戎誊が企戎誊のリンクの棱汤矢になっています。
矢机の婶尸をお攻きなように今き垂えてください。
∈リンクの眶を笼やした眷圭は、稿揭。∷

惧から11乖誊の≈#f4d0ab∽婶尸は、山绩させる棱汤矢の秦肥咖を回年しています。
お攻きな咖にご恃构布さい。

惧から12乖誊と13乖誊にある
x_purasu=40;
y_purasu=0;
を恃构すると、ヘルプを山绩する疤弥を拇腊できます。
お攻みによって恃构してください。

惧から14乖誊の≈300∽と咐う眶机は、山绩される棱汤矢の嘲先の升を回年しています。
この眶机も涩妥に炳じて、お攻きなようにご恃构布さい。

肌にボディ柒をご枉布さい。リンクがあります。
URL回年は、奶撅のリンクを沤る箕と票じように≈href=∧∧∽の婶尸にURLをお今き布さい。

附哼サンプルでは4つのリンク黎が肋年されています。
呵稿は、これを笼やしたり负らしたりする数恕です。

まず办つのリンク黎は2乖で菇喇されています。

　<a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a>
　<span id="lay3" style="position:absolute;visibility:hidden;"></span>

このように舍奶のアンカ〖の布にspanタグがあります。
塑スクリプトでは、この2寥で办つのリンク黎が菇喇されています。

ですからリンク黎を负らす眷圭は、涩ずリンクだけでなく、その布にあるspanタグの乖も猴近して布さい。

またリンク黎を负らした眷圭は、スクリプト柒に淡揭している棱汤矢も稍妥になってきます。
棱汤矢は1乖で菇喇されていますので、滦炳する乖を猴近して布さい。

毋えばサンプルの办戎呵稿の≈Link∽のリンクを久した眷圭。

まずボディ柒でリンク黎を猴近します。

恃构涟
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a> <span id="lay0" style="position:absolute;visibility:hidden;"></span><br> <a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">答撩怪郝</a> <span id="lay1" style="position:absolute;visibility:hidden;"></span><br> <a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a> <span id="lay2" style="position:absolute;visibility:hidden;"></span><br> <a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a> <span id="lay3" style="position:absolute;visibility:hidden;"></span>
恃构稿
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a> <span id="lay0" style="position:absolute;visibility:hidden;"></span><br> <a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">答撩怪郝</a> <span id="lay1" style="position:absolute;visibility:hidden;"></span><br> <a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a> <span id="lay2" style="position:absolute;visibility:hidden;"></span><br>

鲁いて、棱汤矢を猴近します。

恃构涟
moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。"; moji[1]="答撩怪郝のトップペ〖ジです。<br>"; moji[2]="Libraryのトップペ〖ジです。<br>"; moji[3]="Linkのトップペ〖ジです。<br>Link礁があります。";
恃构稿
moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。"; moji[1]="答撩怪郝のトップペ〖ジです。<br>"; moji[2]="Libraryのトップペ〖ジです。<br>";

これで、リンク黎を负らす侯度は窗位です。

瓤滦にリンク黎を笼やす眷圭ですが、妥挝は负らす眷圭と票じです。
负らす箕に猴近した婶尸を、猴近するのではなく笼やしてあげます。
コピ〖ペ〖ストでOKです。

ただし、もちろんそのままではいけません。
傣つか今き垂える婶尸があります。

まずリンク婶尸。
とりあえず办戎布のリンクとspanタグを、コピ〖ペ〖ストで笼やしましょう。

肌に≈onMouseOver="hyouji(3,event);"∽と≈onMouseOut="hihyouji(3);"∽婶尸と ≈lay3∽の眶机の≈3∽を1帆り惧げて≈4∽にします。

布に≈JavaScript FAQ∽のリンク黎を纳裁した眷圭を毋に今いてみますので、ご徊雇布さい。

恃构涟
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a> <span id="lay0" style="position:absolute;visibility:hidden;"></span><br> <a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">答撩怪郝</a> <span id="lay1" style="position:absolute;visibility:hidden;"></span><br> <a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a> <span id="lay2" style="position:absolute;visibility:hidden;"></span><br> <a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a> <span id="lay3" style="position:absolute;visibility:hidden;"></span>
恃构稿
<a href="../../index.html#JavaScript" onMouseOver="hyouji(0,event);" onMouseOut="hihyouji(0);">JavaScript</a> <span id="lay0" style="position:absolute;visibility:hidden;"></span><br> <a href="../../index.html#JavaScript" onMouseOver="hyouji(1,event);" onMouseOut="hihyouji(1);">答撩怪郝</a> <span id="lay1" style="position:absolute;visibility:hidden;"></span><br> <a href="../lib_link.html" onMouseOver="hyouji(2,event);" onMouseOut="hihyouji(2);">Library</a> <span id="lay2" style="position:absolute;visibility:hidden;"></span><br> <a href="../etc_link.html" onMouseOver="hyouji(3,event);" onMouseOut="hihyouji(3);">Link</a> <span id="lay3" style="position:absolute;visibility:hidden;"></span> <a href="../kiso_faq.html" onMouseOver="hyouji(4,event);" onMouseOut="hihyouji(4);">JavaScript FAQ</a> <span id="lay4" style="position:absolute;visibility:hidden;"></span>

肌に、棱汤矢を纳裁します。

棱汤矢も票じように、リンク黎を负らす眷圭に猴近した婶尸を笼やしてあげます。
办戎呵稿の乖をコピ〖ペ〖ストで、笼やしてみて布さい。

矢咐婶尸はお攻きなように恃えてください。
で、黎片にある≈moji[3]∽の眶机の≈3∽の婶尸を、これも1帆り惧げて≈4∽にします。

黎ほどと票じように、布に毋矢を今きますのでご徊雇布さい。

恃构涟
moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。"; moji[1]="答撩怪郝のトップペ〖ジです。<br>"; moji[2]="Libraryのトップペ〖ジです。<br>"; moji[3]="Linkのトップペ〖ジです。<br>Link礁があります。";
恃构稿
moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。"; moji[1]="答撩怪郝のトップペ〖ジです。<br>"; moji[2]="Libraryのトップペ〖ジです。<br>"; moji[3]="Linkのトップペ〖ジです。<br>Link礁があります。"; moji[4]="WEST MiRaの构糠攫鼠です。<br>";

これで笼やす侯度は姜位です。
もっと笼やしたい眷圭は、票じ妥挝でどんどん纳裁して布さい。

∈输颅∷

ポイントした狠に、山绩されるヘルプの眷疥を办カ疥に盖年したい眷圭は、スクリプトを今き垂える涩妥があります。

その眷圭は、スクリプト婶尸を笆布のようにしてください。


     function hyouji(doko,event){
	moji=new Array();
	moji[0]="JavaScriptのトップペ〖ジです。<br>答撩怪郝とサンプル礁があります。";
	moji[1]="答撩怪郝のトップペ〖ジです。<br>";
	moji[2]="Libraryのトップペ〖ジです。<br>";
	moji[3]="Linkのトップペ〖ジです。<br>Link礁があります。";

	bg_color="#f4d0ab";
	x_purasu=40;
	y_purasu=0;
	tabel_width=300;
	kazari='<table width="'+tabel_width+'"  bgcolor="'+bg_color+'" cellpadding="4"><tr><td>';
	kazari2='</td></tr></table>';

	if(document.layers){
	   document.layers["lay"+doko].moveTo(x_purasu,y_purasu);
	   document.layers["lay"+doko].document.open();
	   document.layers["lay"+doko].document.write(kazari+moji[doko]+kazari2);
	   document.layers["lay"+doko].document.close();
	   document.layers["lay"+doko].visibility='show';}

	else if((document.getElementById) && (!document.all)){
	   document.getElementById("lay"+doko).style.left=x_purasu;
	   document.getElementById("lay"+doko).style.top=y_purasu;
	   document.getElementById("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
	   document.getElementById("lay"+doko).style.visibility='visible';}

	else if(document.all){
	   document.all("lay"+doko).style.pixelLeft=x_purasu;
	   document.all("lay"+doko).style.pixelTop=y_purasu;
	   document.all("lay"+doko).innerHTML=kazari+moji[doko]+kazari2;
	   document.all("lay"+doko).style.visibility='visible';}
     }

     function hihyouji(doko){
	if(document.layers)
		document.layers["lay"+doko].visibility="hidden";
	else if((document.getElementById) && (!document.all))
		document.getElementById("lay"+doko).style.visibility="hidden";
	else if(document.all)
		document.all("lay"+doko).style.visibility="hidden";}

疤弥は、
x_purasu=40;
y_purasu=0;
で回年してください。
x_purasuが玻疤弥、y_purasuが侥疤弥です。

サプリメントQ&A

　 WEST MiRa > JavaScript > サンプル礁(257硷梧) > リンク > ポイントすると、リンク黎のヘルプを山绩 >

バナ〖、リンクについて , 网脱惮腆 , ヘルプ