A 回答 (2件)
- 最新から表示
- 回答順に表示
No.2
- 回答日時:
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>
No.1
- 回答日時:
お願いされましたが、ちょっと漠然とした感じが。
。。<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>
とりあえず試してみて下さい。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- Visual Basic(VBA) ExcelのVBAコードについて教えてください。 1 2023/04/21 13:46
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- PowerPoint(パワーポイント) パワーポイント アニメーション効果で、テキストと同時に画像を表示させる方法を教えてください 2 2022/09/12 21:06
- Windows 10 2つのウィンドウ選択時の表示について 10 2023/07/25 08:48
- Excel(エクセル) エクセルにサムネイル画像組み込み 2 2022/09/02 17:13
- X(旧Twitter) ツィッターの画像表示について 1 2023/08/17 09:28
- その他(パソコン・スマホ・電化製品) アンドロイドスマホの画面にクリックするとJPG写真が開くショートカットを作りたいのですが、方法をおし 3 2023/08/27 10:01
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
ActiveXobjectが作成できない
-
<a>タグのテキストを取得
-
javascriptでスロットゲームを...
-
javascriptでCSVを呼出しvlookup
-
javascriptを使ったページ内の...
-
問題はbind の付いたリスナーを...
-
javascript画面を自動で切り替...
-
画像上のクリックした場所が分...
-
javascript 特定のタグのidの存...
-
onchangeイベントを使ってspan...
-
JavaScriptでゲーム作成
-
同じIDで定義した要素の配列を...
-
functionから別のfunctionを実...
-
この将棋プログラムに王様ゲッ...
-
関数でy=g(x)のgとは何の略です...
-
C#OpenCv V4にのエラーに関する...
-
document.onkeydownについて
-
ローカルにあるファイルを検索...
-
なぜmatchメソッドがエラーにな...
-
jspからjavascriptの変数引継ぎ
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
<a>タグのテキストを取得
-
任意の座標をクリックさせるには
-
ActiveXobjectが作成できない
-
innerHTML実行後のイベント
-
Click回数を数え、規定された回...
-
HTML:Tableタグに対し、JavaScr...
-
JavaScriptでオブジェクトを取...
-
onchangeイベントを使ってspan...
-
【Tabキー】特定の範囲内だけで...
-
モーダルダイアログウィンドウ...
-
重複しないくじの作り方がわか...
-
javascript 特定のタグのidの存...
-
配列の大括弧と丸括弧はどう違う?
-
javascriptであるボタンを押す...
-
「nullまたはオブジェクトでは...
-
div要素内の全input要素をdisable
-
onclickを使わずにイベント処理...
-
画像上のクリックした場所が分...
-
RadioButtonListの表示制御
-
javascriptで自動計算フォーム...
おすすめ情報