マウスで画像切替え [blog向上委員会]
今日は2本立てです。前回に引き続き、今回もblog向上委員会ネタになります。
ほんとは、ちょいとポエムなんぞやってみよかなと思っててんけど、久々のblog向上委員会ネタをやり始めると、どうも止まらなくなってしもてね(笑)。
■マウスで画像を切り替えましょう
あちこちのWebページで、画像にマウスカーソルをポイントすると「絵が変わったっ！」っての、見たことありますよね。ってか、先日うちのblogでもやりましたが(笑)。
これ、意外と簡単なんですよ。
まずは、画像を用意します。
<img src="/blog/_images/blog/_af2/nyx/9944210.png" />
<img src="/blog/_images/blog/_af2/nyx/9944220.png" />
マウスのポイントで画像を切り替えるためのタグは、こう指定します。
<img onmouseover="this.src='/blog/_images/blog/_af2/nyx/9944220.png'"
onmouseout="this.src='/blog/_images/blog/_af2/nyx/9944210.png'"
src="/blog/_images/blog/_af2/nyx/9944210.png" />
■構文の説明
◇onmouseover
マウスでポイントした際に見える画像の指定
◇onmouseover
マウスのポイントをはずした際（ポイントアウト）に見える画像の指定
◇src
初期画像
■注意点
◇URLの指定
ポンント画像、ポイントアウト画像の指定の『this.src=』に続くURLは、必ず ' で囲みます。
特に、後ろの部分は、" と並んで見づらいので、ご注意を。
初期画像の指定の『src=』に続くURLは、' が不要なので、これも注意してください。
◇画像の指定の順番
So-net blogにおいては、何故かsrcで指定する初期画像を最初にもってくると、全く
画像が見えません。『優しくない方が気にかかる』を書いてた時は、これでハマリました。
2～3時間はロスしてもたかなー。
onmouseoverとonmouseoutの順番は、もう面倒なので調べていません(笑)。
とまぁ、こんな感じです。指定した画像は、この様に流れることになります。
初期画像→マウスポイント画像→ポイントアウト画像
ということは、初期画像とポイントアウト画像が違ったら・・・と思いませんか？
そうなんです。さっきの例は、マウスのポイントをはずした際に初期画像に戻すものです。つまり、初期画像とポイントアウト画像のURLが同じになっています。
では、画像をもう一枚用意して、それをポイントアウトのonmouseoutで指定したらどうなるか。初期画像に戻すことは出来ないけれど、3つの画像が流れるようになります。
※お詫び
記事中の画像に不愉快を覚えたかたがいらっしゃいましたら、謹んでお詫び申し上げます。
特に、男性の方々に。。。あ、女性の方々にも、セクハラやと言われかねないか(冷や汗)。
ちょい軽おやじ 氷の翡翠より
訪問先で見た事ありますね。
でも記事を読みたいほうなのであまりいろいろ細工をしてあるより
見やすいほうが好みです。
一度訪問先ブログで次第に画面が暗くなり真っ黒になってしまいました。
その後で何か展開があるかもしれませんが恐くてすぐに閉じてしまいました。古いパソコンを使っているので画面表示に時間がかかって重いです。
それにページを見るたびに「ダウンロードしますか？」という表示が出ることに悩まされています。高性能パソコンしか快適に見れないところには遠慮がちになってしまいます。
by いっぷく (2007-10-27 18:28)
いらっしゃいませ、いっぷくさん!!!
えぇぇぇ？重かったですか？重かったですか？重かったですか？(冷や汗)
できるだけ軽い画像にしたつもりだったんですが。。。
・・・と思って、画像のサイズを確認してみたら、ひとつあたり2～3KBだったので、ほっとしました。かと言って、小さいサイズでも沢山あると重くなりますもんね。
なるほど、そうですね、いっぷくさんの言わんとするところがわかりました。私もいっぷくさんと同じ主義で、あんまり重いとうんざりしてしまう方なんですが、でも、今の時代に麻痺してしまってるのかなー。。。
せっかくblog向上委員会ってのをやってるんですから、ほんと、そういう話も盛り込むべきですよね。受け手がどう感じるかってことを。
今から10年弱ぐらい前、そういう観点の話をWebページでやってたのですが、忘れていた様です。そういう話も、今度やってみたいと思います。
忘れてたことを思い出させてくれたツッコミで、めちゃんこありがたいです♪
by 氷の翡翠 (2007-10-28 01:22)
わぁ～！ すごいぃ～！ こんなの初めてぇ～！
って思ったの 見抜かれたｶﾅ(^^ゞ
うれしい❤近いうち…必ずこの技 パクらせていただきマッスル(#^.^#)
このコメントの冒頭で不愉快な思い もしくは イケナイ想像を
企ててしまったら ｺﾞﾒﾝﾅｻｲm(__)m
by mi-mi (2007-10-28 02:36)
mi-miさん、いらっしゃいませ♪ 気に入ってもらえたようで、何よりです♪
ごく単純なものでしょ、これって。
ただ、使用する画像は、あまり大きくないのをおすすめします。大きいサイズの画像を使うと、初期画像は見えてるのに切り替える画像がまだダウンされてなくて、せっかくの切り替わりが見えないってことになるかも。
じっくり待ってくれたら問題ないのですが、そうでなければ残念ってことになるのでね。
ちなみに、私は想像力が豊かな方なので、コメントの冒頭部分は、とっても有効に使わせてもらいました。ごちそうさま♪（何が？(笑)）
by 氷の翡翠 (2007-10-28 02:51)
む・・・難しい・・・・・。
頭の中がパニックです！！
それにしても、『大好き、ちゅっ♪』なんて・・・私に対するメッセージありがとうございますぅ～━━━━ヽ(〃▽〃 )ﾉ━━━━!!
えっ！？違う？？？
ちがうのぉ～～～～～？？？？？？？
by ゆうこ (2007-10-28 07:38)
例その2が・・・・・照れちゃいました（なぜ？！＾＾；）
実は、なっちんのはお友達にやってもらったんですよ（＾＾；）
教えてもらったんですが、どうしても変わらなくて（泣）
翡翠さまの記事を読んで、頑張って勉強しようと思います♪
by なっちん (2007-10-28 08:54)
ゆうこちゃん、いらっしゃいませ♪
その反応を見ると、セーフでしたか。いやぁ、こちらに来てくれてる女性は寛大な方々が多くて、ほっとします♪
そうそう、ゆうこちゃんに送った教科書画像です(笑)。なので、これを元に、彼に同じことしてみましょう!!! 結果報告は、詳細にね♪
最後の「きゅっ!!!」が、重要です。抱きついてしまいましょう♪
それはそうと、難しいって(苦笑)。せっかく色分けまでしてるのに～(笑)。
変えるところは、色分けしてる部分だけだよ♪ あとは、コピペ。
<img onmouseover="this.src='ポイント画像'"
onmouseout="this.src='ポイントアウト画像'"
src="初期画像" />
こう書くと、もっとわかりやすいかな？
by 氷の翡翠 (2007-10-28 10:15)
いらっしゃいませ、なっちん♪ 照れちゃいましたか。
私も成長したってことかな。・・・って、なんでやねん！（自己ツッコミ）
本来、サーバはHTMLを送信するだけで、どう処理するかはブラウザ側の仕様のはずなんですけどね。何故か、So-net blogだと指定する順番があるようで。そういうところ、やはり慣れてないと追いかけるのは大変ですからね。
出来る限り簡単に、って内容を心がけてますが、もしわかんないとこがあれば、遠慮なく聞いてくださいね！
by 氷の翡翠 (2007-10-28 10:29)
パタパタだ。
これはいいですねぇ。
転載画像でも出来るのかな？
これは「加工」の範疇に入るのかなぁ。
転載専門のワタシは著作権の壁に悩むこと多し。
by nico (2007-10-28 14:52)
nicoちゃん、いらっしゃいませ♪
これは、画像ならなんでもOKですよ♪ 画像を見えるようにするか見せないようにするかだけで、画像自体を加工する訳ではありません。なので、加工はNGのフリー素材であっても使えます。
Webページでは、トップページのENTERのリンクボタンの代わりに、閉じたドアと開いたドアの画像を使って、マウスでポイントすると閉じたドアが開くってのをよく見かけますね。
by 氷の翡翠 (2007-10-28 14:58)
ぅは(o´艸｀)♪
遊び心が売りの（ぇ 氷の翡翠さんらしい～！
なんでも簡単にこなしているように見えて
pokkotunは思わず『ぉおおお！』と
感激してしまいました！
まだここまでは手をつけられそうもないな～（涙
by pokkotun (2007-11-04 20:49)
pokkotun、いらっしゃいませ♪ 連続コメント、おおきに!!!
いぇいぇ、実はこういうの、めっちゃ簡単なんですよ。前回の背景を付けるのとおんなじぐらい、めっちゃ簡単。
ここに来てくれてるmi-miさんも、さっそく使ってくださって♪ しかも、私に伝授してもらったなどと、大々的に宣伝までしてくれて(汗)。
私があみだした技でもなんでもないから、めっちゃ恐縮してしまうよ(汗)。
でも、そうやって「面白い」って思って使ってくれる人が居ると思うと、これからもこんな記事を続けていきたいなって思います。
背景と違って「難しそうやな」と思われがちなものなんですが、ほんま簡単なんですよ。
こないだ私の写真をこんな技で隠してアップしてたら、やたらみなさんが喰いついてくれたので、「こうやってやるんやで」という説明の記事をアップしたんです。簡単に出来なければ、アップしたところで、読むのもツライと思うからね。
でもなー、私の写真やなくて、そうやって隠す方にみなさん喰いついたんやろなー(涙目)。
・・・ってな訳で、なぐさめてください(笑)。
by 氷の翡翠 (2007-11-05 00:51)
サイドバーでの占いくらいでしかこういうの出来ませんね～(^_^;)パタパタじゃない記号で占いを貼りつける方法ですけそ。
友達ではこういうのやってた人いましたけど、すげ・・・天才だと思った！
あ、ちなみにセクハラとは思いませんが翡翠さん、どうしたんだろー？とか思います(^_^;)
ところで、食らいつきのネタなんですけど（笑）古いなー（ｗ
ガクトってそんなにカッコいい、いい男ですかねぇ？今から思うと・・（おおー強気ー？）
ボソボソと小さい声で何話してるかも分からないので「ロック界のつぶやきシロー」と呼ばれてました（笑
by (2007-12-01 10:25)
svさん、こんばんは♪
「どーしたんだろー？」って、いや、その(苦笑)。
ま、好きな女の子とちゅうしたい気分と言いますか、ぶっちゃけ彼女が欲しいって感じでしょうか(笑)。
Gackt・・・に関しては、要は、もてたいなーって、ささやかな願望を書いただけです(赤面)。svさん、激しいツッコミする人やね(笑)。Gacktって、誰かと雰囲気が似てるように思ってたけど、ロック界のつぶやきしろーだったんやね。思わず納得です(笑)。
by 氷の翡翠 (2007-12-02 21:36)