2011-11-14 15 views
0

イメージマップ上のホットスポットにマウスカーソルを合わせるときにカスタムカーソルが機能するように苦労しています。 Firefoxでは完全に表示されますが、イメージマップ上にマウスカーソルを置くと、Safari/Chromeではカスタムのカーソルが表示されますが、画像上の実際のホットスポット(エリアタグ)にカーソルを合わせると、デフォルトの「クリックカーソル」が表示されます。私は、イメージマップの可能なセレクタのそれぞれを試してみると、私を狂ってしまいます。ここでSafari/IEイメージマップのカスタムカーソルが正しく動作しない

は、私が使用するコードです:

<map name="gameImg" id="gameImg"> 
        <area shape="rect" coords="299,4,358,64" class="gameElement" href="#" id="sailingBoat" name="0" /> 
        <area shape="rect" coords="365,43,505,161" class="gameElement" href="#" id="cruiseShip" name="1" /> 
</map> 

とCSS:

#gameScreen, #gameScreen .wrapper, #gameScreen .wrapper a, #gameScreen .wrapper a:hover, #gameScreen area, #gameScreen area a, #gameScreen area a:hover, #gameScreen img, #gameScreen img a, #gameScreen img a:hover, #gameImg, #gameImg a, #gameImg a:hover, .gameElement, .gameElement a, .gameElement a:hover, #gameScreen map a, #gameScreen map a:hover, #gameScreen:hover, #gameImg:hover { 
cursor: url(cursor.cur), url(images/cursor.cur), default; 
} 

セレクタの一部が上部に示されたが、私はちょうど私がカバーを保証するためにそれらを追加されませんそれぞれの可能なシナリオ。

これは単なるセレクターの問題だと確信していますが、リンクであればカスタムカーソルを同じにするためにどのセレクターを追加するかわかりません。

答えて

0

はこれを試して、それは私が言うことができるものから、javascriptを

http://www.ajaxblender.com/howto-create-custom-image-cursors.html

+0

フィードバックいただきありがとうございます。私のオリジナルのオプションは、マウスカーソルの後ろにあるdivを使うことでしたが、非常に安定した解決策ではありません。別のカップルのJSスクリプトがすでに実行されていて、このオプションを使用するときにスクリプトが遅れていることがわかりました。これはCSSでやり遂げることができるはずです。 – mauzilla

0

を使用して、これは私がまだ野生でそれを多くの参照を発見していないが、Safariの5に問題があるようです。これはイメージマップに限らず、標準<と同じ問題があります。>タグ。私はあなたと同じCSSアプローチを使用しています。

関連する問題