4

この画像は、html/php ページのサイズが 500x500 ピクセルです。ここで、その部分をスライスして、ユーザーがマウスを画像のさまざまな部分に重ねると、さまざまなメッセージが表示されるようにしたいと考えています..

画像が 20 の部分にスライスされている、または各スライスの開始座標と終了座標を取得しているとしましょう..どうすれば、同じ画像に異なるメッセージ (ツールヒント) が表示される異なる領域があるように、js コードをいくらか作成できます..

みんな助けて??

マップ、エリア、および座標メソッドを使用したプログラミングを考えました..しかし、それを終わらせる運はありません..

4

2 に答える 2

3

こんにちはこれはあなたが探しているものです:

<html>
<head>
<script language="JavaScript">
function getDetails(obj){
clickX = window.event.x-obj.offsetLeft;
clickY = window.event.y-obj.offsetTop;
    if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200))
    {
    alert(" You are between (100,100) And (200,200) of the Image");
    } 
}
</script>
</head>
<body>
<img src="image.jpg" onMousemove="getDetails(this)" id="myimg" height="500" width="500" />
</body>
</html>

Jquery バージョン:

<head>
<script language="JavaScript">
 $(document).ready(function(){
 $("#myimg").bind("mousemove",function(e){
  var offset = $("#myimg").offset();
  var clickX=e.clientX - offset.left;
  var clickY=e.clientY - offset.top;
    if((clickX>=100&&clickX<=200)&&(clickY>=100&&clickY<=200))
    {
    alert(" You are between (100,100) And (200,200) of the Image");
    } 
});
});
</script>
</head>
<body>
<img src="image.jpg"  id="myimg" height="500" width="500" />
</body>

このコードは、画像をホバリングした後、画像に対するマウス座標を取得し、ホバリングされた特定の領域の座標であるかどうかを確認しますか? それらがホバーされている場合は、警告メッセージが表示されます。

これが役立つことを願っています。

于 2013-03-16T04:39:47.787 に答える
1

いくつかの方法があります。

  1. 使用mapとareaタグは、そのために作成された説明を参照してください

  2. svgを使用する

しかし、私は最初の解決策があなたに最適だと思います

于 2013-03-16T04:37:20.103 に答える