07月≪ 2017年08月 ≫09月

12345678910111213141516171819202122232425262728293031

2011.02.09 (Wed) 00:06

マウスを重ねると画像が変わる

こんばんは~~~♪

以前にチャヌパパさんに質問されていた画像表示のテクニックがあるのですが
それは、次回にということで(いつまで待たせるねん!)
こっちの方が、使い道があるかな??

と思ったので、今日は

マウスを重ねると表示画像が変わるテクニックのご紹介です。

下の写真は以前の使いまわしですが
マウスポインタを画像に重ねる→画像から外すを繰り返してみてください。

マウスポインタが乗っている時の画像と、離れた時の画像が違うのが確認していただけたでしょうか??


パールの写真


これは下のようにコードが記入されています。

<img src="画像パス1" alt="画像の名前" onMouseOver="this.src='画像パス1'" onMouseOut="this.src='画像パス2'">

 ↑コードをコピーしてメモ帳などに保存しておくと便利です


これを実際のコードで見るとこんな風になります。

1つ目の下線が「画像パス1」
2つ目の下線が「画像の名前」
3つ目の下線が「画像パス1」
4つ目の下線が「画像パス2」


<img src="http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0226-1.jpg" alt="パールの写真" onMouseOver="this.src='http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0226-1.jpg'" onMouseOut="this.src='http://blog-imgs-44.fc2.com/c/o/g/cogipearl/IMG_0227-1.jpg'">


画像のパスというのは、FC2ブログであれば、画像のアップロードをした直後に表示される赤文字の部分です。
これをコピーして使用するといいですね♪
キャプチャ


みなさんのブログの画像に楽しみが増えれば幸いです。

書かなければならないPC講座がたまってきております。

まだまだ先延ばしになりそうです。(笑)

今日はパールのシャンプーをして、片づけにクタクタです。。。
関連記事
2011-02-09 (水) 00:06  |  PC講座  |  TB(0)  |  コメントはこちらへ(4)  |  EDIT  |  Top↑

Comment

無事にパソコンが治ってよかったですね(^_^)/
うちのは相変わらずですが・・・

今回のテクニック勉強になりましたよ~!
また頑張って講座を開いてくださいね(^u^)
アカリ兄 #OVtA6OIQ |  2011/02/09/(水) 21:45 |   |  【コメント編集】

>Re.アカリ兄さん

7がこんなに快適なパソコンだったなんて(笑)
しばらく忘れていましたv-221v-411

PC講座の記事を一人でも参考にしてくれる人がいてよかったぁぁぁ!!v-218
>Re.アカリ兄さん #ZDTV/mj2 |  2011/02/10/(木) 16:31 |   |  【コメント編集】

はじめまして

2月になってfc2に引っ越してきたシーズーモコのママです
チャヌパパさんに弟子入りして やっとなんとか引越しできましたv-356

どらみさんの【ブログテンプレート講座】で勉強するようにと教えていただき
参考にさせていただいています

今回のテクニック おもしろいのでさっそく試してみました
(中身はたいしたことないですが・・・v-388

パソコンにはめっぽう弱い私ですが
これからも楽しみにしていますのでよろしくお願いしますe-466

モコママ #M3o3L/jM |  2011/02/10/(木) 18:06 |   |  【コメント編集】

>Re.モコママさん

モコママさん、こんにちわ~~e-343
チャヌパパさんからお噂はお聞きしていましたよ~e-267

そして、今回の画像表示をさっそく試していただけて、ホントに光栄です♪
やる気が湧いてきました~~v-411

FC2ブログは自由度が高いですので、いろいろ楽しんでくださいね~v-221
また、おじゃまいたしま~す!
>Re.モコママさん #ZDTV/mj2 |  2011/02/10/(木) 18:32 |   |  【コメント編集】

コメントを投稿する

URL
コメント
ぱすわーど  自分のコメントを編集・削除するのに必要です
SECRET  管理者だけにコメントを表示  (現在非公開コメント投稿不可)
 

▲PageTop

Trackback

この記事のトラックバックURL

→http://cogipearl.blog87.fc2.com/tb.php/1292-41343ab9
この記事にトラックバックする(FC2ブログユーザー)

この記事へのトラックバック

▲PageTop

 | HOME |