2009-12-13 26 views
9

私は、ユーザーがイメージマップを使用してさまざまなリンクをクリックできる小さなウェブページを実行します。私はユーザーがいくつかのフィードバックを与えるためにユーザーがクリックするセクションを強調したいと思います(ユーザーがいくつかの異なるパートをすばやくクリックしている可能性があります)。JavaScriptの画像の一部をハイライト表示

イメージのJavaScriptの小さな部分を反転(または強調表示)する方法はありますか?

おかげで、代わりにイメージマップを使用しての

+0

地域のサイズとその地域を特定する方法について詳しくは、こちらをご覧ください。彼らがクリックした場所や特定のエリアだけがあるまわりの正方形です。彼らはイメージマップがあったボックスを描きたいのですか? –

答えて

13

、あなたはこのCSS方法を試みることができる:

がそれぞれ「イメージマップ」の部分(リンク)の上に透明<div>を使用して、CSSを使用し:hoverハイライトを処理する疑似クラス。

CSS:

#image { 
    position: relative; 
    width: 400px; 
    height: 100px; 
    background-image: url(image_map.png); 
} 

#map-part { 
    position: absolute; 
    top: 10px; 
    left: 10px; 
    width: 50px; 
    height: 50px; 
    background-color: transparent; 
} 

#map-part:hover { 
    background-color: yellow;   /* Yellow Highlight On Hover */ 
    opacity: 0.2; 
    filter: alpha(opacity=20);  
} 

HTML:これが唯一の長方形のリンクのために働くことを

<div id="image"> 
    <a id="map-part" href="http://www.example.com/"></a> 
</div> 

注意。

+1

画像を反転していない場合でも、純粋なCSSオプションの+1。 –

+0

+1非常に巧妙な解決策 – Xavi

+0

ありがとう、それは働いた。私は "表示:ブロック"を使用し、上と左の代わりにmargin-top&margin-leftを使用したので、座標は相対的です。 –

7

jQuery MapHilightをご覧ください。
私はそれがあなたが必要とするものを正確に行うのかどうかはわかりませんが、マイナーな調整でそれを達成できます。

+0

+1すてきなプラグイン! –

+1

MapHilightを使用する場合のこの例を参照してください。http://stackoverflow.com/a/17614118/2313371 –

0

半透明の<DIV>ブロックをクリックして強調表示する方法はありますか?

0

多くの方法で、Dのファッションのように

、多くの小さな断片にあなたのイメージを打破し、それらを結合するために、テーブルを使用してあります。その後、javascriptを使ってハイライトエフェクトのthr "src"属性を置き換えます。

別のCSS方法では、altをクリップするのにCSSを使用します。元画像の上にイメージを表示し、どの領域を表示するかを制御します。

スピードアップするには、イメージよりもむしろ多くの小さなイメージを1つのイメージにする方が、ネットワーク経由ですぐに取得できます。

関連する問題