合体８■M+M■　背景画像変更とマウスで動く背景　　　　　UP日時 : 2014/10/13

■左側のサムネイルクリックで右側に拡大画像。その拡大画像を更にクリックすると、また拡大。その拡大画像の上でマウスを動かすと、画像が動きます。

■１枚の画像で、サムネイル(縮小画像)、１番目の拡大、２番目(最大)の拡大の表示をします。画像の実寸は、１番目の拡大画像です。

一見サムネイルのスライドショーに見えますが、実は「背景画像の変更」です。それと「マウスで動く背景画像」を合体しました。
１番目のクリックでdivで作成したboxの中で背景画像が切り替わります。boxのサイズが背景画像の実寸(横500px 縦375px)と同じなので、スライドショーのように見えます。
しかし背景画像なので、マウスで動かすことが可能です。
もう一度クリックすることで画像がさらに拡大し、拡大した画像の上でマウスを動かすと、画像が動きます。

二度拡大し、さらに動く。
それを説明書きで読むのではなく、すぐにわかるように、マウスカーソルで表示しました。
移動のカーソルは「cursor:move;」で表示できますが、拡大用のプラスマークのカーソル(個人で作るオリジナル・カーソル)は加工作成しました。
このページのプラスマークのカーソルを使用される方は、下記の文字　ct1.cur　の上で右クリック。
　　　ct1.cur
そしてブラウザIEなら「対象をファイルに保存」を選んで左クリック。
ブラウザFFとクロムは「名前を付けてリンク先を保存」、
ブラウザのオペラは「リンク先のコンテンツを保存」を選んで、それぞれ左クリックして下さい。
マウスカーソルで使用する拡張子 cur はimgではないので、画像としては画面で表示できないので、文字にしています。保存したらちゃんと見えます。

実は最新ブラウザなら、ブラウザIE以外なら、拡張子 cur ではなくても、GIFでもPNGでもJPGでも、カーソル設定できます。
カーソルの種類や、オリジナルカーソルの設定方法の説明は、TAG indexから。

カーソルを自作してみたい方へ、今回のプラスのカーソルの作成方法を。
画面上の部分的な範囲のスクリーンショットを切り取るSnipping Tool(スニッピング ツール)等を使って、mBlogのカーソルの原画を適当な大きさで切り取ります(本家のサイトは調子が悪いので紹介サイトです)。
それからフリーソフトの彩々畑でその画像を開きます。
彩々畑は自動的に32px×32pxの大きさに調整します。手順はこちらのページから。
「彩々畑」はカーソル(拡張子cur)やファビコン(拡張子ico)が作成できますが、本来は小さなシームレス(継ぎ目無し)の背景画像を作成するフリーソフトです。

■合体元JavaScriptはこちら→　M=MOVE=動く背景 ＋ M=MOVE=動く背景