Home > 20080519
20080519
bgcolorchange:背景色をアイコンクリックで変化
- 2008-05-19 (Mon)
- IT Tips
- Tips
- JavaScript
- 背景
- 無料・フリー
Category :
Tags :
今回はサイトやブログの背景色をアイコンやボタンをクリックすることで変化させるJavaScriptと実装方法を紹介したいと思います。
1.以下のJavaScriptをダウンロード(内容をテキストなどで保存)
colorchanger.js
2.保存したjsファイルをサイトへ構築、またはブログへアップロード
3.以下のように <head>〜</head> 間に記述
4.サイト/ブログ内で背景変化アイコン配置場所に以下を記述
ちなみに、この背景画像は以下のような画像です。
/white.png
/white.jpg
まとめると、配置したpngのアイコン画像をクリックすると、jpgの画像が背景に変化するという仕組みです。勿論、画像形式はpngでもjpgでもgifでも何でも構いません。
ただ、背景変化後、画面遷移やリフレッシュすると元のデフォルト背景色に戻ってしまう簡易版のjsですので、最近の Yahoo!JAPAN や MSN のようにうまくはいきませんのであしからず。
1.以下のJavaScriptをダウンロード(内容をテキストなどで保存)
colorchanger.js
2.保存したjsファイルをサイトへ構築、またはブログへアップロード
3.以下のように <head>〜</head> 間に記述
<script type="text/javascript" src="/colorchanger.js"></script>※上記で背景を変化させる仕組みが完成、以下は変化させるアイコン作成手順4.サイト/ブログ内で背景変化アイコン配置場所に以下を記述
<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
- Recent Comments
-
- とりもち:綺麗な風景壁紙 vol2 (06/12)
- TomomiX:綺麗な風景壁紙 vol2 (06/12)
- とりもち:綺麗な風景壁紙 vol2 (06/11)
- TomomiX:Greybox実装手順 (05/28)
- aco_oca:Greybox実装手順 (05/28)
- aco_oca:Greybox実装手順 (05/28)
- TomomiX:Office2003・Office2007の共存方法 (05/27)
- エ:Office2003・Office2007の共存方法 (05/26)
- TomomiX:Shadowbox応用:Webページに実装させる (05/15)
- ハムネコ:Shadowbox応用:Webページに実装させる (05/14)
- Recent Trackback
- Feeds
