- ベストアンサー
画像のオンオフ（表示／不表示）
メニューの部分で →トップ（マウスオーバー） 日記 写真 掲示板 ・矢印は画像でメニュー項目は文字 ・テーブルは組まないようにしたい ・矢印の画像は全項目共通 上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな？？う～ん？？ このサイトやGoogleで検索しましたが、（単純すぎるのか？）見つけることができませんでした。 できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。
- jamslot
- お礼率71% (338/471)
- JavaScript
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
#2の手法ではNetscapeなどで動作しないので(その代わりIE4では動作しません)。 ---------------------------------- HTML <ul id="menu"> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">トップ</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">日記</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">写真</a></li> <li><a href="*****" onmouseover="visArrow(this, 1)" onmouseout="visArrow(this, 0)"><img src="*******.gif" alt="">掲示板</a></li> </ul> ---------------------------------- JavaScript function visArrow(obj, n){ if (document.getElementById) { obj.childNodes[0].style.visibility = n ? "visible" : "hidden"; } } ---------------------------------- CSS #menu { margin-left: 0; padding-left: 0; } #menu img { visibility: hidden; } ---------------------------------- もし、個別のIDを付けるのが特に面倒でなく、IE4に対応させるなら <ul id="menu"> <li><a href="*****" onmouseover="visArrow(0, 1)" onmouseout="visArrow(0, 0)"><img src="*******.gif" alt="" id="menu0">トップ</a></li> <li><a href="*****" onmouseover="visArrow(1, 1)" onmouseout="visArrow(1, 0)"><img src="*******.gif" alt="" id="menu1">日記</a></li> <li><a href="*****" onmouseover="visArrow(2, 1)" onmouseout="visArrow(2, 0)"><img src="*******.gif" alt="" id="menu2">写真</a></li> <li><a href="*****" onmouseover="visArrow(3, 1)" onmouseout="visArrow(3, 0)"><img src="*******.gif" alt="" id="menu3">掲示板</a></li> </ul> ---------------------------------- JavaScript function visArrow(objNum, n){ if (document.all) { document.all("menu" + objNum).style.visibility = n ? "visible" : "hidden"; } else if (document.getElementById) { document.getElementById("menu" + objNum).style.visibility = n ? "visible" : "hidden"; } } ---------------------------------- CSS #menu { margin-left: 0; padding-left: 0; } #menu img { visibility: hidden; } -----------------------
その他の回答 (3)
- koutarou504
- ベストアンサー率44% (182/407)
ちょっと補足の様な物で・・・。 一応 CSS は閲覧者側の環境で動きますから、 ＃１, ＃２の方々の提案では CSS が無効の場合は全てに矢印が表示されますので、 それは意識する必要があると思います。 回避策は、初期表示を全面透過の画像か 背景色と全面同じ画像を表示させ、 マウスが乗った時に矢印の画像に置き換える。 仕掛けは style属性を更新するか src属性を更新するかの違いだけ。 まぁそこまでの配慮が必要かは不明ですが、 CSS を無効にする事が容易に出来るのは確かです。
お礼
ご回答有り難うございました。 ＞CSS を無効にする事が容易に出来るのは確かです。 そうなんですね！勉強になりました
- taseki
- ベストアンサー率66% (155/233)
cobolerさんと同じような仕組みですが、idが複数だと配列になるのを利用して… -------------------- <html> <body> <a href="diary.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">日記</a><br> <a href="photos.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">写真</a><br> <a href="bbs.html" onMouseover="this.all.arrow.style.visibility='visible'" onMouseout="this.all.arrow.style.visibility = 'hidden'"> <img id="arrow" src="arrow.gif" width="20" height="10" style="visibility:hidden;border-style:none;">掲示板</a><br> </body> </html>
お礼
ご回答有り難うございました。 ＃４の方のコードですすめる予定です。
- coboler
- ベストアンサー率57% (57/99)
<img src="mark.gif" id="mark" style="visibility:hidden";> <font onMouseover="mark.style.visibility = 'visible'"; onMouseout="mark.style.visibility = 'hidden'">メニュー文字</font> 上記コードの"mark.gif"を矢印画像にすればいけると思います。 imgタグのidをそれぞれのメニュー項目で変えて使って下さい。
お礼
ご回答有り難うございました。 ＃4の方のコードですすめていく予定です。
お礼
ご回答有り難うございました。 とても丁寧なコードを書いて頂いて感謝しております。IE4に対応したコードを参考にさせて頂こうと思います。