プロが教える店舗＆オフィスのセキュリティ対策術

マウスオーバーのメニューについて

解決済

  • 質問者：it-raine
  • 質問日時：
  • 回答数：5件

お世話になります。

現在、オンマウスでメニュー画像が表示される仕組みを作成しているのですが、別のメニューにする方法がわかりません。
たとえば、「MAIN」と「LINK」のメニューがあるとして、MAINはMAINのメニュー、LINKはLINKのメニューが表示されるという方法です。

http://memorva.jp/memo/html/js_css_menu_mover.php

上記のURLの方法なのですが。
この場合、cssの数値を変えて（css12ならcss13）スクリプトを追加すればいいのでしょうが、その方法でやっても、同じ画像が表示されます。
（css13のスクリプトを新しく書き加えたのにブラウザでプレビューするとcss12の内容が表示されてしまいます。）



↓HEAD内のCSS設定部分は下記のように分割して書いてます
<script language="javascript">
<!--
function mOver(){
css12.style.display = "block";
}
function mOut(){
css12.style.display = "none";
}

//-->
</script>
<script language="javascript">
<!--
function mOver(){
css13.style.display = "block";
}
function mOut(){
css13.style.display = "none";
}

//-->
</script>

よろしくお願い致します。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5

  • 回答者： reverie013
  • 回答日時：

話は先に進んでいるようですがもしかしてとちょこっと思った突っ込みを。


何だか質問者様はid名をわかっていらっしゃらなさそうな印象を受けました。
もしかしてHTML側のブロック要素に指定したid名を変更されていなかった、
間違っていたということはありませんか？
念のため確認でした。

以下は質問に関係ない独り言ですが、
参考サイトのcss12だとかっていうid名ってどうなのだろう。
ありなんですかね？
個人的にこういう紛らわしいような名前ってNGだと思っていたのですが。。。
まあ個人の好き好きですよね。失礼致しました。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ID名はちゃんと変更しました。
間違っていたということもおそらくは無いです（自信ありません）。

ID名はURL先に記述されていたものをそのまま使い、バグ防止の為変更していませんでした。
ややこしくてすみません。

通報する
お礼日時：2009/01/20 11:38

No.4ベストアンサー

  • 回答者： fujillin
  • 回答日時：

ANo.3です。



＞記述頂いたソースですとリンクテスト２の文字が下にズレます
ご提示のURLの方法がそのような仕様になっていますので、切り替え時にレイアウトがし直されることになるためです。

＞内容が下にズレないでそのまま重ねて表示も可能でしょうか。
いろいろやりかたはあると思いますが、とりあえず現状に近い方法でやるなら、以下のどちらかの方法でしょうか？

1）visibilityで 表示/非表示 を切り替える
　disuplay属性だと、レイアウトを再構築しますが、visibility属性だと全表
　示の状態でレイアウトし、単に 表示する/しない だけの切り替えになる
　ようです。

2）ＣＳＳを　position:absolute にする
　位置が絶対指定となりますので、要素の表示状態によらず同じレイアウト
　となります。
　ただし、位置が絶対指定になるので、スクリプトで left、topを指定し直し
　てあげる必要があります。（場合によりz-indexも必要かも）
    • good
    • 0
    • 件
通報する
この回答へのお礼

素早いご回答ありがとうございます。
<div id="hoge1" class="css0">～内のソースをposition:absoluteにしたら出来ました。
何とかなりそうです。もう少し頑張ってみます。
ありがとうございました！

通報する
お礼日時：2009/01/20 10:33

No.3

  • 回答者： fujillin
  • 回答日時：

ANo.2様の回答で、できるはずですが？


どこをどのように修正されたのか不明ですが、こんな感じでやれば何箇所でも可能なはずです。

<html>
<style type="text/css">
div { width:150px; }
.css0 {
display:none; padding:3px;
position:relative; left:8px; top:0px;
border:2px gray solid;
}
</style>
<script language="JavaScript">
function mOver(elm){ fuga(elm,'block'); }
function mOut(elm){ fuga(elm,'none'); }
function fuga(e,dsp){
document.getElementById(e).style.display = dsp;
}
</script>
<body >
<div onmouseover="mOver('hoge1')" onmouseout="mOut('hoge1')">
リンクテスト1
<div id="hoge1" class="css0">
<a href="http://www.yahoo.co.jp/">Yahoo</a><br>
<a href="http://www.google.co.jp/">Google</a>
</div></div>
<p>
<div onmouseover="mOver('hoge2')" onmouseout="mOut('hoge2')">
リンクテスト2
<div id="hoge2" class="css0">
<a href="http://www.infoseek.co.jp/">Infoseek</a><br>
<a href="http://www.biglobe.ne.jp/">Biglobe</a>
</div></div>
</body>
</html>
    • good
    • 0
    • 件
通報する
この回答へのお礼

別々に表示は出来たのですが、今度はページのデザインが勢いよく崩れてしまいます。
表示されるメニューを任意の位置に指定ということに関しては、質問で記述したリンク先のソースでも出来ましたが、その下の表示されたページの内容がズレてしまいます。
（記述頂いたソースですとリンクテスト２の文字が下にズレます）
内容が下にズレないでそのまま重ねて表示も可能でしょうか。

通報する
お礼日時：2009/01/20 09:32

No.2

  • 回答者： reverie013
  • 回答日時：

試していないのでそれで必ずできる保障はありませんが、


現在
onmouseover="mOver()" onmouseout="mOut()"
とされているところを
onmouseover="mOver('id名')" onmouseout="mOut('id名')"
として、JSの記述を
function mOver(mId){
　　document.getElementById("mId").style.display ="block";
}
function mOut(mId){
　　document.getElementById("mId").style.display ="none";
}
とかしたらできそうな気がします。
気がしているだけなので試してみて下さい。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

しかしながら、同じ結果になってしまいました。
お調べ頂いたのに申し訳ないです・・・。

通報する
お礼日時：2009/01/19 18:27

No.1

  • 回答者： reverie013
  • 回答日時：

とりあえず見て気になった部分の指摘だけ。



JSは分割して書く意味はありません。
関数名が重複している為、別の関数名に変えるか、
一まとめに書いて関数内で条件分岐などするか
しなければいけないと思います。

また何か気が付いたら書き込みます。
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとうございます。

条件分岐！それがありましたっけ。
名前を指定するだけではダメという事でしょうか。

通報する
お礼日時：2009/01/19 17:08

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報