infoBox

JavaScript

マウスオーバーでインフォメーションボックスを表示させる「infoBox」

infoBoxはアイコンにマウスオーバーするとインフォメーションボックスを表示させることができるjQueryプラグインです。特定のポイントでその詳細をもっと知りたい人のみ、マウスオーバーで確認できるのが特徴です。

infoBox

デモ

デモでは本文中にインフォメーションアイコンがいくつか設置されていて、このアイコンにマウスオーバーするとインフォメーションボックスが表示される仕組みです。

詳細な情報が必要な人だけマウスオーバーでチェックできるので、本文のボリュームがとてもスッキリまとまりそうですね。デモに設置されているインフォメーションボックスには、背景がオレンジだったりグレーだったり、または表示される位置がアイコンの上だったり下だったりと、いくつか種類があります。

ボックス自体はとてもシンプルなので、いろんなサイトに合わせやすいのではないでしょうか。

また、infoBoxにはオプションも用意されていて、width、position、text_color、bg_colorといった項目のセッティングが可能です。オプションから手軽に幅や表示位置、カラーなどをカスタマイズできるようになっています。使い方も特に難しい設定もなく、簡単に実装できるはず。

マウスオーバーによるインフォメーションボックスを表示させたいという人は、ぜひ「infoBox」を活用されてみてはいかがでしょうか?

infoBox

関連記事

  1. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  2. No Vacancy

    JavaScript

    ネオンサインのようなエフェクトを実装できるjQueryプラグイン「No Vacancy」

    テキストにネオンサインのようなエフェクトを実装することができるjQue…

  3. jquery.peekABar

    JavaScript

    様々なカスタマイズができる便利な通知バー「jquery.peekABar」

    jquery.peekABarは様々なカスタマイズが可能な通知バー(通…

  4. no-image

    JavaScript

    jQueryの代わりに使用できるマイクロJavaScriptライブラリ「Selector」

    Selectorは、jQueryの代わりに使用することができるマイクロ…

  5. JavaScript

    アニメーション付きの水平・垂直プログレスメーターを実装できる「jQMeter」

    jQMeterはアニメーションが付いた水平・垂直のプログレスメーターを…

  6. fullPage.js

    JavaScript

    フルページでコンテンツごとにスクロールする「fullPage.js」

    fullPage.jsはフルページでコンテンツごとにスクロールするレス…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP