JavaScriptでの画像切替について。

質問

以下のようなことをしたいのですが、方法が分からず困っています。

http://www.astellas.com/jp/
メニューの上にマウスがくると、下の画像が切り替わる。
http://www.mos.co.jp/index.html
メニューの上にマウスがくると、プルダウンのメニューが表示される。

上の２つを「名前をつけてページを保存」で保存して、ソースとファイルを見てみたところ、JavaScriptで実現しているみたいなのですが、jsファイルのソースを見てもさっぱり分かりませんでした。

JavaScriptはDreamweaverの[挿入]-[イメージオブジェクト]で使える程度です。
上の２つを実現するのは、今は諦めたほうが良いでしょうか？

JavaScript以外でも実現可能だったら教えていただけないでしょうか？
(※FLASHは除く。例えばCSSなど)

よろしくお願いします。

回答No.2

MrYoYoYo · ベストアンサー

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でするには、具体的にどのような方法で
実現されているのかお聞きしても宜しいでしょうか？

お礼が遅くなった上に、さらに質問してしまい申し訳ありません。
すみませんが、よろしくお願いいたします。

回答No.1

yambejp

「ドリームウェーバー ロールオーバー」でサーチして
みるとイロイロヒットしますよ