- 締切済み
画像上のクリックした場所が分かるようにマーク表示
画像上をクリックした際、どこをクリックしたか分かるようにマークのようなものを画像の上に表示させたいと考えています。 マークはあくまで表示のみで、元の画像は加工しないようにしたいと考えています。 言語はＨＴＭＬとＪａｖａＳｃｒｉｐｔでお願いします。 お分かりの方、どうぞよろしくお願いします。
- kupipooh8
- お礼率66% (6/9)
- JavaScript
- 回答数2
- ありがとう数0
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- yyr446
- ベストアンサー率65% (870/1330)
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>
- my--
- ベストアンサー率89% (91/102)
お願いされましたが、ちょっと漠然とした感じが。。。 <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> とりあえず試してみて下さい。
