　　　　　　　　　　超簡単ロールオーバー

ロールオーバーとは？

　パソコンで、ホームページやブログの画像の上にマウスなどでポインターを持って来ると（オン・マウス）、画像が別のものに入れ替わって表示され、ポインターを外すと元の画像に戻る機能です。

　ロールオーバーを実現するにはいろいろな方法があるようですが、CSSなどは使わず、簡単なHTML文で実現させる方法を紹介します。

　当ホームページでは、元の画像の一部を拡大した画像を素早く切り替えて表示させたい場合、などの用途で所々で使っています。　ここでは、例として下の2枚の画像をロールオーバーさせることにします。

　上の画像をロールオーバーさせると、下のようになります。　オン・マウスしてみて下さい。

超簡単ロールオーバーの作成方法

1.　概要

　上の例では説明のため同じページに元画像を配置したわけですが、通常は2枚の画像を非表示ページに配置し、表示ページでそれらを切り替えて表示させるようにします。　このページの説明はJimdoのシステムが前提ですが、Jimdo以外でも参考になると思います。

2.　画像の準備

　ロールオーバーさせたい、2枚の画像を準備します。　用途によりどんな画像でもよいのですが、同じ大きさ・縦横比にした方が切り替えが美しく見えます。

3.　ロールオーバーさせる画像の配置

・非表示ページの作成

ナビゲーションで非表示ページを作成します。どこに作成してもよいですが、表示させるページの近く、できれば隣接して設定した方が、後々編集などで楽だと思います。　当ホームページでは、非表示ページの名称は表示ページの後にロールオーバーを意味する"RO"をつけたものにしています。　ご参考まで。

　例）トクワカソウ（表示ページの名称）

　　　トクワカソウRO（非表示ページの名称）

・画像の配置

非表示ページに2枚の画像を配置します。　ここで重要なことは、画像の大きさです。非表示ページでの画像の大きさが、そのまま表示ページで表示されます。　表示ページの編集で画像の大きさを変えることはできないので、事前に適切な大きさで表示されるよう、調整しておく必要があります。　当然、2枚の画像の大きさは揃えておいた方がよいです。

・キャプションをつける

キャプション（画像の下に表示させる文字）はなくてもよいですが、あった方が２つの画像のURLが識別しやすいと思うので、を入力しておきます。　何でもよいのですが、ここでは最初に表示されている画像を「画像１」、オン・マウスで切り替わる画像を「画像２」としました。

4.　画像データのURLの取得

・非表示ページをプレビューモードにし、画像のURLを取得します。URLの取得は、OSやブラウザにより多少異なると思いますが、例えば画像を右クリックして「画像URLをコピー」などでクリップボードにコピーし取得できます。　その後、テキストエディタやメールソフトなどテキストが貼り付けられるソフトの書類にペーストしておきます。　「画像１」と「画像２」両方のURLを取得しておきます。

・ブラウザの「ソースを表示」などの機能を使ってページ全体のソースを表示させ、その中から画像のURLを探して取得する方法もあります。　でも、上の方法が簡単だと思います。

・URLは画像ファイルをアップロードし直すと変わってしまうので、変更した場合はその都度、取得する必要があります。

・URLの例を示します。上の2枚の画像のURLですが、こんな感じです。長ったらしいですね。もちろんこれはホームページにより、画像により、異なります。　単なるイメージとして参考にして下さい。

画像１：https://image.jimcdn.com/app/cms/image/transf/none/path/sf8a8d00d654c7ec1/image/i9c9eeee5095b00eb/version/1419081125/image.jpg

画像２

https://image.jimcdn.com/app/cms/image/transf/none/path/sf8a8d00d654c7ec1/image/i501aebbf3e9ec3e4/version/1419081115/image.jpg

5.　HTMLの入力

・HTMLの入力

表示ページの画像を表示させたい場所に、コンテンツ「ウィジェット/HTML」を追加します。　NewUIのJimdoでは、「・・・その他のコンテンツ」の中にあります。

そして、以下のHTMLをコピペして入力して下さい。　たったこれだけです。

</div>

次に、AとCを「画像１」のURLと入れ替えます。　同様にBを「画像２」のURLと入れ替えます。　Aは両側が " （ダブルクォーテーション）で囲まれ、BとCは左側だけが ' （シングルクォーテーション）となっていますが、これは間違いではないので変えないようにします。　実際に入れ替えると下のようになります。

</div>

このHTMLが、上のロールオーバーの画像のHTMLです。

<div align="center"> 〜 </div> は、左右の中心に画像を配置させるためのものです。必要に応じて変更して下さい。

このページはパソコンの操作やJimdoを使ったホームページの作成にある程度慣れていて、簡単なHTMLの編集ができる方を対象に作成しました。

当サイト内のロールオーバーを使ったページをいくつか下にご紹介します。

トクワカソウ　一番下2枚の葉の写真

ウスギオウレン　下から3枚めの葉の写真

バイカオウレン　上から5枚めの花の写真

オウギカズラ　上から4枚めの写真

ニシキゴロモ　一番下の写真

コモロスミレ　上から7枚めの写真

スマホでの表示について