イメージの特定の部分にホバーの影響を追加する

Question

投稿するボードが間違っている場合は、事前にお詫びしてください。誰かが私を適切なウェブサイトに親切にリダイレクトすることができますか？

こんにちはすべて、私はホバーを追加しようとしているがそれはTHIS 画像を使用して各建物をハイライト表示します影響を及ぼす。複数の建物があるので、それらを分割する必要があります。各建物の境界線を設定する方法はありますか、どの建物に私が乗っているか知っていますか？例えば、私が建物の底にぶら下がった場合、その建物に関連する情報が表示されます。

これをもっと簡単にするツールはありますか？

Answer 1

これを行うための複数の方法があります。

古き良き<map>は、コメントで言ったように、1になります。お互いの上に複数の画像を配置することは、別のものになります。

画像を見る私がをお勧めする方法は、create an SVGです。画像は3Dツールから来ているようです。ほとんどの場合、イメージをSVGとしてエクスポートして、そのSVGをWebページに表示することができます。このようにする利点は次のとおりです。

• 画像サイズが小さくなります。ほとんどの場合、対応するピクチャはピクセルベース（jpeg/png/etc）より小さくなります。
• 画像は品質の低下なしに拡大縮小されます。この場合、最も重要なの
• ：あなたは簡単にそれぞれのような、私はSVGの概要を読むことをお勧めします

など、クリック、それ自身の要素を構築し、あなたがホバーに反応し、それを持つことができることを意味することができます：

• http://tonyfreed.com/blog/introduction-to-svg
• https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction

あなたが行くあなたのJPEG画像を使用（していないしたい場合SVGルートの場合）でも、SVGを使用して "ホバーゾーン"を作成することができます。

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 500" preserveAspectRatio="xMinYMin meet" > 
    <image width="800" height="500" xlink:href="yourImage.jpg" /> 
    <polygon id="building1" points="200,10 250,190 160,210" width="800" height="500" /> 
</svg> 

をそして、あなたはあなたのJSコードを#building1にホバーに反応することができます：それはこのようになります。このテクニックのチュートリアルは次のとおりです。http://thenewcode.com/760/Create-A-Responsive-Imagemap-With-SVG