jquery.maphilight.jsを使用したインタラクティブマップの強調表示

画像 htmlでの作業では、インタラクティブマップを作成する必要はほとんどありませんでした。そのようなニーズが生じた場合は、これにフラッシュを使用しました。 同時に、htmlはタグのみを提供でき、その結果、画像のアクティブな領域が既に決定されています。 ただし、頂点の座標を決定してこれらの領域をマークすることは、効果を作成するのにさらに多くの労力が必要なことを考えると、最も楽しい瞬間ではありません。



一般的に言えば、フラッシュ上で希少なインタラクティブマップを作成し続けましたが、その後、興味深いことが起こりました。



ある日、ソーシャルネットワークのページにいる私の友人が、スポーツエクササイズに関するサイトこのサイト )につながるリンクに出会わなかったら、すべては以前と同じだったでしょう。 サイト構築の観点からもスポーツからも特別なことは何もありませんでしたが、ナビゲーションが実行されたインタラクティブマップに非常に面白かったです。 アスリートの体の部分をポイントしてクリックすると、関連するエクササイズのページに移動できます。 そして、それだけではありません! ナビゲーション要素に関するガイダンスは、特定の筋肉グループの割り当てにもつながりました。



私はすぐにコードに取り組み、これがどのように実装されているかを調べ始めました。 すべての中心にjquery.maphilightライブラリがありました。 このライブラリのサイトには、かなり単純な例だけでなく、このソリューションのシンプルさと機能を明らかにする大きな地図( 米国のインタラクティブな地図)さえあります。



このライブラリは、インタラクティブな領域の頂点の座標を取得するプロセスに影響を与えません-それはまだ死として退屈ですが、フラグメントの選択、選択の色、境界の太さ、この場合に発生する効果に関しては、このライブラリは単に置き換えられません。 私はすぐに予約します、他の類似物があるかもしれませんが、私はそれらに会っていません。 私は意図的にサンプルのコードを提供しません-それは図書館のウェブサイトにあり、コメントを必要としません。



PS

この短い記事が誰にとっても興味深いと思われる場合は、ハブに関する2回目の記事で、このようなインタラクティブマップのレイアウトの頂点の座標をすばやく取得するプロセスを詳しく説明する予定です。



ご清聴ありがとうございました。



All Articles