Home > スポンサー広告 > bgcolorchange:背景色をアイコンクリックで変化


スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

 Comments:-

Comment Form

 Trackback+Pingback:-

TrackBack URL for this entry
http://blackcat13numbers.blog31.fc2.com/tb.php/200-7702f572
Listed below are links to weblogs that reference
スポンサーサイト from TRASH

Home > スポンサー広告 > bgcolorchange:背景色をアイコンクリックで変化

Home > IT Tips > bgcolorchange:背景色をアイコンクリックで変化


bgcolorchange:背景色をアイコンクリックで変化

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

1.以下のJavaScriptをダウンロード(内容をテキストなどで保存)
colorchanger.js2.保存した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のようにうまくはいきませんのであしからず。キャッシュ保存するための仕組みが別途必要かと思います。
スポンサーサイト

 Comments:0

Comment Form

 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

Home > IT Tips > bgcolorchange:背景色をアイコンクリックで変化

Recent Comments
Recent Trackback
Feeds

↑Page Top

上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。