シリウスでマウスオーバー時に画像を切り変える方法
サイトを見ているときにふと気になった画像やボタンに
マウスを置くと色や画像が変わったりするのを見たことはありませんか？
例えばこういうものです↓
↑緑からオレンジ色に変わるのがわかりましたか？
ボタンだけでなく、画像でもマウスオーバーすると変化をします。↓
画像だと結構面白いですね＾＾
こんなふうにマウスオーバーで画像が切り替わる方法についてお話していきます。
マウスオーバーで画像を切り替える方法
画像を切り替わる仕様をする前にまず、ボタンや画像を2種類用意しましょう。
元の画像・・・マウスオーバーする前に表示されている画像
マウスオーバー時の画像・・・切り替わった時に表示させたい画像
この2枚が必要になります。
ボタン画像で切り替える場合は下記のようにボタン画像を事前に2つ用意します。
このボタン画像はシリウスで簡単に作ることができます。
【ボタン画像】⇒【ボタン画像作成】の画面でボタン画像を2つ作成してください。
 |
 |
その後、記事の作成画面で下記のタグをコピーして入れます。
＜a href="リンク先"＞＜img src="＜% pageDepth %＞img/元のファイル名.jpg" onmouseover="this.src='＜% pageDepth %＞img/マウスオーバーで切り替えるファイル名.jpg'"
onmouseout="this.src='＜% pageDepth %＞img/元のファイル名.jpg'" /＞＜/a＞
少しややこしそうですが、上のタグはコピーをして貼り付けたら大丈夫です。
上記のタグの＜＞は全角表示になっていますので、シリウスで使う場合は半角に直してお使いください。
気をつける点は、
元のファイル名.jpg・・・マウスオーバー前の画像
マウスオーバーで切り替えるファイル名・・・マウスオーバー時の画像
というところですね。
間違わずに入力するには下記のように
画像を２つ入れたあとにファイル名だけをコピー＆ペーストで貼り付けるようにすればいいですよ＾＾
ボタン以外の画像で切り替える場合は、ご自身でお好きな画像を用意しましょう。
|
 |
画像を使う際はできるだけ商用利用OKの無料画像素材がおすすめですよ。
用意した画像をシリウスに登録した後は、ボタン画像のやり方と同じです。
先に示したタグをコピーして、ファイル名を気をつけながら入れましょう。
やってみると結構簡単で面白いですよ＾＾
めいこのおすすめアフィリエイト教材＆ツールのご案内
めいこのブログでは、シリウス以外にも
アフィリエイトで役立つツールや教材をレビューしています。
年間５０以上ものの教材を見ながら
本当によかったものだけを選りすぐりでブログで紹介しています。
いつでもお気軽に覗きに来てください＾＾
