こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

解決済みの質問

画像のオンオフ(表示/不表示)

メニューの部分で

→トップ(マウスオーバー)
 日記
 写真
 掲示板

・矢印は画像でメニュー項目は文字
・テーブルは組まないようにしたい
・矢印の画像は全項目共通

上記のようにメニューにマウスが乗った時に、画像の矢印を表示させ、マウスアウトで不表示にしたいです。矢印画像と空白画像の切り換えも考えたのですが、単純に表示/不表示の切り換えでできないかなと考えましたが、そのコードがうまく考え付きません。visibilityとか使うのかな??う~ん??
このサイトやGoogleで検索しましたが、(単純すぎるのか?)見つけることができませんでした。

できればシンプルなコードをご教授いただければと思います。よろしくお願い致します。

投稿日時 - 2005-07-15 11:13:43

QNo.1514946

困ってます

質問者が選んだベストアンサー

#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;
}
-----------------------

投稿日時 - 2005-07-17 00:27:57

お礼

ご回答有り難うございました。
とても丁寧なコードを書いて頂いて感謝しております。IE4に対応したコードを参考にさせて頂こうと思います。

投稿日時 - 2005-07-23 16:13:33

ANo.4

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(4)

ANo.3

ちょっと補足の様な物で・・・。

一応 CSS は閲覧者側の環境で動きますから、
#1, #2の方々の提案では
CSS が無効の場合は全てに矢印が表示されますので、
それは意識する必要があると思います。
回避策は、初期表示を全面透過の画像か
背景色と全面同じ画像を表示させ、
マウスが乗った時に矢印の画像に置き換える。
仕掛けは style属性を更新するか src属性を更新するかの違いだけ。

まぁそこまでの配慮が必要かは不明ですが、
CSS を無効にする事が容易に出来るのは確かです。

投稿日時 - 2005-07-16 01:14:11

お礼

ご回答有り難うございました。

>CSS を無効にする事が容易に出来るのは確かです。

そうなんですね!勉強になりました

投稿日時 - 2005-07-23 16:11:24

ANo.2

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>

投稿日時 - 2005-07-15 14:22:24

お礼

ご回答有り難うございました。
#4の方のコードですすめる予定です。

投稿日時 - 2005-07-23 16:08:38

ANo.1

<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をそれぞれのメニュー項目で変えて使って下さい。

投稿日時 - 2005-07-15 11:40:50

お礼

ご回答有り難うございました。
#4の方のコードですすめていく予定です。

投稿日時 - 2005-07-23 16:07:26

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-