• MENU ●●●●
  • マウスオーバーで画像を切り替えるカスタマイズ導入


    シリウスカスタマイズ 記事一覧を記事中段へ移動して情報を解り易く明示しましょう グーグル検索で好評かを得られるかも?

    当該サイトコンテンツ関連記事

     スポンサーリンク

    マウスオーバーすると 異なる画像に切り替わるカスタマイズ方法

     

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

     

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

     

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

     

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

     

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

     

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

     

    では、進みます

     


     

    事前説明

     

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

     

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

     

     

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

     

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

     


     

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

     

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

     

     

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

     

     

     

     

     

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

     

     

     

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

     

     

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

     

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

     

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

     

    設定方法

     

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

     

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

     

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

     

     

     

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

     

    以下のように横に並べてください

     

    編集方法

     

    <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か所の画像コードをあなたの指定したい画像コードに入れ替えてください

     

     

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

     

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

     

    スポンサーリンク

     

     

    マウスオーバーで画像を切り替えるカスタマイズ導入記事一覧

    マウスオーバーで画像チェンジもう一つの方法|シリウスカスタマイズ

    HTMLコードのみでマウスオーバーすると画像が切り替わる手法の追加です親ページの解説手順が面倒と感じられる方はこちらをご採用くださいこちらの記述は、シリウスのプレビュー画面でも作動を確認することができますここで、お詫びですいつからか確認できておりませんが、ページを公開した際は正常作動を確認できており...

    ≫続きを読む

     

     

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

       広告

    .













    お勧め目 抜粋






















































    shop

    特典付き広告..ポチする
    【上位版】次世代型サイト作成システム「SIRIUS」


    シリウスカスタマイズで気を付けること


    サイトにnorton|ノートンの安全評価を付ける


    カスタムに使える情報

    Webデザインで使えるWeb配色ツールまとめサイト