CoffeeCup Image Mapper

説明

CoffeeCup Image Mapper を使用すると、画像の特定の場所への複数のリンク (またはホットスポット) を指定して、ドキュメントまたは Web サイトを指すことができます。マウスオーバー テキスト、ALT テキスト、リンクなどを作成します。 JPG、PNG、GIF 画像フォーマットをサポート！

それで、それはどのように機能しますか？たとえば、いくつかの家具を販売しているとします。商品を写真で紹介。次に、デザイン ツールを使用して、特定のアイテムにアウトラインを描画し、それに Web サイトのアドレスを割り当てます。誰かが家具をクリックすると、その家具に関連付けられた Web ページにリダイレクトされ、詳細情報が表示されるようになりました。

同じテクニックを、マップ、企業チームの写真、フローチャート、アート ギャラリーなどの他の種類の画像に適用します。かなりすごいですよね？ :)

レスポンシブ イメージ マップはモバイル ユーザーにとって使いやすい

トラフィックの 51% 以上がモバイル デバイスから来ているため、イメージ マップを更新してレスポンシブにすることが重要です。これにより、小さな画面の視聴者がより簡単に、より速く、より機能的にナビゲートできるようになります。

レスポンシブなイメージ マップは、表示幅に基づいてリンク座標を適切に調整します。ただし、モバイル デバイスではホバー/マウスオーバーでのマウスオーバーまたはツールチップが許可されていないことに注意してください。このため、ユーザーが本能的にイメージ マップの使い方を理解できるように、イメージ マップのしくみを創造的に再考する必要があります。

どうやってそれができる？簡単。マップの近くに「キー」または「凡例」を表示する (またはイメージ自体に追加する) ことで、イメージ マップをモバイル デバイスでより機能的にすることができます。たとえば、カタログで販売されているいくつかの家具を紹介する家具カタログがあります。画像の下に 8 つの項目を説明するテキストを配置しました。追加のインジケーターもソース画像に適用されました。これらのエイドは、モバイル視聴者がタッチ可能なものを知るのに役立ちます。これらのアイテムのいずれかをタッチすると、類似アイテムのカタログを閲覧できるページにリダイレクトされます。