スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
web拍手 by FC2

【HTML】マウスを重ねると画像が変化する

師匠が「マウスオンで画像を変化させる」方法について悩まれていたので、記事にしてみます。
今回はFC2ブログ向けの方法です。

例として、先日マウスオンで画像を変化させた画像ファイルを使います。
画像はクリックで大きくなります。

●まずは、変化前の画像と、変化後の画像の2枚を用意しておき、
ファイルをFC2サーバーへアップロードしておきます。

●画像のURLを調べる
アップロードされたファイルの一覧表を見てください。

ファイルリスト画面スクリーンショット

ここのサムネイル画像をクリックしてください。
新しいウィンドウが開いて、画像が表示されます。

ブラウザスクリーンショット

アドレス表示欄にURLが書かれています。
例題の場合だと「http://blog-imgs-47.fc2.com/m/i/s/FC2のID/2013505b.jpg」です。
これを「画像1URL」と呼びます。

同様に、もう一枚の画像のURLも調べてください。

●テンプレートにあてはめる
オンマウスで画像を変化させる文法は

<img src="画像1URL" onmouseover="this.src='画像2URL';" onmouseout="this.src='画像1URL';">
(注意)ここに記載してある文法の「<」「>」が全角文字になっています。実際に使う場合は半角文字に直してください

ここに、先ほど調べた「画像1URL」「画像2URL」をあてはめます。
あてはめるときには、挿入する位置に気をつけてください。
「”」と「”」の間(「’」と「’」の間)に記入します。


例題の場合だと
<img src="http://blog-imgs-47.fc2.com/m/i/s/FC2のID/2013505b.jpg" onmouseover="this.src='http://blog-imgs-47.fc2.com/m/i/s/FC2のID/321.jpg';" onmouseout="this.src='http://blog-imgs-47.fc2.com/m/i/s/FC2のID/2013505b.jpg';"> といった按配になります。


しむのぼり~がぱわ~あっぷしますよ。

web拍手 by FC2

コメントの投稿

非公開コメント

Re: bioさん:夜のしんぱっつぁん

> 「夜の永倉はちょっとちがうze☆」
「実はオレ、布団の中だと、話が上手になるんだぜ。」
とか囁いてくれると、また彼を見る目が違ってくるのですが。

> オンマウス画像はPCでしか見られない
そうなんですよ。せめて1枚目だけでも見られるとかだといいのですが。

> ドラクエ
じゃあ、記事のアレは意味がわからないですね。
文脈で、モンスターがペットになっていた、というのはオボロゲにおわかりいただけると思いますが。

Re: みたらし太郎さん:もるぼる

> みさキング牧師
また新たな称号が・・・(苦笑)

> サムネクリック
私も、これを調べるのに、少し手間取りました。
検索であっさり見つかるあたり、みんな困るところは同じなのですね。

> しかしなにゆえこのチョイス
いや・・・ついうっかり。たまたま手元にあったのがこの画像でして。

No title

それはおそらく

「夜の永倉はちょっとちがうze☆」という大人のお誘いですねわかります。
むしろどんと来いと思ってしまう私が確かにここにいますおはようございますゴルゴみさきーん様。

オンマウス、調子にのってやってましたがあれよく考えてみると
PCでしか画像見られなくなっちゃいますね。
ほどほどにしとこうと思いましたw

ドラクエは実はやってないのですよわたくし。
鳥山氏の作るキャラがちょい苦手なんです。
でもドラゴンボールではべジータ様の信者です。セカンドはピッコロです。

No title

みさキング牧師様


これはぜひマネせねば!

bioさんの言ってますが、私もサムネクリックとは知りませんでした。

うん、モルボルですねわかります。
しかしなにゆえこのチョイスw

Re: bioさん:かわいいゲレゲレ

72時間ぶりに3+3時間の睡眠をとってまいりました管理人ですこんにちは。
わざわざ3+3時間と分けているのは、途中で起こされたからですorz

> やっとできましたよオンマウス!
うちの近所のオバサマ方に比べて格段に理解が早くて助かります。
たまにパソコン講座なんてものをやってますが、おそろしいレベルの方々なので、
どう説明したらいいのか、毎回心を砕いています。
「マウスを使って、カーソルを動かす」って作業で、マウスを垂直に持ち上げるのはやめてください。

> サムネをクリックして出てきたアドレスがURL
これ、意外に盲点ですよね。私も当初そこがわからなかったです。

> シムノボリーは成長してもかわいいまま
「かわいい・・・だと? あんたは、アレをかわいいというのか・・・。随分と独創的な感覚を持つのだな。」
「そうだねぇ。そんなキミなら、首から下は格好いい新八さんのことも好きになれるんじゃないかな? ちょっと考えてあげてくれないかな。」

しむのぼりーは、ずっとあのまんまなんですねぇ。
少し色が赤くなるとか変化があっても面白いと思うのですが。
ああ、警戒色にしちゃああかんのですね。エサがこなくなっちゃいます。

> 13ではキャロットちゃんとか言われて間違ってペットにされてたモルボル
さんざん「くさいいき」で苦労させられるモルボルですね。
アレも人食植物というカテゴリーでよかったですよね。

FFは7で見捨てたので、13は遊んでいないのですが、そんなことがあったのですか(苦笑)
まるで、ドラクエのゲレゲレみたいですね。私はプックルでしたが。
・・・って、これだけの表記でわかりますかね?w

No title

いやっほぉぉぉ~い!
やっとできましたよオンマウス!すっごい嬉しいです!!!
修正ついでに1階の画像も見れるようになってると思います。
うっかり画像削除しちゃってました。

サムネをクリックして出てきたアドレスがURLってのがわかってなかったんです。
普通に記事に画像を出してそのアドレスのっけてたという…
インターネッツの基礎がいまだにできてないのが露見しました。脳が昭和。

シムノボリー、ちがう。どんだけ成長してもかわいいまんまですよ。
それはあれでしょFFの定番モンスターでしょ。
13ではキャロットちゃんとか言われて間違ってペットにされてたけどモルボルでしょ。
Twitter

→ @gigo_misaki0218"
tumblr
< My Tumble Home >
    PIYO
    薄桜鬼
    最新記事
    最新コメント
    カテゴリ
    月別アーカイブ
  • Archives »
  • リンク
    当ブログはリンクフリーです。
    サイト名:GIGO(がべーじいん・がべーじあうと)
    URL:http://misaki0218.blog98.fc2.com/

    バナー画像は直リンク可能です。
    バナー画像URL:https://blog-imgs-47.fc2.com/m/i/s/misaki0218/banner.jpg

    カウンター
    上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。