ＧＴ－ＯＮＥ　楽天タグ講座　パイプ奮闘記

　　マウスが画像などの上に来ると今まで表示されていた画像が、
　　違う画像になったり、画像の色彩が変化したりするものがあります。
　　このような画像にかけられた効果を 「ロールオーバー」 といいます。

　　私も少し前までは、そう呼ぶとは知りませんでした。
　　楽天でも同じような事は、やっておりますが・・・！
　　本家本元の 「ロールオーバー」 は JAVA SCRIPT で行います。
　　でも、ここでは、 JAVA SCRIPT は使えません。
　　ですから 「もどき」 と付け加えました。(-_-;)

　　↓下に乗せました、２枚の画像は、二枚とも画像の元サイズが違います。
　　「バリケード」の画像は、width="216" height="144"　です。
　　「工事職人」は、width="222" height="301"と「バリケード」より大きな画像です。
　　で！画像の幅、高さを指定しないで、 「ロールオーバー！もどき！」 を使いますと、
　　↓このようになります。




　　このように、最初に表示している画像のＹ軸（縦方向）の一番上と、
　　Ｘ軸（横方向）の左を支点にして、
　　画像が画像の持っているサイズで拡大したり、縮小されます。
　　「工事職人」は「バリケード」と幅はほとんど変わりませんが、
　　高さが２倍近くありますから、下に押しやるような効果になります。

　　では、画像を逆にしてみましょう。




　　効果の違いが分かるでしょうか？
　　では、タグを書いてみましょう。




<IMG src=" ～最初に表示する画像のＵＲＬ～ " onmouseover=this.src=" ～ロールオーバーする画像のＵＲＬ～ " onmouseout=this.src=" ～最初に表示する画像のＵＲＬ～ ">



　　画像は動きのあるアニメＧＩＦを使いますと、効果的ですね。
　　どちらかに幅と高さをそろえますと、おとなしい 「ロールオーバー！もどき！」
　　になります。↓このように！



　　「バリケード」の幅と高さを「工事職人」に合わせました。
　　幅と高さを指定するときは↓こうなります。



<IMG src=" ～最初に表示する画像のＵＲＬ～ " width=" ～幅～ " height=" ～高さ～ " onmouseover=this.src=" ～ロールオーバーする画像のＵＲＬ～ " width=" ～幅～ " height=" ～高さ～ " onmouseout=this.src=" ～最初に表示する画像のＵＲＬ～ " width=" ～幅～ " height=" ～高さ～ ">




　　このようになります。
　　デジカメの画像とか、色々な画像で、試して見て下さい。

　　ではでは・・みなさんがんばって下さい。
　　【プチ講座】は、みなさんの質問で、成り立っております。（*^_^*）

注：画像は直リンクしないでね。お願い！(-_-;)