Home > 20080519


20080519

bgcolorchange：背景色をアイコンクリックで変化
今回はサイトやブログの背景色をアイコンやボタンをクリックすることで変化させるJavaScriptと実装方法を紹介したいと思います。

１．以下のJavaScriptをダウンロード（内容をテキストなどで保存）
colorchanger.js
２．保存したjsファイルをサイトへ構築、またはブログへアップロード
３．以下のように <head>〜</head> 間に記述
<script type="text/javascript" src="/colorchanger.js"></script>
※上記で背景を変化させる仕組みが完成、以下は変化させるアイコン作成手順
４．サイト/ブログ内で背景変化アイコン配置場所に以下を記述
<img src="/white.png" onclick="bgImgChange('/white.jpg')">
※勿論、jsや画像ファイルすべてアップロードした際のURLを指定ください

ちなみに、この背景画像は以下のような画像です。
/white.png

/white.jpg
まとめると、配置したpngのアイコン画像をクリックすると、jpgの画像が背景に変化するという仕組みです。勿論、画像形式はpngでもjpgでもgifでも何でも構いません。

ただ、背景変化後、画面遷移やリフレッシュすると元のデフォルト背景色に戻ってしまう簡易版のjsですので、最近の Yahoo!JAPAN や MSN のようにうまくはいきませんのであしからず。

Home > 20080519

Search
Adsense

Calendar
« 2008/05 »
S M T W T F S
- - - - 1 2 3
4 5 6 7 8 9 10
11 12 13 14 15 16 17
18 19 20 21 22 23 24
25 26 27 28 29 30 31
Categories
Tagcloud
Archives
Recent Comments
Recent Trackback
Feeds

↑Page Top