株式会社マイティーエース- MightyAce Inc.

資料請求

お問い合わせ

運用型広告

Google・Yahoo!のリスティング広告はもちろん、Facebook・Instagram・LINE・XなどのSNS広告も運用が可能です。

マンガ制作

WEBマンガを中心に、LP・バナー・SNSなど、お客様の商品(サービス)の魅力を伝える完全オリジナルのマンガを制作いたします。

Webページ制作

ページに訪れるユーザーの目的と興味を引く、お客様一人一人のニーズに合わせた完全オリジナルのWebコンテンツを制作いたします。

アクセス解析

精度を高めつつ分析⇒改善のサイクルを回し続け、意思決定に繋がるレポーティングで売上最大化のお手伝いをいたします。

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 src="images/sample.jpg" class="rollover" >

さらにimgタグの中にclass=”rollover”を追加します。

これだけでhoverした時の画像の切り替え設定完了です!

 

 

画像の命名規則を守る&imgタグへクラスを追加するだけでOKなので

cssもスッキリさせることが出来て良いですね!

ぜひ、お試しあれ!

Request Materials資料請求

資料請求

Webマーケティングにおけるパフォーマンス改善のための資料がダウンロードできます。

  • web広告の改善事例が知りたい方
  • 現在お願いしている代理店との比較をしたい方
  • サービスの全体像・料金を知りたい方