![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?5a7ff87)
以下のようなことをしたいのですが、方法が分からず困っています。
http://www.astellas.com/jp/
メニューの上にマウスがくると、下の画像が切り替わる。
http://www.mos.co.jp/index.html
メニューの上にマウスがくると、プルダウンのメニューが表示される。
上の2つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。
JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。
上の2つを実現するのは、今は諦めたほうが良いでしょうか?
JavaScript以外でも実現可能だったら教えていただけないでしょうか?
(※FLASHは除く。例えばCSSなど)
よろしくお願いします。
No.2ベストアンサー
- 回答日時:
CSSのみだけの実装は今のところ不可能でしょう。
一番可能なのは、DreamWeaver ビヘイビア を使用することなので、
それでやったほうがいいですが、一応参考までに
1. http://www.astellas.com/jp/?
?2. http://www.mos.co.jp/index.html?
とすると、
2のほうは、参考にしないほうがいいです。javascript をオフにするとメニューが消えてしますようなやり方になっていますので、お勧めできません。(企業サイトとは思えませんね。。。)
ですので、1を説明しますが、細かくするとながくなるので、簡潔に。
ようは マウスオーバーで 画像ソースの入れ替えと、背景画像の入れ替えを行っているだけです。
サイトのジャバスクリプトをものすごく簡単にしたのを書いておきます。
↓javascriptソース
onm1(){
document.getElementById('home').style.background = 'url(HOMEにマウスオーバーバックグラウンド)';
document.mainimg.src = 'HOMEにマウスオーバー時に下に表示する画像パス';
}
onm2(){
document.getElementById('home').style.background = 'url(企業情報にマウスオーバーバックグラウンド)';
document.mainimg.src = '企業情報にマウスオーバー時に下に表示する画像パス';
}
imgbk(){
document.getElementById('home').style.background = 'url(ホームにマウスオーバーしてないときのホームの背景)';
document.getElementById('home').style.background = 'url(企業情報にマウスオーバーしてないときの企業情報の背景)';
document.mainimg.src = '初期メイン画像';
}
↓HTMLソース
<ol>
<li id="home"><a href="" onmouseover="onm1()" onmouseout="imgbk()">HOME</a></li>
<li id="ci"><a href="" onmouseover="onm2()" onmouseout="imgbk()">企業情報</a></li>
</ol>
<img src="初期メイン画像" name="mainimg" />
と言う感じですが、マウスオーバー時にアンダーラインをだすだけなら。
a:hover{
border-bottom: 3px solid 色指定;
}
でCSS指定マウスオーバー時のボーダー指定をしてあげるだけでも十分かもしれません。
お礼が遅くなってしまって申し訳ありません。
やはり、Javascriptなしでは難しいのですね。
私のような初心者に、詳しいご説明をしていただいて、
本当にありがとうございます!!
すごく感激しております!
> 2のほうは、参考にしないほうがいいです
相手の環境まで考えて作るんですね。
私はそこまで考えなかったので、とても勉強になりました。
> マウスオーバーで 画像ソースの入れ替えと、
> 背景画像の入れ替えを行っているだけです。
> サイトのジャバスクリプトをものすごく簡単にしたのを書いておきます。
詳しいご説明ありがとうございます!
概要がわかっただけでも、良かったです。
ただ悲しいことに、自分の理解力が足りず、
実際のソースを見ても分からなかったです…
本当に申し訳ないです…
実際のjsソースでは/*----- トップページ用 -----*/
のところの説明ということですよね?
imgbk()は、ホーム・企業情報など、
各メニュー項目ごとに必要なのは、なぜでしょうか?
> 一番可能なのは、DreamWeaver ビヘイビアを使用する
Dreamweaverでするには、具体的にどのような方法で
実現されているのかお聞きしても宜しいでしょうか?
お礼が遅くなった上に、さらに質問してしまい申し訳ありません。
すみませんが、よろしくお願いいたします。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- AJAX 自作の地図をグーグルマップのようにしたい 3 2022/11/15 11:53
- アプリ Edgeを操作するアプリについて 4 2023/05/11 22:48
- HTML・CSS (Javascript)印刷するファイルに応じて印刷プレビュー画面で用紙を自動的に切り替えたい!! 2 2022/04/11 12:04
- MySQL MySQL,JavaScript,PHPコードの結果を表示する方法を教えてください。 1 2023/02/13 17:49
- JavaScript Q&Aの掲示板を作成していてヤフー知恵袋やgoo質問のように質問ごとにURLを生成したい 5 2023/08/04 01:22
- JavaScript HTML&CSS Javascriptによる動的テーブル 1 2023/03/27 19:51
- Excel(エクセル) EXCELのグラフを画像(JPG形式)で保存、通常実行がうまく行かない。ステップインはうまく行く 3 2022/08/30 12:06
- マウス・キーボード ロジクールマウス m575を2台以上で使用する方法 m575はUSBレシーバとBluetooth接続 2 2023/07/11 15:33
- Instagram HTML5の廃止とJavaScript 2 2022/04/13 21:05
- Ameba(アメーバブログ) アメブロは、HTMLのタグの入力を許さないブログ・サイトですか? 1 2023/06/18 18:48
関連するカテゴリからQ&Aを探す
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
クリックで背景変更するタグ
-
JavaScript で flexslider の画...
-
VB2005 でビットの深さ8の画像...
-
image.onload = .. の後に imag...
-
右クリック禁止スクリプト挿入法
-
JavaScript スライドの画像にリ...
-
スライドショー作成方法。
-
JavaScriptのOff
-
一定日本時間で画像変更 Java S...
-
Photoswipeのアニメーションの変更
-
2種類できますか?
-
時間で画像表示が変化する方法
-
ロールオーバーで切り替えられ...
-
バナー広告のように表示させた...
-
どの<li><a> が押されたか判別...
-
マウスオーバーのメニューについて
-
「jQuery」アコーディオンメニ...
-
jqueryのsortableで一部ソート...
-
画像の表示位置
-
jQueryで画像を重ねる
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
JavaScript スライドの画像にリ...
-
HTMLで条件分岐はできますか?
-
画像ランダム表示、しかしダブ...
-
bxsliderにて読み込み後に内容...
-
画像を切り替えランダム表示
-
1枚の画像をクリックすると複数...
-
Gifアニメ、最後のコマに行った...
-
画像の重なりの順序を代える方...
-
小窓について教えて下さい。
-
スライダーを実装した場合、ペ...
-
スワップイメージが上手く動作...
-
USEMAPでの指定区域にマウスオ...
-
1枚の画像をクリックして複数の...
-
クリッカブルマップの一部分だ...
-
オンマウスで、画像切り替え+...
-
iframe内のリンク文字のマウス...
-
edgeでスクロールバーに色が表...
-
画像の上に画像リンクを貼る方法
-
prettyphotoの画像表示について
おすすめ情報