![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
お世話になります。
現在、オンマウスでメニュー画像が表示される仕組みを作成しているのですが、別のメニューにする方法がわかりません。
たとえば、「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>
よろしくお願い致します。
No.4ベストアンサー
- 回答日時:
ANo.3です。
>記述頂いたソースですとリンクテスト2の文字が下にズレます
ご提示のURLの方法がそのような仕様になっていますので、切り替え時にレイアウトがし直されることになるためです。
>内容が下にズレないでそのまま重ねて表示も可能でしょうか。
いろいろやりかたはあると思いますが、とりあえず現状に近い方法でやるなら、以下のどちらかの方法でしょうか?
1)visibilityで 表示/非表示 を切り替える
disuplay属性だと、レイアウトを再構築しますが、visibility属性だと全表
示の状態でレイアウトし、単に 表示する/しない だけの切り替えになる
ようです。
2)CSSを position:absolute にする
位置が絶対指定となりますので、要素の表示状態によらず同じレイアウト
となります。
ただし、位置が絶対指定になるので、スクリプトで left、topを指定し直し
てあげる必要があります。(場合によりz-indexも必要かも)
素早いご回答ありがとうございます。
<div id="hoge1" class="css0">~内のソースをposition:absoluteにしたら出来ました。
何とかなりそうです。もう少し頑張ってみます。
ありがとうございました!
No.5
- 回答日時:
話は先に進んでいるようですがもしかしてとちょこっと思った突っ込みを。
何だか質問者様はid名をわかっていらっしゃらなさそうな印象を受けました。
もしかしてHTML側のブロック要素に指定したid名を変更されていなかった、
間違っていたということはありませんか?
念のため確認でした。
以下は質問に関係ない独り言ですが、
参考サイトのcss12だとかっていうid名ってどうなのだろう。
ありなんですかね?
個人的にこういう紛らわしいような名前ってNGだと思っていたのですが。。。
まあ個人の好き好きですよね。失礼致しました。
ID名はちゃんと変更しました。
間違っていたということもおそらくは無いです(自信ありません)。
ID名はURL先に記述されていたものをそのまま使い、バグ防止の為変更していませんでした。
ややこしくてすみません。
No.3
- 回答日時:
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>
別々に表示は出来たのですが、今度はページのデザインが勢いよく崩れてしまいます。
表示されるメニューを任意の位置に指定ということに関しては、質問で記述したリンク先のソースでも出来ましたが、その下の表示されたページの内容がズレてしまいます。
(記述頂いたソースですとリンクテスト2の文字が下にズレます)
内容が下にズレないでそのまま重ねて表示も可能でしょうか。
No.2
- 回答日時:
試していないのでそれで必ずできる保障はありませんが、
現在
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";
}
とかしたらできそうな気がします。
気がしているだけなので試してみて下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライダーの枠に動画を収める...
-
Ctrl+F(検索)の窓を出したいの...
-
スマートフォンで適切に見られ...
-
YES or NO形式で進んで行く、タ...
-
CSS 2カラムの可変
-
フッターの下に隙間ができてしまう
-
MAX関数を使ってからLEFT JOIN...
-
jquery ドロップダウンメニュー...
-
javascript ループがうごかない
-
チェックボックスに入っている...
-
指定したパスが現URLに含まれて...
-
jqueryのsortableで一部ソート...
-
JavaScriptで変更した属性の元...
-
yahooジオシティーズでのCSS読...
-
Gif画像のアニメーションが再生...
-
読み込んだQRコードをフォーム...
-
透過pngの透明部分以外をクリッ...
-
ツリーメニューについて
-
htmlで、たくさんのgif画像を、...
-
表示・非表示のスクリプトで、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
サイトにコンテンツを並べる際...
-
CSS <div>の入れ子が反映さ...
-
スクロール可能なチェックボックス
-
フッター上部に謎の隙間
-
【CSS】floatで左右に並べた...
-
textareaで入力した文字を改行...
-
文字をクリックしたら別の文字...
-
css固定したフッターが本文と重...
-
文字を固定したいのですが…
-
Flickity で画像にリンクを貼る...
-
Ctrl+F(検索)の窓を出したいの...
-
オンマウス時に別画像を上に重...
-
背景の過
-
離れた場所にマウスオーバーで...
-
チェックボックスの背景色って...
-
フッターの下に隙間ができてしまう
-
ポップアップのソースの書き方...
-
スタイルシートで画面を上下に...
-
floatさせたdivタグを折り返さ...
-
TABLEの高さを固定したいのですが…
おすすめ情報