<
<
2枚の画像の切り替え (SS-01)
gooブログでは使えなくなりました。FC2では使えます。
| ① マウスオンで2枚目の画像、マウスアウトで元の画像 | ② クリックで2枚目の画像、ダブルクリックで元の画像 |
<
|
<
|
| 下の釦をクリックすると、それぞれのソースが選択・コピーできます。メモ帳などに貼り付けて保存してください。 | |
| 説明用ソース | 説 明 |
| <div style="font-size:1px;"><<img galleryimg="false"style="FILTER:revealTrans(duration=1);border-width:15px;border-style:outset;border-color:limegreen;"src="画像1URL"width="520" height="355"onmouseover="filters[0].apply();src='画像2URL'; filters.revealTrans.Transition=13;filters.revealTrans.play();" onmouseout="filters.revealTrans.apply();src='画像1URL'; filters.revealTrans.Transition=14;filters.revealTrans.play();"></div> 注意：説明用ソースは整形していますので、動作しません。 必ず上の「タグ選択/コピー」したものを使ってください。」 トランジション不要のときは下のソースです。簡単になります。 <div style="font-size:1px;"><<img galleryimg="false"style="border-width:15px;border-style:outset;border-color:limegreen;"src="画像1URL"width="520" height="355"onmouseover="src='画像2URL';" onmouseout="src='画像1URL';"></div> さらに枠線も不要なときは緑の部分は要りません。 |
枠線の太さを変えるには… ;border-width:15px; の部分です。太さをピクセル値で指定します。 枠線の色を変えるには… border-color:limegreen; の赤字の部分に好みのカラーコードを書いてください。 画像のサイズをを変えるには… 画像URLのあとの width="520" height="355" です。画像の幅と高さをピクセルで指定します。 オンマウスとクリックの違い… ここではオンマウスで説明していますが、 クリックの場合は onmouseover を onClick に、onmouseout を ondblclick に変えるだけです。 画像切り替え時のトランジション… 画像が変わるときにトランジションを設定していますが、トランジションの種類は Transition=13の数値を変えるだけです。1～22の数値が使えます。ここでは13と14を使っています。 |