ウェブサイトに置く画像上にマウスオーバーすると瞬間で別な画像へ
切り替わる変化の仕組みをシリウスで表現するカスタマイズ組み込み方法

 

画像をマウスオーバーすると別な画像に切り替わるという仕組みを取り入れた
サイトはまれにお見掛けしますが、その表現方法に意味があるもの

 

単に切り替わるだけで何ら興味すらわかない...意味のないもの

 

意味がある、そうなんだと読者にメッセージを伝えられるなら
それはそれで素晴らしいコンテンツとご理解しますが、

 

ただ切り替わるだけではメッセージが伝わらない、単なる自己満足でおしまい

 

そのようにならないよう画像の選択はコンテンツも含めて大事ですよ...
との前置きです

 

では、進みます

 

---

 

事前説明

 

今回の説明で仕組みを取り入れたとしても、シリウスのプレビュー画面では、
画像も現れなければ、作動もしません　

 

アップロード以降の反映となります

 

 

プレビューでも反映が確認したい
また、当解説での導入が難易と感じられる際は、容易な手法もございます

 

こちらでご確認下さい　もう一つのかんたん取り付け方法
マウスオーバーで画像チェンジ　もう一つの方法

 

---

 

切り替わり画像を上手に使うとサイト内でのアクセントとしても

 

または、読者を驚かせることも.......

 

 

以下画像をマウスオーバーして変化をご確認ください

 

 

 

 

 

上記の画像は　二つに画像を用意して編集

 

 

 

下の画像例は　以下画像を編集

 

 

最初に　ご注意ごとを示します

 

画像は同サイズが望ましいです

 

マウスオーバーで大きな画像が表示されるようしている方もおりますけど！

 

設定方法

 

スタイルシートやJAVAスプリクトは使用しません

 

以下コードをコピーして　シリウス操作画面で取り付けたい記事画面上に張り付けます

 

以下コードは折り返されていますから横長に配列してください

 

 

 

編集方法

 

<a href="../category41"><img src="../img/inh.jpg" onMouseOver="this.src='../img/ppppo.jpg'" onMouseOut="this.src='../img/inh.jpg'"></a>

 

変更は4か所

 

category41を　取り付けるページ名
もしくは　画像クリックで移動するページ名

 

あとの書き換えは画像ファイルコード3か所です

 

---

 

 

画像とは　シリウスの画像管理画面やボタン管理の画像を呼び出し
表示します

 

<img src="../img/inh.jpg" onMouseOver="this.src='../img/ppppo.jpg'" onMouseOut="this.src='../img/inh.jpg'">

 

 

category41を　取り付けるページ名
もしくは　画像クリックで移動するページ名に書き換えます

 

 

<img src="../img/inh.jpg" onMouseOver="this.src='../img/ppppo.jpg'" onMouseOut="this.src='../img/inh.jpg'">
上記コードから
　　初期表示画像inh.jpg　
　　変化後の画像　ppppo.jpg
　　初期表示画像　inh.jpg　

 

3か所の画像コードをあなたの指定したい画像コードに入れ替えてください

 

 

終了致しましたら　
プレビューでは変化が確認できませんのでアップロードしましょう

 

アッツプロード後の画面でなければ反映が確認出来ないのです

 

スポンサーリンク

 

 

 

 

マウスオーバー画像切り替わり方法
シリウスカスタマイズ