- 2008-05-19 (Mon)
- IT Tips
- Tips
- JavaScript
- 背景
- 無料･フリー
Category :
Tags :
今回はサイトやブログの背景色をアイコンやボタンをクリックすることで変化させるJavaScriptと実装方法を紹介したいと思います。
１．以下のJavaScriptをダウンロード（内容をテキストなどで保存）
colorchanger.js
２．保存したjsファイルをサイトへ構築、またはブログへアップロード
３．以下のように <head>〜</head> 間に記述
４．サイト/ブログ内で背景変化アイコン配置場所に以下を記述
ちなみに、この背景画像は以下のような画像です。
/white.png
/white.jpg
まとめると、配置したpngのアイコン画像をクリックすると、jpgの画像が背景に変化するという仕組みです。勿論、画像形式はpngでもjpgでもgifでも何でも構いません。
ただ、背景変化後、画面遷移やリフレッシュすると元のデフォルト背景色に戻ってしまう簡易版のjsですので、最近の Yahoo!JAPAN や MSN のようにうまくはいきませんのであしからず。
１．以下の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 のようにうまくはいきませんのであしからず。
- Next Entries : DExposE2：Macのようなタスクスイッチソフト
- Prev Entries : Shadowbox応用：複数のWebページをグループ化してまとめる
Comments:0
Trackback+Pingback:0
- TrackBack URL for this entry
- http://blackcat13numbers.blog31.fc2.com/tb.php/200-7702f572
- Listed below are links to weblogs that reference
- bgcolorchange：背景色をアイコンクリックで変化 from TRASH