レイヤーについて
-
0 名前： blossom ： 2007/07/27（金） 14:51 ID:rVuC1kOq sub-WR
- どなたか下記のような説明でわかっていただければ是非教えてください。
レイヤーでうまく処理ができるのかわからないのですが、
ページ上部にタイトル画像、下部にRefreshで五分ごとに切り替わるグラフを複数配置しており、
下部のそれぞれのグラフにカーソルを合わせると上部のタイトル画像部分にグラフが拡大表示
されるように設定しています。
<script language="javascript" type="text/javascript">
<!--
function title_change( imgfile )
{
document.title.src = imgfile ;
}
function title_restore()
{
document.title.src = 'img/title.gif' ;
}
// -->
</script>
<tr>
<td rowspan="3">
<div align="center">
<img src="img/title.gif" alt="title" name="title" width="800" height="260" border="0" usemap="#title">
</div>
</td>
</tr>
<tr>
<td width="180" align="center" valign="top">
<a href="img/xxx.xxx.xxx.xxx_graph/#summary-@METRIC@-@TIME@">
<img src="img/xxx.xxx.xxx.xxx_graph/@HEAD@yyy.yyy.yyy.yyy_graph-summary-@METRIC@-@TIME@.png"
onMouseOver="title_change('xxx.xxx.xxx.xxx_graph/yyy.yyy.yyy.yyy_graph-summary-@METRIC@-@TIME@.png')"
onMouseOut="title_restore()" alt="graph" width="176" height="60" border="2" class="yyy-yyy-yyy-yyy"></a>
</td>
</tr>
↑こんな感じです。その上部タイトル画像に更にJavaScriptで時計を表示させて、
onMonuseOverで拡大画像に切り替わったときには非表示にしたいのですが、
onMouseOverで拡大画像に切り替わったときに、時計がその拡大画像の上に
表示されてしまいます。タイトル画像の背景は透明なので、
z-indexなどを使って時計をタイトル画像より下層に指定すれば、その上の層の
タイトル画像も拡大グラフ画像も影響なく見えるようになるかと思い試したのですが、
うまくいきませんでした。
それぞれ
document.title.src = imgfile ;
の下に
title.style.zIndex=2;
もしくは
document.title.style.zIndex=2;
、時計のJavaScriptの内部に
document.write("<DIV STYLE='position:absolute;font:"+mojisize+" Times New Roman;top:"+(staY-6)+";left:"+(staX-6)+";z-index:1;color:"+mojicolor+"'><b>"+(jikan+1)+"</b></DIV>");
}
document.write("<DIV STYLE='position:absolute;font-size:"+tensize+";top:"+(centery-2)+";left:"+(centerx-2)+";z-index:1;color:"+tencolor+"'>●</DIV>");
for(i=0;i<5;i++) {
document.write("<DIV STYLE='position:absolute;font-size:"+Msize+";top:"+centery+";left:"+centerx+";z-index:1;color:"+Mcolor+"'ID='M"+i+"'>●</DIV>");
document.write("<DIV STYLE='position:absolute;font-size:"+Ssize+";top:"+centery+";left:"+centerx+";z-index:1;color:"+Scolor+"'ID='S"+i+"'>●</DIV>");
if(i<3) {
document.write("<DIV STYLE='position:absolute;font-size:"+Hsize+";top:"+centery+";left:"+centerx+";z-index:1;color:"+Hcolor+"'ID='H"+i+"'>●</DIV>");
}
、と入れ込みました。
この指定の仕方が間違っているのか、もしくは別の方法について
ご存知の方がいらっしゃれば教えていただけないでしょうか？
説明が悪かったら申し訳ありません。
宜しくお願いします。
-
1 名前： 匿名 ： 2007/07/27（金） 14:51 ID:dSf93c20 sub-Cz
- z-index というのはスタック文脈からの値です。詳しくは以下参照。
http://mynotes.jp/blog/2007/05/basic_css_question_ans
http://www.aplus.co.yu/lab/z-pos/
なお、document.title というのは文書のタイトルを表す標準プロパティですが、上書きして大丈夫ですか？ と言うか、無精せずに document.images['title'] と非略記で書くようにして下さい（さらに言えば、document.images 自体もう推奨されないので getElementsByTagName() を使うべきだが略）。
それと、時計のスクリプトは別のを探すことをおススメします。
-
2 名前： blossom ： 2007/07/27（金） 14:51 ID:rVuC1kOq sub-WR
- 匿名さん、
早速のコメントありがとうございます。
お気づきだとは思いますが、4月からHTMLの勉強を始めたばかりの初心者で、
JavaScriptの入った古いページのメンテを頼まれて悪戦苦闘、試行錯誤の最中です。
匿名さんにご指摘いただいた点を踏まえて、もっと勉強します。
また、皆様に謝らなければならないのですが、マルチポストをしていました。
http://messages.yahoo.co.jp/bbs?.mm=CP&action=l&board=1835098&tid=javascripta4ka4da4a4a4f&sid=1835098&mid=103
上記掲示板に投稿していた内容で返事がなかったため、
少し付け加えてこちらに投稿してしまいました。
禁止されている事項だと気づいたのが遅く、ご迷惑をおかけしてしまった方には
本当に申し訳ありませんでした。
以後気をつけます。
ありがとうございました。
