オンマウス

質問

<a onmouseover="txt1.style.display='block'" onmouseout="txt1.style.display='none'">$data[1]</a>

<span id="txt1" style="display:none;position:absolute;
border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">$data[2]<br></span>

オンラインマウスのサイトで上記の物を使用しています。
CGIで上記の物を使用していますが同一ページに複数あるとエラーで文字が表示されません。
「txt1」を変更すれば表示されるのは分かっているのですが、いちいち「txt1.txt2...」と変更せずに、これを同一ページに複数表示させるにはどうしたらよいでしょうか？。

回答No.2

yambejp · ベストアンサー

前提としてidに同じ名前をつけることは禁止されています。
最低限idは使えません。
グルーピングして調整してください。

<script language="javascript">
function setSpanDisplay(obj,dsp){
var cn=obj.parentNode.childNodes;
for(var i=0;i<cn.length;i++){
if(cn[i].className=="txt1" ){
cn[i].style.display=dsp;
break;
}
}
}
</script>

<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ1<br></span>
</span>
<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ2<br></span>
</span>
<span>
<a onmouseover="setSpanDisplay(this,'block')" onmouseout="setSpanDisplay(this,'none')">test</a>
<span class="txt1" style="display:none;position:absolute;border:1px outset 線の色;color:説明文の文字色;background-color:#ffffe1;width=465;">ほげ3<br></span>
</span>
<span>

お礼

回答ありがとうございます。
早速試しましたが求めていた物で助かりました。

回答No.1

leap_day

こんにちは

＞同一ページに複数ある
これはこのセットが複数あるということでしょうか？
それともCGIで複数個表示する書き方ということでしょうか？

下だったらCGIカテかperlカテで聞かれてると思うので上だと思って・・・

＞いちいち「txt1.txt2...」と変更せずに
う～～ん。簡略化はできると思いますけどぜんぜん変えずに複数個を別々にやるのは難しいのではないですかね？
下記のはaltの数字を変えるだけにしています（ソースの1個目の<span>が『0』番目になります）

<style type="text/css">
span {
display:none;
position:absolute;
border:1px outset blue;
color:blue;
background-color:#fffe1;
width:465px;
}
</style>

<script language="JavaScript">
function set(n) {
document.getElementsByTagName("span")[n].style.display = "block";
}
function del(n) {
document.getElementsByTagName("span")[n].style.display = "none";
}
//-->
</script>

<a onMouseover="set(this.alt)" onMouseout="del(this.alt)" alt="0">$data[1]</a>
<span>$data[1-2]</span><br>
<a onMouseover="set(this.alt)" onMouseout="del(this.alt)" alt="1">$data[2]</a>
<span>$data[2-2]</span><br>
<a onMouseover="set(this.alt)" onMouseout="del(this.alt)" alt="2">$data[3]</a>
<span>$data[3-2]</span><br>
<a onMouseover="set(this.alt)" onMouseout="del(this.alt)" alt="3">$data[4]</a>
<span>$data[4-2]</span><br>

お礼

回答ありがとうございます。
＞これはこのセットが複数あるということでしょうか？
そうです、複数あるということです。

＞簡略化はできると思いますけどぜんぜん変えずに
質問で書いた物は要望のものになれば変えてしまってもぜんぜん問題ありません。