画像は縮小表示です。縮小画像をクリックすると背景画像になります。敷詰、１列、固定の３パターンあります。
縮小画像の右クリックで保存できますが、このページの素材は素材サイト様の素材なので、ここから保存はしないで下さい。
背景画像の各番号の一番最初の画像だけ、クリックで表示された背景画像が、マウスアウトで消えます。
とてもシンプルな、背景色変更と背景画像変更のJavaScriptです。
縮小画像を別に用意せず、原寸を縮小表示しているので、縮小画像の右クリックで保存可能です。
素材サイトでよく使用されますが、HTML5では廃止要素であるbgcolor等は使用せず作成しました。
HTML5で廃止された要素一覧と属性一覧はTAG indexから。今はブラウザがサポートしているので、廃止要素でも使用は可。
変更は画像のマウスクリックで動作しますが、onClick(マウスクリック用)をonMouseOver(マウスオーバー用)に書き替えると、マウスオーバーでの動作に変更できます。
敷詰、１列、固定の３パターンは、画像に書き込むonclick="●●"の●●で変更します。
マウスアウトで消す場合は、onMouseOut="■■"の記述を追加します。ただ■■の内容はパターンによって少し変わるので、見本を見て記述して下さい。
それから、body(全体)の背景色や背景画像ではなく、table(テーブル)やdivで作成した部分の背景色や背景画像を変更したい時。
document.body.style.〜〜の部分を、それぞれ
document.getElementById("aka").style.〜〜に変更して
変更させたいタグに、<table id="aka">とか<div id="aka">というように、 id="aka"を記述して下さい。
JavaScriptのソースは、パターンごとに分けて記述しているので、必要な部分だけを抜き出して記述しても大丈夫です。
ただ背景画像については、どのパターンを利用するする時も、◆背景画像共通指定の部分は必ず記述して下さい。
ただし敷詰だけを利用する場合は、もっと簡単に記述できるので、その見本のソースも用意しました。こちらのソースは、他の背景画像パターンと併用するとおかしくなるので、単独使用して下さい。ただし背景色変更となら併用可能です。
前回掲載分は、敷詰パターンのみだったので削除しました。