徒然 - 続き

こんにちは（・ω・）ノ

わざわざこちらまで飛んでくださり、有難うございます（＾o＾）

ここに来る前は、JavaScript を使わずに

クリックしたら、文字を置換するというやり方を書いていました。

では次に、

クリックではなく、マウスを持ってくるだけで変化をつけるにはどうしたら良いか、

調べてみました。

HTMLとCSSの小細工マウスイベント

を参考にしてやってみると、

ここにマウスを持ってきてください。

ソースは

<div onmouseover="this.innerHTML='マウスをはずしてみてください'" onmouseout="this.innerHTML='もう一度マウスを持ってくるのと、<br>「Ｆ５」を押すのと比較してみてください'" style="font-size:large;font-weight:bold;color:#006600;cursor:pointer;"><span style="font-size:large;font-weight:bold;color:#FF0000;cursor:pointer;">ここにマウスを持ってきてください。</span></div>

です。

ちなみに、Wordpress では「Ｆ５」の前の改行を、

「<br>」と書くとうまく行かず、

「<br>」と書かねばなりませんでした。

やっかいです（ーー；

文字の装飾部分を省くと、
<div onmouseover="this.innerHTML='【２】'" onmouseout="this.innerHTML='【３】'">【１】</div>
となります。

【１】が最初の表示、

【２】がマウスを持ってきたときの表示、

【３】がマウスをはずしたときの表示で、

【１】と【３】を同じにするのが自然ですね。

では、次に、文字列の代わりに画像で試してみます。

文字部分を「<img src="URL">」と書き替えたいところですが、

「<>」とは違って「""」は始まりと終わりの区別がつかない為か、

二重にすることができないようで、

「""」を除いた、「<img src=URL>」いう書き方でうまく行きました。

それがこれ↓です。

画像をクリックしてみてください。

上のコードは

<div onclick="this.innerHTML='<img src=http://static.zooomr.com/images/8697581_9d8cf655eb_m.jpg>'"><img src="http://static.zooomr.com/images/8702529_704f250fb3_o.jpg" width="188" height="240"></div>

一般化すると

<div onclick="this.innerHTML='<img src=【クリック後のＵＲＬ】>'"><img src="【最初に表示するＵＲＬ】"></div>

です。

クリックではなく、マウスオーバー・アウトにするには、

上のコードは

<div onmouseover="this.innerHTML='<img src=http://static.zooomr.com/images/8697581_9d8cf655eb_m.jpg>'" onmouseout="this.innerHTML='<img src=http://static.zooomr.com/images/8702529_704f250fb3_o.jpg>'"><img src="http://static.zooomr.com/images/8702529_704f250fb3_o.jpg"></div>

一般には

<div onmouseover="this.innerHTML='<img src=【マウスを持ってきたときに表示する画像のＵＲＬ】>'" onmouseout="this.innerHTML='<img src=【マウスを外したとに表示する画像のＵＲＬ】>'"><img src="【最初に表示する画像のＵＲＬ】"></div>

マウスを写真の横の余白に持ってきても画像が変化するので、

width:188px;
height:240px;

と付け加えたのですが、うまく行きませんでした。

display:block;

が必要とは思えないのですが、未解決です。

this.src を使えば、

<img> そのものの中に「onmouseover」「onmouseout」を記述することが出来ますね。

<img onmouseover="this.src='【マウスを持ってきたときに表示する画像のＵＲＬ】'" onmouseout="this.src='【マウスを外したとに表示する画像のＵＲＬ】'" src="【最初に表示する画像のＵＲＬ】">

ということで、

とやってみました。

この方法だと、

写真の横にマウスを持ってきても「マウスアウト」にならない

という問題点は解消できますね。

上のコードは

<img onmouseover="this.src='http://static.zooomr.com/images/8697581_9d8cf655eb_m.jpg'" onmouseout="this.src='http://static.zooomr.com/images/8702529_704f250fb3_o.jpg'" src="http://static.zooomr.com/images/8702529_704f250fb3_o.jpg">

です。

また、「●●●.innerHTML」を使えば、こんなことも出来ます。

ペト１　ペト２　ペト３

「ペト１」「ペト２」「ペト３」という文字に
カーソルを持ってくると、
ここが John Petrucci の画像に
置き換わります

↑
マウスを外したときの文字の装飾のやり方が今ひとつ分かりませんでしたが、

上のコードはこれです。
↓

<span onmouseover="petrucci.innerHTML='<img border=0 src=http://static.zooomr.com/images/8702600_63d7820963_o.jpg width=303 height=263>'" onmouseout="petrucci.innerHTML='「ペト１」「ペト２」「ペト３」という文字に<br>カーソルを持ってくると、<br>ここが John Petrucci の画像に<br>置き換わります'" style="color:#660000;cursor:pointer;">ペト１</span>　<span onmouseover="petrucci.innerHTML='<img border=0 src=http://static.zooomr.com/images/8702601_452cd136a4_o.jpg width=303 height=263>'" onmouseout="petrucci.innerHTML='「ペト１」「ペト２」「ペト３」という文字に<
br>カーソルを持ってくると、<br>ここが John Petrucci の画像に<br>置き換わります'" style="color:#006600;cursor:pointer;">ペト２</span>　<span onmouseover="petrucci.innerHTML='<img border=0 src=http://static.zooomr.com/images/8702603_348d9efdbb_o.jpg width=303 height=263>'" onmouseout="petrucci.innerHTML='「ペト１」「ペト２」「ペト３」という文字に<br>カーソルを持ってくると、<br>ここが John Petrucci の画像に<br>置き換わります'" style="color:#000066;cursor:pointer;">ペト３</span>

<div style="width:303px;height:263px;border:1px solid #666666;" id="petrucci"><div style="text-align:center;padding:1em;">「ペト１」「ペト２」「ペト３」という文字に<br>カーソルを持ってくると、<br>ここが <span style="color:#FF0000;">John Petrucci</span> の画像に<br>置き換わります</div></div>

色々試してみると、面白い事が出来そうです（・∀・）

なお、この記事を書く際に、

「<」を「<」に変換するなど、面倒な手順がありますが、

HTMLエンコードフォーム

を利用すると便利でした。

ということで、ここをクリックして、「元にもどる」です。

現在の閲覧者数