<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
#msgList dt{
margin: 1em 0em;
}
#msgList dd{
margin: 0px;
}
#msgList img{
width: 75px;
height: 32px;
}
</style>
<script type="text/javascript">
function setMessege(msg,img){
var msg = document.getElementById(msg);
if(msg.style.display != "none"){
msg.style.display = "none";
img.src = "./img/open.gif";
}
else{
msg.style.display = "inline";
img.src = "./img/close.gif";
}
}
</script>
</head>
<body>
<dl id="msgList">
<dt><img src="./img/open.gif" alt="" onclick="setMessege('msg1',this);"></dt>
<dd id="msg1">メッセージ1</dd>
<dt><img src="./img/open.gif" alt="" onclick="setMessege('msg2',this);"></dt>
<dd id="msg2">メッセージ2</dd>
</dl>
<script type="text/javascript">
// JavaScriptでスタイルシートを操作し、メッセージを非表示にする
// (スタイルシート「だけ」で非表示にすると、スタイルシートは解釈するが JavaScript は無視する
// 環境でメッセージにアクセスできなくなる)
var Msg = document.getElementById("msgList").getElementsByTagName("dd");
for (var i = 0; i < Msg.length ; i++) {
Msg[i].style.display = "none";
}
</script>
</body>
</html><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="ja" dir="ltr">
<head>
<title></title>
<style type="text/css">
div.msgBox{
background-color: #FCC;
}
</style>
</head>
<body>
<div class="msgBox">
<p>メッセージ</p>
<p>メッセージ</p>
<p>メッセージ</p>
</div>
<div class="msgBox">
<p>メッセージ</p>
<p>メッセージ</p>
<p>メッセージ</p>
</div>
<script type="text/javascript">
// ページ内のすべてのdiv要素
var ob_div = document.getElementsByTagName("div");
// ページ内のすべてのdiv要素1つ1つに処理
for (var i = 0; i < ob_div.length ; i++) {
// div要素の class属性値に "msgBox" があるもののみ処理
// 以下、この div要素を「メッセージボックス」と呼称する
if(ob_div[i].className.match(/msgBox/i)){
// img要素を作る
var ob_img = document.createElement('img');
// img要素に属性をつける
ob_img.src = "./img/open.gif";
ob_img.alt = "開く";
ob_img.title = "開く";
//img要素にイベント属性を付ける
ob_img.onclick = function(){
// メッセージボックスは親要素(p)の直後の要素
var msgBox = this.parentNode.nextSibling;
// ここは見ればわかると思う
if(this.alt == "開く"){
msgBox.style.display = "block";
this.src = "./img/close.gif";
this.alt = "閉じる";
this.title = "閉じる";
}
else{
msgBox.style.display = "none";
this.src = "./img/open.gif";
this.alt = "開く";
this.title = "開く";
}
}
// p要素を作る
var ob_p = document.createElement('p');
// p要素の中に、先ほどの img要素を入れる
ob_p.appendChild(ob_img);
// メッセージボックスの直前に、先ほどの p要素を入れる
ob_div[i].parentNode.insertBefore(ob_p,ob_div[i]);
// メッセージボックスを非表示に
ob_div[i].style.display = "none";
// 念のために null
ob_img = null;
ob_p = null;
}
}
</script>
</body>
</html>