記事一覧

JavaScript 画像 切り替え

いつも訪問ありがとうございます。

続き

このサイトのデザインはスタイルシートを使用しています。

例えばリンク色についてです。

リンク色は金色(カラーコード : #FFCC00)にしています。

マウスカーソルを合わせる(マウスオーバー)と黒色(カラーコード : #FFCC00)に変わります。

TOPページの各コンテンツのイメージも合わせました。

●マウスカーソルを合わせていないとき(onMouseout)

●マウスカーソルを合わせているとき(onMouseover)

これはJavasciprtを使用して画像を切り替えています。

方法は下記のとおり。
●HTML
<a href="***.htm" onMouseover="ChangeImage('+++', '///.png')" onMouseout="ChangeImage('+++', '---.png')">
    <img src="---.png" name="+++">
</a>

●JavaScript
function ChangeImage(id, name) {
    document.images[id].src = name;
}

当サイトはこの方法で実現しています。

Arrivederci