画像上のクリックした場所が分かるようにマーク表示

締切済

質問者：kupipooh8
質問日時：2010/12/16 20:49
回答数：2件

画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。

マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。

言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。

お分かりの方、どうぞよろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： yyr446
回答日時：2010/12/20 17:42

HTML5 のCANVAS要素への描画で作って見た。

canvas内をクリックすると、1,2,3,...と番号ラベルのついた丸を
そこに描画していく。番号を指定してそこまで画面を戻せるようにした。

※Ver8以下のIEでは使えません!

javascriptのソースは、
https://gist.github.com/748157
です。

HTMLマークアップ例

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Marker Canvas</title>
<script type="text/javascript" src="MarkerCanvas.js"></script>
</head>
<body>
<h1>Marker Canvas</h1>
<canvas id="MarkerCanvas" style="border:1px solid gray;"></canvas>
<form>
<button type="button" onclick="markerdel(this.form.elements['markerindex'].value)">削除</button>
マーカー番号：<input name="markerindex" value="" size="5"></input>
</form>
<script type="text/javascript">
var myMarkerCanvas = new MarkerCanvas(
　　 {doc:document,
　　　id:"MarkerCanvas",
　　　width:640,
　　　height:480,
　　　imagesrc:"/image/yahagi.png"
　　 }
);
function markerdel(index){
　myMarkerCanvas.markerdel(index);
}
</script>
</body>
</html>

- 0
- 件

通報する

No.1

回答者： my--
回答日時：2010/12/17 00:11

お願いされましたが、ちょっと漠然とした感じが。

。。

<style type="text/css">
.hoge {
position: absolute;
width: 20px;
height: 20px;
background-image: url(background.gif);
}
</style>

<script type="text/javascript">
document.onclick = eventHandler;
var divs = [];
var count = 0;
function eventHandler(e) {
　e = e || window.event;
　var target = e.target || e.srcElement;
　if (target.tagName !== 'IMG') return;
　var doc = document;
　var pageOffset = typeof window.pageXOffset === 'number';
　var root = /BackCompat/i.test(doc.compatMode) ? doc.body : doc.documentElement;
　var scrollLeft = pageOffset ? window.pageXOffset : root.scrollLeft;
　var scrollTop = pageOffset ? window.pageYOffset : root.scrollTop;
　var div;
　if (divs.length === count) {
　　div = doc.createElement('div');
　　div.className = 'hoge';
　　divs.push(div);
　　count++;
　} else {
　　div = divs[count++];
　}
　doc.body.appendChild(div);
　div.style.left = e.clientX + scrollLeft - 10 + 'px'; // width: 20px;
　div.style.top = e.clientY + scrollTop - 10 + 'px'; // height: 20px;
}

function remover() {
　var elem, i = 0;;
　while (elem = divs[i++]) {
　　var parent = elem.parentNode;
　　if (parent) parent.removeChild(elem);
　}
　count = 0;
}
</script>

<div>
<img src="img.jpg" alt="">
<button type="button" onclick="remover();">クリア</button>
</div>

とりあえず試してみて下さい。