オンラインストアの開設は、お試し無料の カラーミーショップ で!

オンマウスで画像を替える方法

画像の上のマウスを持っていくと・・あれ?画像が変わった!!

ロボットくんも・・
飛行機も・・
猫も・・オンマウスで画像が変わる!

こんなのもあります♪

 

例えば上の画像のような感じです。

まだ動く画像を作る技術はないですが、これだけでちょっと楽しい気分になれますよね♪

 

▼HTMLだけ知りたい方はこちら

 

『ウィジェット/HTML』を使って画像を挿入!

1.画像のURLを調べる方法

オンマウスで画像を変えるには、HTMLで「ここにAの画像を挿入し、マウスをその上に乗せるとBの画像になって、マウスが画像の上から離れるとAの画像になる」というように(←多分)記述する必要があります。

 

文字だけで書かなくてはいけないので、「この画像です」と特定する何かが必要となってきます。

そこで使用するのが、「画像のURL」です。

 

自分で撮った写真でも、どこかからダウンロードして編集した画像でも、自分のサイトに載せた時点ですでにその画像のURLが作られています!!

 

Jimdo以外の方法でサイトを作成している方はこちら方法

 

<A.Jimdoの場合>

Jimdoの特性上、<B.Jimdo以外の場合>の方法で取得したURLは変わってしまうとの記事を拝見しました。

指摘の通り、表示ができなくなる不具合が生じたため、Jimdoで作成しているサイトの場合はこちらの方法をお試しください。

 

1.新しく非表示のページを1つ作る。

(★新しいページの作り方が分からない方はこちら

 

2.「新項目を追加」から「フォトギャラリー」を選択してURLを取得したい写真をアップロードする。

(★「フォトギャラリー」が分からない方はこちら

 ※「写真」で1つ1つアップしてもよいが、「フォトギャラリー」の方がこの作業の場合は楽です。

 

フォトギャラリー 画像に名前をつける

3.「フォトギャラリー」の編集画面で右上の「プレビュー」をクリックしてそれぞれの画像に名前をつけておく。

※この作業をしていないと4.のときに大変です!

フォトギャラリー 画像に名前をつける

「サブタイトル」という欄に、その画像だと分かるような名前を入力しておきます。

4.3.までの作業が終わったら一度サイトのページの一番右下にある「プレビュー」をクリックする。(編集画面のままだとURLがおかしくなってしまいます)

 

プレビュー画面の状態で、ページの何もないところにマウスのカーソルを持っていき「右クリック」→「ソースの表示」を選択

 

出てきた英語みたいな文字列の中から、3.で付けた画像の名前を探します。その前にある

 

<img src="http://・・・・>とある" "で挟まれた

http://・・・ の部分がその画像のURLです。

 

画像のURLを調べる

 

今回の作業ではこのURLを使います。

画像のURL 調べ方

<B.Jimdo以外の場合>

 

手始めに、上のロボットの画像の上で「右クリック」をして、出てきた選択肢の中の1番下の「プロパティ」をクリックしてみてください。

「プロパティ」(その画像の細かい情報のようなもの)のページが開きます。真ん中あたりに「アドレス(URL)」という項目がありますよね、それがこの画像のURLです。

 

 

2.画像を2つ用意して、それぞれのURLをメモする

画像のURL オンマウスで画像を変える方法 Jimdo

まずはHTMLを記述する前準備として、画像のURLをメモしておきます。

 

方法はお好みで構いませんが、私が踏んだ手順は以下のとおりです。

 

変わる前、変わった後の画像を合計2つ用意して、1度「フォトギャラリー」でサイトに載せる(非表示のページなどで行うと色々お試しもできます♪)

 

→ページ右下の「プレビュー」をクリックして編集画面から1度出る

 

→1つ目の画像の上で右クリックをして、先ほどの方法でURLを表示させ「コピー」する

 

→Windowsのスタートメニューから「メモ帳」(Wordでも何でも構いません)に「貼りつけ」

もう1つも同様に、1つ目のURLの下あたりに貼りつけ

 

3.画像を載せたい位置にHTMLを記述する

ウィジェット HTML Jimdo

Jimdo(ジンドゥー)サイトの、「+」ボタン「新項目を追加」をクリックして「ウィジェット/HTML」を選択します。

 

出てきた枠の中に、下記の記述をコピー&貼りつけします。

 

<img src="画像1のURL" onmouseover="this.src='画像2のURL';" onmouseout="this.src='画像1のURL';">

 

オンマウスで画像を変える方法 ジンドゥー

貼りつけたHTML(=上記)の赤字「画像1のURL」という部分に、2.で控えておいた画像のURLを書きます(コピペします)。

この場合、画像1はマウスを乗せない状態のときの画像です。

 

※赤字は2カ所あるので、2つとも一気に貼りつけると楽です♪

 

同様に、青字の「画像2のURL」という部分に、マウスを乗せた時の画像をURLを貼りつけます。

 

→→「保存」ボタンで保存をして完成です!

 

ページのTOPへ

Jimdoはとても親切!

画像の説明を入れる(altタグの記述)

 

上記の手順で「変わる画像」は出来ましたでしょうか?

 

ここからはもう少しつっこんだ話です。

 

「各コンテンツの説明→写真」のところでも書いたことですが、写真や画像を載せただけではコンピュータが「ここには画像がある」とだけしか認識してくれなかったり、画像が表示されないタイプのパソコンで見てる人が何だか分からなかったりします。

そこで、「代替テキスト」という画像の説明を入れておくと見てもらいやすいサイトになります。

 

通常、「代替テキスト」「altタグ」で記述しますが、Jimdoでは何とこのaltタグを自動で用意してくれます!

 

上記の手順で1度「保存」をして完成させた後、再度画像をクリックしてHTMLを記述した枠を表示してみてください。

 

ずらずら英語(?)が並んでる1番最後に

・・・(画像のURL)・・';" alt="" />

「alt」という文字が書かれていませんか?!(Jimdoが自動で書いてくれるみたいです)

 

この「alt="" /」の「"」と「"」の間に画像の説明を書き込みます。(その画像に関連したキーワードなどを入れるのも良いようです)

 

alt="オンマウスでロボットの画像が変わる" / 

 これでバッチリ?です★

 

▲あまり使えそうな気はしませんが・・HTMLの記述の2コ目の「画像1のURL」を画像1でも画像2でもない画像のURL(画像3)にしてみました**

 

HTMLをいじると出来る小技

 

このサイトは完全無料で作成されています。

難しい知識も一切不要

 

あなたのサイトも今すぐ出来ます!

ホームページ作成

Jimdoの登録

このサイトは完全無料

で作成されています。

難しい知識も一切不要

 

あなたのサイトも

今すぐ出来ます!

ジンドゥー

ジンドゥーに登録しよう!

書籍紹介

Jimdo 本 無料で作るホームページ

見た目にこだわる Jimdo入門

中古価格
¥4,200から
(2019/3/25 22:40時点)

jimdo スタイル