« 春らしいカレンダー | トップページ | 無料セキュリティーソフト »

2008/02/19

画像が変わるブログ2

マウスを乗せると画像が変わるブログ記事の書き方について2/5の記事で書きました。http://pasocollege.cocolog-nifty.com/blog/2008/02/post.html

次のようなタグ(プログラム)をブログのHTML編集画面に貼り付け アップした画像をしていのところに書き込んでつくれます。

<img src="****01.jpg" onmouseover="this.src='****02.jpg'"onmouseout="this.src='****03.jpg'">

****01.jpg・・・はじめに表示しておく画像を指定します

****02.jpg・・・マウスを乗せた時に表示する画像を指定します

****03.jpg・・・マウスをはずした時に表示する画像を指定します

本日は生徒さんがチャレンジし下のようなブログ記事が完成しました↓
http://mimimamanosannpo.cocolog-nifty.com/blog/2008/02/post_1.html

ココログでつくる細かな手順を書きましたのでUPします。

画像が変わる写真の投稿方法

アップロードする写真を別の場所にコピーする。(元画像を残す為)

コピーした画像を開き イメージでサイズを400ピクセルに縮小し上書き保存する

ココログの記事作成を開き 新規投稿で 写真を記事に画像を挿入する(IMGボタン)
これで写真がマイフォトにアップされました。

Up写真のアドレスをメモ帳にコピーする

マイフォトを開き、ブログにアップロードした画像を開く。

使用する写真のタイトルをクリックする

写真をフルサイズ表示をクリックする

写真が大きく表示された時のアドレスをコピーする

プログラムの貼ってあるメモ帳を開く

プログラムの下に 画像のアドレスを貼り付ける

同様にココログのマイフォトに戻りもう1枚の画像のアドレスもメモ帳に貼り付ける

メモ帳のプログラムの ****01.jpgを消して 1枚目の画像のアドレスと差し替える

同様に ****02.jpg ****03.jpg に差し替える

アドレスを差し替えたプログラムをコピーする

新規投稿の Html編集に貼り付ける

プログラムの前には<P> 後には</P>を入れるのを忘れずに!

これで投稿してください。

変化する写真のUP

手順書はこちらからダウンロードできます↓
「tejun.doc」をダウンロード

« 春らしいカレンダー | トップページ | 無料セキュリティーソフト »

コメント

この記事へのコメントは終了しました。

トラックバック


この記事へのトラックバック一覧です: 画像が変わるブログ2:

« 春らしいカレンダー | トップページ | 無料セキュリティーソフト »