マウスを乗せると画像が変わるブログ記事の書き方について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」をダウンロード