運用型広告
Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。
Web制作
hover時の画像切替を簡単実装するJQuery
hover時の画像切り替えをdisplay:block; display:none;の切り替えで対応していませんか？
easyrollover.jsを使用するとcssへの記述要らずで画像切り替えが実装出来ちゃうんです！
jquery.easyrollover.jsのダウンロードはこちら
まずはファイルの読み込み
easyrolloverに必要なのはJQueryと「jquery.easyrollover.js」というファイルになります。
<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.easyrollover.js"></script>
↑こちらをhead内または</body>直前に記述しましょう。
hoverした時に切り替える画像を用意する
ここが大事なポイント！
用意した2枚の画像の名前は
hover前の画像名【sample.jpg】
hover後の画像名【sample_on.jpg】
というように
切り替え後として使用する画像の拡張子直前に「_on」を追加します。
画像を読み込ませる
HTMLには「切り替え前の画像のみ」を記述します。
さらにimgタグの中にclass=”rollover”を追加します。
これだけでhoverした時の画像の切り替え設定完了です！
画像の命名規則を守る＆imgタグへクラスを追加するだけでOKなので
cssもスッキリさせることが出来て良いですね！
ぜひ、お試しあれ！
Request Materials資料請求
Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。
- ● web広告の改善事例が知りたい方
- ● 現在お願いしている代理店との比較をしたい方
- ● サービスの全体像・料金を知りたい方