掲示板/JavaScript質問板/過去ログ/一覧/ ボタンにマウスをのせると別の画像が変わる方法を教えて下さい。

0 名前： スペシャルウィーク ： 2007/01/21（日） 18:22 ID:TyIptavA sub-gm: 下記URLは、「第一製薬」さんのホームページなんですが、この画面のようにメニューにマウスをのせると、下の画像が変わる・・このような方法で自作の趣味ホームページを作ろうと思っています。しかし作り方がわかりません。
参考になる情報があれば教えて下さい。
宜しくお願い致します。

http://www.daiichipharm.co.jp/

1 名前： Z ◆XTzyosZXcL ： 2007/01/21（日） 18:22 ID:CSqyQR5N sub-Cl: 　>>0のソース内に

<script language="JavaScript" type="text/javascript" src="common/hf/js/header.js"></script>

として外部スクリプトファイルを読み込ませている箇所がありましたので、中身を確認してみたところ、document.writeで組み込みイベントつきのTD要素を書き出させているようですね。私の環境では無視されて何もおきていませんが。

　また、「画像切り替え」でここ（TAGINDEX）の「サイト内検索」をされれば関連する発言記録が沢山でてくると思います。

　ただ、>>0のソースをそのまま利用して作ることはお勧めできません。まずはHTML(XHTML)の基礎を正しく理解してください。

HTMLの基本：
http://web.xii.jp/iec/html/

XHTMLの基本：
http://web.xii.jp/iec/xhtml/

CSSの基本：
http://web.xii.jp/iec/css/

2 名前：匿名： 2007/01/21（日） 18:22 ID:Rt.j/.AI sub-kJ: ■ご利用の前に
・条件外のマルチポスト（同じ質問を複数の掲示板に投稿する行為）は禁止です。

http://otd8.jbbs.livedoor.jp/javascript/bbs_plain?base=16982&range=1

3 名前： JAB ： 2007/01/21（日） 18:22 ID:OA4zTPPB sub-gm: JavaScriptの知識が無いようなのでいちお教えておきます。

一番簡単な方法はこんな感じですので参考にしてください。

<a href="#" onclick="document.defoimg.src='変更後のアドレス';">変更</a>　...変更項目を増やす場合はこの部分をコピー。
<img src="元の画像のURL" name="defoimg">

4 名前：匿名： 2007/01/21（日） 18:22 ID:Rt.j/.AI sub-kJ

>>3

<p>
<a onclick="document.images['defoimg'].src = '変更後のアドレス'; ">変更</a>

<img src="元の画像のURL" alt="代替テキスト【必須】" name="defoimg" id="defimg">
</p>

5 名前： JAB ： 2007/01/21（日） 18:22 ID:MqlHe6Xi sub-gm

良く見ると、オンマウスイベントで実行したいようですね。
>>4のスクリプトに対して修正を加えると

<p>
<a onmouseover="document.images['defoimg'].src = '変更後のアドレス'; " 
onmouseout="document.images['defoimg'].src = '元の画像のURL'; ">変更</a>

<img src="元の画像のURL" alt="代替テキスト【必須】" name="defoimg" id="defimg">
</p>