リンクに触れたときに文字を表示させたい

[新着] Webテンプレートを仮オープンしました

0   名前： TIKI ： 2007/01/09（火） 12:03  ［URL］  ID:sHwjDaM4
上のＨＰを今は作成中なのですが
リンクの項目を触れると、右の空白にテーブルに囲った文字を
表示させたいという形で作ることを考えていますが
記述方法が分かりません。

最初はデフォルトの文字が入力されてる状態から
リンクに触れると、それぞれのコンテンツの説明を出す
という形にするのが理想ですが、よければ教えて下さい！
1   名前： カヅサツ ◆ThCi95HEzw ： 2007/01/09（火） 12:03  ［URL］  ID:O5hEMlpW
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
<html lang="ja" dir="ltr">
<head>
<title>メニューページ / プレイスゲーム</title>
<style type="text/css">
body{
	background-color: #DEB887;
	background-image: url(http://www.geocities.jp/place_game_tales/menu-kabegami.jpg);
}
h1{
	color: white;
	font-family: "AR PハイカラＰＯＰ体H";
	font-size: 600%;
}
h1:first-letter{
	font-size: 250%;
	float: left;
}
dl#menu{
	position: relative;
	clear: both;
}
dl#menu dt{
	font-size: 200%;
	margin: 0px 2em;
}
dl#menu dd.menuiten{
	font-size: 150%;
	text-align: center;
	margin: 0px;
	border-width; 4px;
	border-style: solid;
	border-color: white;
	width: 50%;
	height: 15em;
}
dl#menu dd dl{
	margin: 0em;
}
dl#menu dd dt{
	color: #FF4500;
	font-size: 150%;
	margin: 1em 0em 2em;
}
dl#menu dd dd{
	margin: 1em 0em;
}
dl#menu dd p{
	margin: 0em;
}

a:link,
a:visited{
	color: white;
	text-decoration: none; /* リンクが判り辛いのでオススメしません */
}
</style>
<script type="text/javascript">
function DelCom(){
	var menuitem = document.getElementById('menu').getElementsByTagName('dd')
	for(var i = 0; i < menuitem.length; i++){
		if(menuitem[i].className == "menuiten"){
			menuitem[i].style.display = "none";
			menuitem[i].style.position = "absolute";
			menuitem[i].style.top = "0px";
			menuitem[i].style.left = "40%";
		}
	}
}
function ChCom(obj){
	var menuitem = document.getElementById(obj);
	if (menuitem.style.display != "block"){
		menuitem.style.display = "block";
	}
	else{
		menuitem.style.display = "none";
	}
}
</script>
</head>
<body onload="DelCom();">
<h1>Place game</h1>
<dl id="menu">
	<dt><a href="http://www.geocities.jp/place_game_tales/narikiri_setumei.html"
		onmouseover="ChCom('menu1');" onmouseout="ChCom('menu1');">なりきり板</A></dt>
	<dd id="menu1" class="menuiten">
		<dl>
			<dt>なりきり掲示板</dt>
			<dd>
				<p>このサイトのメインのページです。</p>
				<p>テイルズシリーズのキャラになりきって話す掲示板があります。</p>
			</dd>
			<dd>
				<p>初心者でも気軽に参加できますよ！</p>
			</dd>
		</dl>
	</dd>
	<dt><a href="" onmouseover="ChCom('menu2');" onmouseout="ChCom('menu2');">test</A></dt>
	<dd id="menu2" class="menuiten">
		<dl>
			<dt>test</dt>
			<dd>
				<p>testです</p>
			</dd>
		</dl>
	</dd>
</dl>
</body>
</html>

2   名前： サイ ： 2007/01/09（火） 12:03  ID:qEhaFrSe
z-indexを使用したやり方です。

<head>〜</head>の間に
<script  type="text/javascript">

function disp(layName,zindex){
if(document.getElementById)
document.getElementById(layName).style.zIndex=zindex
}

</script>


<head>〜</head>のスタイルに以下を追加。
.box {
	position:absolute;top:30px;left:200px; /* ボックスの位置 */
	height:300px;width:300px; /* ボックスの大きさ */
	padding:10px;
	border:#333333 solid 2px;
	text-align:center;
	background-color:#ffffff; /* 背景は必ず何か入れてください */
}

位置と大きさは、好きに改変してください。

以下は、<body>〜</body>の中
<a href="#" onMouseOver="disp('form1',3);" onMouseOut="disp('form1',1);">なりきり板</a><br><br>
<a href="#" onMouseOver="disp('form2',3);" onMouseOut="disp('form2',1);">待ち合わせ掲示板</a><br><br>
<a href="#" onMouseOver="disp('form3',3);" onMouseOut="disp('form3',1);">ネタバレ掲示板</a><br><br>
<a href="#" onMouseOver="disp('form4',3);" onMouseOut="disp('form4',1);">キャラ人気投票の説明</a><br><br>
<a href="#" onMouseOver="disp('form5',3);" onMouseOut="disp('form5',1);">フリーボードの説明</a><br><br>
<a href="#" onMouseOver="disp('form6',3);" onMouseOut="disp('form6',1);">お絵かき板の説明</a><br><br>
<a href="#" onMouseOver="disp('form7',3);" onMouseOut="disp('form7',1);">心の捨て場の説明</a><br><br>
<a href="#" onMouseOver="disp('form8',3);" onMouseOut="disp('form8',1);">お絵かきチャットの説明</a><br><br>
<a href="#" onMouseOver="disp('form9',3);" onMouseOut="disp('form9',1);">ダイアリーの説明</a><br><br>
<a href="#" onMouseOver="disp('form10',3);" onMouseOut="disp('form10',1);">リンクサイトの説明</a><br><br>
<a href="#" onMouseOver="disp('form11',3);" onMouseOut="disp('form11',1);">トップページの説明</a><br><br>

<div style="z-index:1;" id="form1" class="box">なりきり掲示板の説明</div>
<div style="z-index:1;" id="form2" class="box">待ち合わせ掲示板の説明</div>
<div style="z-index:1;" id="form3" class="box">ネタバレ掲示板の説明</div>
<div style="z-index:1;" id="form4" class="box">キャラ人気投票の説明</div>
<div style="z-index:1;" id="form5" class="box">フリーボードの説明</div>
<div style="z-index:1;" id="form6" class="box">お絵かき板の説明</div>
<div style="z-index:1;" id="form7" class="box">心の捨て場の説明</div>
<div style="z-index:1;" id="form8" class="box">お絵かきチャットの説明</div>
<div style="z-index:1;" id="form9" class="box">ダイアリーの説明</div>
<div style="z-index:1;" id="form10" class="box">リンクサイトの説明</div>
<div style="z-index:1;" id="form11" class="box">トップページの説明</div>

<div style="z-index:2;" id="form13" class="box">（最初から出ている文字）</div>

※ # には正規のリンクアドレス入れてください。
メニューはリスト使ったほうがいいかも？

たぶん、IE以外でも動くと思います。
分からないところは、具体的に聞いてください。
3   名前： TIKI ： 2007/01/09（火） 12:03  ID:sHwjDaM4
お二人ともご回答ありがとうございます！
早速二人の記述を参考に、自分で理解して組み立てて見るように
してみますね！
4   名前： TIKI ： 2007/01/09（火） 12:03  ［URL］  ID:NMWUo8ag
それを上手くできた上のURLから更に質問なのですが
リンクを表示されてないときの、デフォルトの文字などを
表示させたいのですが
リンクに触れたときの文字と被さらないように
そうさせることができる記述を教えて下さい！
5   名前： 匿名 ： 2007/01/09（火） 12:03  ID:NRh6Ia0I
http://www.red.oit-net.jp/tatsuya/java/のメールtatsuya@red.oit-net.jpに
質問出してみて。
6   名前： javajava ： 2007/01/09（火） 12:03  ID:s1sPYefE
ついでに、javaとJavaSciriptはちがうと書いておいてください。
よく引用されるサイトだけど、みんなの笑いものです。
一覧へ戻る