以下のようなことをしたいのですが、方法が分からず困っています。
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で質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
透過pngの透明部分以外をクリッ...
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
Javascriptで指定した日付と時...
-
Twitterの埋め込みしたWebペー...
-
クリッカブルマップの一部分だ...
-
画面の表示位置を指定させて表...
-
jQuery FlexSliderのカルーセ...
-
JQueryを使用して画像をゆっく...
-
リロードさせるには?
-
MAX関数を使ってからLEFT JOIN...
-
チェックボックスに入っている...
-
jquery ドロップダウンメニュー...
-
読み込んだQRコードをフォーム...
-
C言語のポインタ表現
-
javascript ループがうごかない
-
Colorboxがうまく設置できません
-
JQueryタブのアクティブ アン...
-
Ctrl+F(検索)の窓を出したいの...
-
CSS のみのタブ切り替えについて
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Gifアニメ、最後のコマに行った...
-
透過pngの透明部分以外をクリッ...
-
JavaScript スライドの画像にリ...
-
1枚の画像をクリックすると複数...
-
Javascriptで指定した日付と時...
-
1枚の画像をクリックして複数の...
-
ボタンをクリックした時に、キ...
-
画像の重なりの順序を代える方...
-
【java】背景画像を一定時間で...
-
オンマウスで、画像切り替え+...
-
javascriptで毎月替わる画像
-
画像がプルプルふるえるんです。
-
jQueryスライドショー画像への...
-
HTMLで条件分岐はできますか?
-
JavaScriptとチェックボックス...
-
WEBページ立ち上げ時に1回のみ...
-
中心を軸にくるくる回るjQuery ...
-
プルダウンの位置がwin/macでず...
-
bxsliderにて読み込み後に内容...
おすすめ情報