オンマウスで画像を変えるには、HTMLで「ここにAの画像を挿入し、マウスをその上に乗せるとBの画像になって、マウスが画像の上から離れるとAの画像になる」というように(←多分)記述する必要があります。
文字だけで書かなくてはいけないので、「この画像です」と特定する何かが必要となってきます。
そこで使用するのが、「画像のURL」です。
<A.Jimdoの場合>
Jimdoの特性上、<B.Jimdo以外の場合>の方法で取得したURLは変わってしまうとの記事を拝見しました。
指摘の通り、表示ができなくなる不具合が生じたため、Jimdoで作成しているサイトの場合はこちらの方法をお試しください。
1.新しく非表示のページを1つ作る。
2.「新項目を追加」から「フォトギャラリー」を選択してURLを取得したい写真をアップロードする。
※「写真」で1つ1つアップしてもよいが、「フォトギャラリー」の方がこの作業の場合は楽です。
3.「フォトギャラリー」の編集画面で右上の「プレビュー」をクリックしてそれぞれの画像に名前をつけておく。
※この作業をしていないと4.のときに大変です!
↓
「サブタイトル」という欄に、その画像だと分かるような名前を入力しておきます。
4.3.までの作業が終わったら一度サイトのページの一番右下にある「プレビュー」をクリックする。(編集画面のままだとURLがおかしくなってしまいます)
プレビュー画面の状態で、ページの何もないところにマウスのカーソルを持っていき「右クリック」→「ソースの表示」を選択
出てきた英語みたいな文字列の中から、3.で付けた画像の名前を探します。その前にある
<img src="http://・・・・>とある" "で挟まれた
http://・・・ の部分がその画像のURLです。
<B.Jimdo以外の場合>
手始めに、上のロボットの画像の上で「右クリック」をして、出てきた選択肢の中の1番下の「プロパティ」をクリックしてみてください。
「プロパティ」(その画像の細かい情報のようなもの)のページが開きます。真ん中あたりに「アドレス(URL)」という項目がありますよね、それがこの画像のURLです。
まずはHTMLを記述する前準備として、画像のURLをメモしておきます。
方法はお好みで構いませんが、私が踏んだ手順は以下のとおりです。
変わる前、変わった後の画像を合計2つ用意して、1度「フォトギャラリー」でサイトに載せる(非表示のページなどで行うと色々お試しもできます♪)
→ページ右下の「プレビュー」をクリックして編集画面から1度出る
→1つ目の画像の上で右クリックをして、先ほどの方法でURLを表示させ「コピー」する
→Windowsのスタートメニューから「メモ帳」(Wordでも何でも構いません)に「貼りつけ」
もう1つも同様に、1つ目のURLの下あたりに貼りつけ
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を貼りつけます。
→→「保存」ボタンで保存をして完成です!
上記の手順で「変わる画像」は出来ましたでしょうか?
ここからはもう少しつっこんだ話です。
「各コンテンツの説明→写真」のところでも書いたことですが、写真や画像を載せただけではコンピュータが「ここには画像がある」とだけしか認識してくれなかったり、画像が表示されないタイプのパソコンで見てる人が何だか分からなかったりします。
そこで、「代替テキスト」という画像の説明を入れておくと見てもらいやすいサイトになります。
通常、「代替テキスト」は「altタグ」で記述しますが、Jimdoでは何とこのaltタグを自動で用意してくれます!
上記の手順で1度「保存」をして完成させた後、再度画像をクリックしてHTMLを記述した枠を表示してみてください。
ずらずら英語(?)が並んでる1番最後に
・・・(画像のURL)・・';" alt="" />
「alt」という文字が書かれていませんか?!(Jimdoが自動で書いてくれるみたいです)
この「alt="" /」の「"」と「"」の間に画像の説明を書き込みます。(その画像に関連したキーワードなどを入れるのも良いようです)
alt="オンマウスでロボットの画像が変わる" /
これでバッチリ?です★
▲あまり使えそうな気はしませんが・・HTMLの記述の2コ目の「画像1のURL」を画像1でも画像2でもない画像のURL(画像3)にしてみました**
このサイトは完全無料で作成されています。
難しい知識も一切不要
あなたのサイトも今すぐ出来ます!
▼▼▼