0

画像にホット スポットを作成したいシナリオがあります。ユーザーが画像にホット スポットを作成できるようにしたいと考えています。この長方形は、クリック可能な領域 (ホット スポット) と共に表示する必要があります。ユーザーが特定の領域を選択できるページを作成する必要があり、将来的にはクリック可能にする必要があるため、必要です。方法を教えてください。

ここに画像の例があります。画像に線を描くことができるようになりましたが、マウスオーバーでクリックできる長方形を作成したいと思います。 ここに画像の説明を入力

背景は画像で、青の細い線はマウスで描いています。

4

1 に答える 1

0

First you need to wrap your image into a relative positioned DIV. Then add mousedown event listener for the image. In this handler store the click- coordinates and add mouseup listener for the image. In this mouseUp() store the mouseup-coordinates, remove all previous handlers and create a new DIV to the document. Then add click and mouseover event listeners for the new DIV, style the position absolute, actual position and size you can calculate from stored coordinates. Finally append newly created DIV to the image wrapper.

Instead of using a DIV as a hotspot , you can include an empty MAP element in your document, and then create new AREA(s) to this MAP.

EDIT

I'm really not sure what you need, but...

Creating a DIV in mouseUpHandler():

var clickableDiv = imgWrapper.appendChild(document.createElement('DIV'));
clickableDiv.style.position = 'absolute';
clickableDiv.style.top = calculatedY;
clickableDiv.style.left = calculatedX;
clickableDiv.style.width = calculatedWidth;
clickableDiv.style.height = calculatedHeight;
clickableDiv.style.backGround = '#fff';
clickableDiv.style.opacity = '0.5';
clickableDiv.addEventListener('click', doSomethingOnClick, false);

You're free to style the clickableDiv as you wish, but backGround and opacity (can be also 0) are needed to make the DIV clickable. doSomethingOnClick is a function name, which handles clicks on the clickableDiv.

于 2012-11-04T17:59:09.613 に答える