LIVES!Linksごあいさつ更新記録Others超簡単ロールオーバーロールオーバーとは?パソコンで、ホームページやブログの画像の上にマウスなどでポインターを持って来ると(オン・マウス)、画像が別のものに入れ替わって表示され、ポインターを外すと元の画像に戻る機能です。ロールオーバーを実現するにはいろいろな方法があるようですが、CSSなどは使わず、簡単なHTML文で実現させる方法を紹介します。当ホームページでは、元の画像の一部を拡大した画像を素早く切り替えて表示させたい場合、などの用途で所々で使っています。ここでは、例として下の2枚の画像をロールオーバーさせることにします。画像1画像2上の画像をロールオーバーさせると、下のようになります。オン・マウスしてみて下さい。上の例では説明のため同じページに元画像を配置したわけですが、通常は2枚の画像を非表示ページに配置し、表示ページでそれらを切り替えて表示させるようにします。このページの説明はJimdoのシステムが前提ですが、Jimdo以外でも参考になると思います。画像の準備ロールオーバーさせたい、2枚の画像を準備します。用途によりどんな画像でもよいのですが、同じ大きさ・縦横比にした方が切り替えが美しく見えます。・非表示ページの作成ナビゲーションで非表示ページを作成します。どこに作成してもよいですが、表示させるページの近く、できれば隣接して設定した方が、後々編集などで楽だと思います。当ホームページでは、非表示ページの名称は表示ページの後にロールオーバーを意味する"RO"をつけたものにしています。非表示ページに2枚の画像を配置します。ここで重要なことは、画像の大きさです。非表示ページでの画像の大きさが、そのまま表示ページで表示されます。表示ページの編集で画像の大きさを変えることはできないので、事前に適切な大きさで表示されるよう、調整しておく必要があります。2枚の画像の大きさは揃えておいた方がよいです。・キャプションをつけるキャプション(画像の下に表示させる文字)はなくてもよいですが、あった方が2つの画像のURLが識別しやすいと思うので、を入力しておきます。何でもよいのですが、ここでは最初に表示されている画像を「画像1」、オン・マウスで切り替わる画像を「画像2」としました。・非表示ページをプレビューモードにし、画像のURLを取得します。URLの取得は、OSやブラウザにより多少異なると思いますが、例えば画像を右クリックして「画像URLをコピー」などでクリップボードにコピーし取得できます。その後、テキストエディタやメールソフトなどテキストが貼り付けられるソフトの書類にペーストしておきます。「画像1」と「画像2」両方のURLを取得しておきます。・ブラウザの「ソースを表示」などの機能を使ってページ全体のソースを表示させ、その中から画像のURLを探して取得する方法もあります。上の方法が簡単だと思います。・URLは画像ファイルをアップロードし直すと変わってしまうので、変更した場合はその都度、取得する必要があります。・URLの例を示します。上の2枚の画像のURLですが、こんな感じです。これはホームページにより、画像により、異なります。単なるイメージとして参考にして下さい。表示ページの画像を表示させたい場所に、コンテンツ「ウィジェット/HTML」を追加します。NewUIのJimdoでは、「・・・その他のコンテンツ」の中にあります。以下のHTMLをコピペして入力して下さい。onmouseover="this.src='B'"onmouseout="this.src='C'"></div>次に、AとCを「画像1」のURLと入れ替えます。同様にBを「画像2」のURLと入れ替えます。(シングルクォーテーション)となっていますが、これは間違いではないので変えないようにします。実際に入れ替えると下のようになります。onmouseover="this.src='http://u.jimdo.com/www56/o/sf8a8d00d654c7ec1/img/i9c9eeee5095b00eb/1419081125/std/%E7%94%BB%E5%83%8F%EF%BC%91.jpg'"onmouseout="this.src='https://image.jimcdn.com/app/cms/image/transf/none/path/sf8a8d00d654c7ec1/image/i501aebbf3e9ec3e4/version/1419081115/image.jpg'"></div>このHTMLが、上のロールオーバーの画像のHTMLです。左右の中心に画像を配置させるためのものです。必要に応じて変更して下さい。このページはパソコンの操作やJimdoを使ったホームページの作成にある程度慣れていて、簡単なHTMLの編集ができる方を対象に作成しました。当サイト内のロールオーバーを使ったページをいくつか下にご紹介します。上から7枚めの写真スマホでの表示についてスマホでは、うまく動作しません。画像をタップすれば切り替え画像を見ることができます。一度タップしても始めの画像に戻りません。リドロー(再読込)すれば最初の画像に戻ります。これについては、Jimdoのスマホ用表示機能の改善を待つしかありません。サイトマップこのホームページは、HiroKenが制作しています。文章の著作権は、HiroKenにあります。無断転載は固くお断りします。花の自生地に関するお問い合わせは、ご遠慮ください。