C# と VB.NET の質問掲示板

ASP.NET、C++/CLI、Java 何でもどうぞ

C# と VB.NET の入門サイト

Re[13]: Aspで地図上にアイコンを表示させる


(過去ログ 65 を表示中)

[トピック内 15 記事 (1 - 15 表示)]  << 0 >>

■37100 / inTopicNo.1)  Aspで地図上にアイコンを表示させる
  
□投稿者/ Ai (1回)-(2009/06/12(Fri) 16:54:18)

分類:[.NET 全般] 

Visual Stdio 2005でAsp Ajax VBを使用し、地図の上にアイコン表示させたいです。
まず、地図画像を表示させ、アイコン(ポストなど)は地図とは別の場所に配置し、マウスでそれをクリックして選択し、
地図の上でクリックするとそのアイコンが表示される仕様にしたいです(同じアイコンで複数個所選択可にしたいです)。
ImageMapで地図を取り込み、アイコンはImageButtonで配置しました。
あとは、アイコンを地図上に配置するのですが、6時間ほどずっと調べ続けていますが、私の調べ方が悪いのかまったくわかりません。。。
私のイメージでは、アイコンのところのコードに変数を宣言し、その変数の中にそのアイコンのURLを入れ、
地図のコードの方にIFを使い、クリックされたらそのURLが入った変数を呼び出すということではないかと考えたのですが
この方法でできるのでしょうか?
どうかお知恵をお貸し願います(_ _)
引用返信 編集キー/
■37103 / inTopicNo.2)  Re[1]: Aspで地図上にアイコンを表示させる
□投稿者/ biac (128回)-(2009/06/12(Fri) 17:57:09)
biac さんの Web サイト
> アイコンを地図上に配置する

…のを、 まず HTML ( + CSS, JavaScript ) だけで実装してみてくださいな。

それが出来るようになってから、 それじゃどうやって ASP.NET の仕掛けの中に取り込むか、 って話になります。


引用返信 編集キー/
■37635 / inTopicNo.3)  Re[1]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (2回)-(2009/06/26(Fri) 11:59:42)
お礼が遅くなりまして申し訳ございません。どうもありがとうございます。

JavaScriptで作成中なのですが、うまく表示されません。

以下がソースなのですが、実行したら一覧画像が表示され、クリックまではできるのですが、
その画像をコピーして配置することができません。

画像名を格納する変数のところが間違っているのかと思うのですが調べてもさっぱりです。
アドバイスをよろしくお願い致します。

<html>
<head>
<title>クリックして画像を配置</title>

<script type="text/javascript">
<!--



// Function(s) for CrossBrowser ----------------------------
MAC = navigator.userAgent.indexOf('Mac')!=-1;
DOM = document.all?(document.getElementById?3:2)
:(document.getElementById?4
:(document.layers?1:0));
CREATE_No = 0;

function getDivFromName(idName){
if(DOM>=3)
return document.getElementById(idName);
if(DOM==2)
return document.all(idName);
if(DOM==1){
var s = '';
for(var i=1; i<arguments.length; i++)
s += 'document.layers.'+arguments[i]+'.';
return eval(s+'document.layers.'+idName);
}
return null;
}
function moveDivTo(div,left,top){
if(DOM==4) {
div.style.left=left+'px';
div.style.top =top+'px';
return;
}
if(DOM==3 || DOM==2){
div.style.pixelLeft=left;
div.style.pixelTop =top;
return;
}
if(DOM==1){
div.moveTo(left,top);
return;
}
}
function setDivVisibility(div,visible){
if(DOM>=2){
div.style.visibility = (visible)?'inherit':'hidden';
return;
}
if(DOM==1){
div.visibility = (visible)?'inherit':'hide';
return;
}
}
function getPageX(e){
if(window.opera)
return e.clientX;
if(DOM==4)
return e.clientX+window.scrollX;
if(DOM==3 || DOM==2)
return document.body.scrollLeft+window.event.clientX;
if(DOM==1)
return e.pageX;
return 0;
}
function getPageY(e){
if(window.opera)
return e.clientY;
if(DOM==4)
return e.clientY+window.scrollY;
if(DOM==3 || DOM==2)
return document.body.scrollTop+window.event.clientY;
if(DOM==1)
return e.pageY;
return 0;
}
function createLayer(left,top,width,height,parentDiv){
if(DOM==4){
var layerID='JS_layer'+CREATE_No; CREATE_No++;
var pDiv =parentDiv?parentDiv:document.body;
var div =document.createElement('DIV');
div.id=layerID;
div.setattribute('style',
'position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):'')
+(height>0?(';height:'+height):'')
+';visibility:hidden');
pDiv.appendChild(div);
return div;
}
if(DOM==3 || DOM==2){
var adj = MAC?' ':'';
var layerID = 'JS_layer'+CREATE_No; CREATE_No++;
var pDiv = parentDiv?parentDiv:document.body;
pDiv.insertAdjacentHTML('BeforeEnd',
'<div id="'+layerID
+'" style="position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):';width:1')
+(height>0?(';height:'+height):'')
+';visibility:hidden;"><\/div>'+adj);
return document.all(layerID);
}
if(DOM==1){
var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
if(width>0 && height>0) div.resizeTo(width,height);
div.moveTo(left,top);
return div;
}
return null;
}
function loadDivImage(div, fName, width, height){
if(DOM==4){
var img = document.createElement('IMG');
img.src = fName;
if(width >0) img.setattribute('width', width );
if(height>0) img.setattribute('height',height);
div.appendChild(img);
return;
}
var s='<img src='+fName;
if(width >0) s+=' width=' +width;
if(height>0) s+=' height='+height;
s+='>'
if(DOM==3 || DOM==2){
div.innerHTML = s;
return;
}
if(DOM==1){
div.document.open('text/html');
div.document.write(s);
div.document.close();
return;
}
}
// Main Script ---------------------------------------------
var imgToPut = new Image(); imgToPut.src = myimg;

function putBomb(e){
var w = imgToPut.width;
var h = imgToPut.height;
var x = getPageX(e)-Math.floor(w/2);
var y = getPageY(e)-Math.floor(h/2);
var div = createLayer(x, y, w, h);
loadDivImage(div, imgToPut.src, w, h);
setDivVisibility(div, true);
}
if(document.layers) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = putBomb;
// -->
</script>



</head>
<body>
<b hhref="javascript:addImg('01.jpg')"><img src="01.jpg" name="myimg"></b>
<b hhref="javascript:addImg('02.jpg')"><img src="02.jpg" name="myimg"></b>
<b hhref="javascript:addImg('03.jpg')"><img src="03.jpg" name="myimg"></b>
<b hhref="javascript:addImg('04.jpg')"><img src="04.jpg" name="myimg"></b>
'↑この掲示板に送信できなかったので、aはbにしてhを1つずつ仮に足しています
'bはaに置き換えて、hがダブっているところは1つにして参照ください

</body>
</html>

引用返信 編集キー/
■37643 / inTopicNo.4)  Re[2]: Aspで地図上にアイコンを表示させる
□投稿者/ biac (138回)-(2009/06/26(Fri) 14:04:09)
biac さんの Web サイト
> <b hhref="javascript:addImg('04.jpg')"><img src="04.jpg" name="myimg"></b>
> '↑この掲示板に送信できなかったので、aはbにしてhを1つずつ仮に足しています

addImg() 関数がありませんが…
それより、 なぜ a 要素が必要なのか…?


> その画像をコピーして配置することができません。

> // Main Script ---------------------------------------------
> var imgToPut = new Image(); imgToPut.src = myimg;

imgToPut を使っているところがありませんが…

エスパー回答すると…
new Image() したオブジェクトの src に、 クリックされた画像の src をセットして表示してやることで、 あたかもクリックされた画像がコピーされたように見せようとしている?

え〜と…
記憶を漁ると… そんなん出来たっけ? f(^^;

分からないときは、 振り出しに戻って、 一歩ずつ進みましょう。

まず、
var imgToPut = new Image(); imgToPut.src = "(url 直接指定)";
として作った Image オブジェクトを、 画面に表示させてみてください。 (それ以外のことは一切無しで)


# うろ覚えな記憶では、 new した Image オブジェクトは画面に出せなかったような…
引用返信 編集キー/
■37644 / inTopicNo.5)  Re[3]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (3回)-(2009/06/26(Fri) 14:26:02)
どうもありがとうございます。

Cは経験あるのですが、JavaScritはまったくの初心者なもので上司から言われて手探りで探しながらやっているもので、
意味不明なことを書いてしまっていたら申し訳ないです。

確かに、
var imgToPut = new Image(); imgToPut.src = "01.jpg";
で実行してみると何もでなかったです。

addImg() 関数は↓から参考にしたのですが、すみません抜けていました;;

http://www.infocvs.com/bbs/bbs/board.php?bo_table=html&wr_id=154&sfl=&stx=&sst=wr_hit&sod=desc&sop=and&page=22

下のソースはサイトから参考にさせて頂いた元のソースですがこちらは画像が表示されます。。。
ですが、画像の一覧を表示させてクリックして選択し配置という機能を追加させたいのです。
onclickで関数を設定し、関数内でどの画像が選択されたかという風にしようと考えているのですが、なかなか道のりは遠いですね。

<html>
<head>
<title>クリックして画像を配置</title>

<script type="text/javascript">
<!--

// Function(s) for CrossBrowser ----------------------------
MAC = navigator.userAgent.indexOf('Mac')!=-1;
DOM = document.all?(document.getElementById?3:2)
:(document.getElementById?4
:(document.layers?1:0));
CREATE_No = 0;

function getDivFromName(idName){
if(DOM>=3)
return document.getElementById(idName);
if(DOM==2)
return document.all(idName);
if(DOM==1){
var s = '';
for(var i=1; i<arguments.length; i++)
s += 'document.layers.'+arguments[i]+'.';
return eval(s+'document.layers.'+idName);
}
return null;
}
function moveDivTo(div,left,top){
if(DOM==4) {
div.style.left=left+'px';
div.style.top =top+'px';
return;
}
if(DOM==3 || DOM==2){
div.style.pixelLeft=left;
div.style.pixelTop =top;
return;
}
if(DOM==1){
div.moveTo(left,top);
return;
}
}
function setDivVisibility(div,visible){
if(DOM>=2){
div.style.visibility = (visible)?'inherit':'hidden';
return;
}
if(DOM==1){
div.visibility = (visible)?'inherit':'hide';
return;
}
}
function getPageX(e){
if(window.opera)
return e.clientX;
if(DOM==4)
return e.clientX+window.scrollX;
if(DOM==3 || DOM==2)
return document.body.scrollLeft+window.event.clientX;
if(DOM==1)
return e.pageX;
return 0;
}
function getPageY(e){
if(window.opera)
return e.clientY;
if(DOM==4)
return e.clientY+window.scrollY;
if(DOM==3 || DOM==2)
return document.body.scrollTop+window.event.clientY;
if(DOM==1)
return e.pageY;
return 0;
}
function createLayer(left,top,width,height,parentDiv){
if(DOM==4){
var layerID='JS_layer'+CREATE_No; CREATE_No++;
var pDiv =parentDiv?parentDiv:document.body;
var div =document.createElement('DIV');
div.id=layerID;
div.setattribute('style',
'position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):'')
+(height>0?(';height:'+height):'')
+';visibility:hidden');
pDiv.appendChild(div);
return div;
}
if(DOM==3 || DOM==2){
var adj = MAC?' ':'';
var layerID = 'JS_layer'+CREATE_No; CREATE_No++;
var pDiv = parentDiv?parentDiv:document.body;
pDiv.insertAdjacentHTML('BeforeEnd',
'<div id="'+layerID
+'" style="position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):';width:1')
+(height>0?(';height:'+height):'')
+';visibility:hidden;"><\/div>'+adj);
return document.all(layerID);
}
if(DOM==1){
var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
if(width>0 && height>0) div.resizeTo(width,height);
div.moveTo(left,top);
return div;
}
return null;
}
function loadDivImage(div, fName, width, height){
if(DOM==4){
var img = document.createElement('IMG');
img.src = fName;
if(width >0) img.setattribute('width', width );
if(height>0) img.setattribute('height',height);
div.appendChild(img);
return;
}
var s='<img src='+fName;
if(width >0) s+=' width=' +width;
if(height>0) s+=' height='+height;
s+='>'
if(DOM==3 || DOM==2){
div.innerHTML = s;
return;
}
if(DOM==1){
div.document.open('text/html');
div.document.write(s);
div.document.close();
return;
}
}
// Main Script ---------------------------------------------
var imgToPut = new Image(); imgToPut.src = "01.jpg";

function putBomb(e){
var w = imgToPut.width;
var h = imgToPut.height;
var x = getPageX(e)-Math.floor(w/2);
var y = getPageY(e)-Math.floor(h/2);
var div = createLayer(x, y, w, h);
loadDivImage(div, imgToPut.src, w, h);
setDivVisibility(div, true);
}
if(document.layers) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = putBomb;
// -->
</script>

</head>
<body>
</body>
</html>

引用返信 編集キー/
■37680 / inTopicNo.6)  Re[4]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (4回)-(2009/06/26(Fri) 18:39:59)
サイトなどを参考にして大体を形作ることができました。
問題点は、画像を1つ選択して配置した後、次の画像を選択しようとすると1つ目の画像がその上に配置されていまい、選択ができない状態になってしまっています。なので、クリアボタンを置き、現在選択されている画像名をクリアしようと考えています。
以下がここまでで作成したソースです。

<html>
<head>
<title>クリックして画像を配置</title>

<script type="text/javascript">
<!--

// Function(s) for CrossBrowser ----------------------------
MAC = navigator.userAgent.indexOf('Mac')!=-1;
DOM = document.all?(document.getElementById?3:2)
:(document.getElementById?4
:(document.layers?1:0));
CREATE_No = 0;

function getDivFromName(idName){
if(DOM>=3)
return document.getElementById(idName);
if(DOM==2)
return document.all(idName);
if(DOM==1){
var s = '';
for(var i=1; i<arguments.length; i++)
s += 'document.layers.'+arguments[i]+'.';
return eval(s+'document.layers.'+idName);
}
return null;
}
function moveDivTo(div,left,top){
if(DOM==4) {
div.style.left=left+'px';
div.style.top =top+'px';
return;
}
if(DOM==3 || DOM==2){
div.style.pixelLeft=left;
div.style.pixelTop =top;
return;
}
if(DOM==1){
div.moveTo(left,top);
return;
}
}
function setDivVisibility(div,visible){
if(DOM>=2){
div.style.visibility = (visible)?'inherit':'hidden';
return;
}
if(DOM==1){
div.visibility = (visible)?'inherit':'hide';
return;
}
}
function getPageX(e){
if(window.opera)
return e.clientX;
if(DOM==4)
return e.clientX+window.scrollX;
if(DOM==3 || DOM==2)
return document.body.scrollLeft+window.event.clientX;
if(DOM==1)
return e.pageX;
return 0;
}
function getPageY(e){
if(window.opera)
return e.clientY;
if(DOM==4)
return e.clientY+window.scrollY;
if(DOM==3 || DOM==2)
return document.body.scrollTop+window.event.clientY;
if(DOM==1)
return e.pageY;
return 0;
}
function createLayer(left,top,width,height,parentDiv){
if(DOM==4){
var layerID='JS_layer'+CREATE_No; CREATE_No++;
var pDiv =parentDiv?parentDiv:document.body;
var div =document.createElement('DIV');
div.id=layerID;
div.setattribute('style',
'position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):'')
+(height>0?(';height:'+height):'')
+';visibility:hidden');
pDiv.appendChild(div);
return div;
}
if(DOM==3 || DOM==2){
var adj = MAC?' ':'';
var layerID = 'JS_layer'+CREATE_No; CREATE_No++;
var pDiv = parentDiv?parentDiv:document.body;
pDiv.insertAdjacentHTML('BeforeEnd',
'<div id="'+layerID
+'" style="position:absolute;left:'+left+';top:'+top
+(width >0?(';width:' +width ):';width:1')
+(height>0?(';height:'+height):'')
+';visibility:hidden;"><\/div>'+adj);
return document.all(layerID);
}
if(DOM==1){
var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
if(width>0 && height>0) div.resizeTo(width,height);
div.moveTo(left,top);
return div;
}
return null;
}
function loadDivImage(div, fName, width, height){
if(DOM==4){
var img = document.createElement('IMG');
img.src = fName;
if(width >0) img.setattribute('width', width );
if(height>0) img.setattribute('height',height);
div.appendChild(img);
return;
}
var s='<img src='+fName;
if(width >0) s+=' width=' +width;
if(height>0) s+=' height='+height;
s+='>'
if(DOM==3 || DOM==2){
div.innerHTML = s;
return;
}
if(DOM==1){
div.document.open('text/html');
div.document.write(s);
div.document.close();
return;
}
}
// Main Script ---------------------------------------------

var myimg;

function sentaku(aa) {

if (aa == "01.jpg") {

var imgToPut = new Image(); imgToPut.src = "01.jpg";

}

else if (aa == "02.jpg") {

var imgToPut = new Image(); imgToPut.src = "02.jpg";

}

else if (aa == "03.jpg") {

var imgToPut = new Image(); imgToPut.src = "03.jpg";

}

else if (aa == "04.jpg") {

var imgToPut = new Image(); imgToPut.src = "04.jpg";

}

else if (aa == "05.jpg") {

var imgToPut = new Image(); imgToPut.src = "05.jpg";

}

else if (aa == "06.jpg") {

var imgToPut = new Image(); imgToPut.src = "06.jpg";

}

//var imgToPut = new Image(); imgToPut.src = myimg;

function putBomb(e){
var w = imgToPut.width;
var h = imgToPut.height;
var x = getPageX(e)-Math.floor(w/2);
var y = getPageY(e)-Math.floor(h/2);
var div = createLayer(x, y, w, h);
loadDivImage(div, imgToPut.src, w, h);
setDivVisibility(div, true);
}
if(document.layers) document.captureEvents(Event.MOUSEDOWN);
document.onmousedown = putBomb;

}

// -->
</script>

</head>
<body>

<b href="javascript:void(0)" onClick="sentaku('01.jpg')" border="0"><img src="01.jpg" ></b>
<b href="javascript:void(0)" onClick="sentaku('02.jpg')" border="0"><img src="02.jpg" ></b>
<b href="javascript:void(0)" onClick="sentaku('03.jpg')" border="0"><img src="03.jpg" ></b>
<b href="javascript:void(0)" onClick="sentaku('04.jpg')" border="0"><img src="04.jpg" ></b>
<b href="javascript:void(0)" onClick="sentaku('05.jpg')" border="0"><img src="05.jpg" ></b>
<b href="javascript:void(0)" onClick="sentaku('06.jpg')" border="0"><img src="06.jpg" ></b>
//↑bをaに置き換えて参照ください                             ↑ 

</body>
</html>

引用返信 編集キー/
■37683 / inTopicNo.7)  Re[5]: Aspで地図上にアイコンを表示させる
□投稿者/ .SHO (907回)-(2009/06/26(Fri) 19:25:40)
回答じゃないんですが…というか最後はもう質問じゃなくなってるけど。

図表モードで、ちゃんとインデントした方がいいかも?
引用返信 編集キー/
■37684 / inTopicNo.8)  Re[6]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (5回)-(2009/06/26(Fri) 19:44:23)
あ、ごめんなさい。見にくいですよね。
図表モードがあったんですね><


引用返信 編集キー/
■37699 / inTopicNo.9)  Re[7]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (6回)-(2009/06/29(Mon) 10:36:52)
クリアボタンを追加してボタンが押されたら画像名が入っている変数をクリアしようとしたのですが、
実行時、ボタンを押すことができません。。。(ボタンを押そうとするとボタンの上に画像が配置されてしまいます)
クリアボタンのところがおかしいのでしょうか??
ご教授お願いします。

<html>
<head>
<title>クリックして画像を配置</title>

<script type="text/javascript">
<!--

// Function(s) for CrossBrowser ----------------------------
	MAC = navigator.userAgent.indexOf('Mac')!=-1;
	DOM = document.all?(document.getElementById?3:2)
                  :(document.getElementById?4
                  :(document.layers?1:0));
	CREATE_No = 0;

	function getDivFromName(idName){
  		if(DOM>=3)
    		return document.getElementById(idName);
  		if(DOM==2)
    		return document.all(idName);
  		if(DOM==1){
    		var s = '';
    	for(var i=1; i<arguments.length; i++)
      		s += 'document.layers.'+arguments[i]+'.';
      		return eval(s+'document.layers.'+idName);
    	}
    	return null;
	}
	
	function moveDivTo(div,left,top){
  		if(DOM==4) {
    		div.style.left=left+'px';
    		div.style.top =top+'px';
    		return;
  		}
  		if(DOM==3 || DOM==2){
    		div.style.pixelLeft=left;
    		div.style.pixelTop =top;
    		return;
  		}
  		if(DOM==1){
    		div.moveTo(left,top);
    		return;
  		}
	}
	
	function setDivVisibility(div,visible){
  		if(DOM>=2){
    		div.style.visibility = (visible)?'inherit':'hidden';
    		return;
  		}
  		if(DOM==1){
    		div.visibility = (visible)?'inherit':'hide';
    		return;
  		}
	}
	
	function getPageX(e){
  		if(window.opera)
    		return e.clientX;
  		if(DOM==4)
    		return e.clientX+window.scrollX;
  		if(DOM==3 || DOM==2)
    		return document.body.scrollLeft+window.event.clientX;
  		if(DOM==1)
    		return e.pageX;
  			return 0;
		}
		
	function getPageY(e){
  		if(window.opera)
    		return e.clientY;
  		if(DOM==4)
    		return e.clientY+window.scrollY;
  		if(DOM==3 || DOM==2)
    		return document.body.scrollTop+window.event.clientY;
  		if(DOM==1)
    		return e.pageY;
  			return 0;
	}
	
	function createLayer(left,top,width,height,parentDiv){
  		if(DOM==4){
    		var layerID='JS_layer'+CREATE_No; CREATE_No++;
    		var pDiv  =parentDiv?parentDiv:document.body;
    		var div    =document.createElement('DIV');
    		div.id=layerID;
    		div.setattribute('style',
      		'position:absolute;left:'+left+';top:'+top
      		+(width >0?(';width:' +width ):'')
      		+(height>0?(';height:'+height):'')
      		+';visibility:hidden');
    		pDiv.appendChild(div);
    		return div;
  		}
  		if(DOM==3 || DOM==2){
    		var adj = MAC?' ':'';
    		var layerID = 'JS_layer'+CREATE_No; CREATE_No++;
    		var pDiv = parentDiv?parentDiv:document.body;
    		pDiv.insertAdjacentHTML('BeforeEnd',
      		'<div id="'+layerID
      		+'" style="position:absolute;left:'+left+';top:'+top
      		+(width >0?(';width:' +width ):';width:1')
      		+(height>0?(';height:'+height):'')
      		+';visibility:hidden;"><\/div>'+adj);
    		return document.all(layerID);
  		}
  		if(DOM==1){
    		var div=parentDiv?(new Layer(width,parentDiv)):(new Layer(width));
    	if(width>0 && height>0) div.resizeTo(width,height);
    		div.moveTo(left,top);
    		return div;
  		}
  		return null;
	}
	
	function loadDivImage(div, fName, width, height){
  		if(DOM==4){
    		var img = document.createElement('IMG');
    		img.src = fName;
    	if(width >0) img.setattribute('width', width );
    	if(height>0) img.setattribute('height',height);
    		div.appendChild(img);
    		return;
  		}
  		var s='<img src='+fName;
  		if(width >0) s+=' width=' +width;
  		if(height>0) s+=' height='+height;
  			s+='>'
  		if(DOM==3 || DOM==2){
    		div.innerHTML = s;
    		return;
 		}
  		if(DOM==1){
    		div.document.open('text/html');
    		div.document.write(s);
    		div.document.close();
    		return;
  		}
	}
	
// Main Script ---------------------------------------------

	var myimg;

	function sentaku(aa) {
		if (aa == "01.jpg") {
        	var imgToPut = new Image(); imgToPut.src = "01.jpg";
		}
		else if (aa == "02.jpg") {
        	var imgToPut = new Image(); imgToPut.src = "02.jpg";
		}
		else if (aa == "03.jpg") {
	        var imgToPut = new Image(); imgToPut.src = "03.jpg";
		}
		else if (aa == "04.jpg") {
	        var imgToPut = new Image(); imgToPut.src = "04.jpg";
		}
		else if (aa == "05.jpg") {
	        var imgToPut = new Image(); imgToPut.src = "05.jpg";
		}
		else if (aa == "06.jpg") {
	        var imgToPut = new Image(); imgToPut.src = "06.jpg";
		}
		//var imgToPut = new Image(); imgToPut.src = myimg;

	function putBomb(e){
  		var w = imgToPut.width;
  		var h = imgToPut.height;
  		var x = getPageX(e)-Math.floor(w/2);
  		var y = getPageY(e)-Math.floor(h/2);
  		var div = createLayer(x, y, w, h);
  		loadDivImage(div, imgToPut.src, w, h);
  		setDivVisibility(div, true);
	}
	if(document.layers) document.captureEvents(Event.MOUSEDOWN);
		document.onmousedown = putBomb;   		
	}

// -->
</script> 

</head>
<body>

<b href="javascript:void(0)" onClick="sentaku('01.jpg')"  border="0"><img src="01.jpg" ></b> 
<b href="javascript:void(0)" onClick="sentaku('02.jpg')"  border="0"><img src="02.jpg" ></b> 
<b href="javascript:void(0)" onClick="sentaku('03.jpg')"  border="0"><img src="03.jpg" ></b> 
<b href="javascript:void(0)" onClick="sentaku('04.jpg')"  border="0"><img src="04.jpg" ></b> 
<b href="javascript:void(0)" onClick="sentaku('05.jpg')"  border="0"><img src="05.jpg" ></b> 
<b href="javascript:void(0)" onClick="sentaku('06.jpg')"  border="0"><img src="06.jpg" ></b> 
//↑bをaに置き換えて参照ください                               ↑ 

<p>
<input type="button" name="button" value="クリア" onclick="putBomb = ''" >
</p>

</body>
</html>

引用返信 編集キー/
■37716 / inTopicNo.10)  Re[8]: Aspで地図上にアイコンを表示させる
□投稿者/ もりお (2回)-(2009/06/29(Mon) 13:53:43)
No37699 (Ai さん) に返信
ドキュメント全体にマウスダウンイベントが設定されているようなので
クリアボタンにIDを追加して、ボタン押下時にターゲットがクリアボタンか判断する。
そうすることで、処理を分けてみてはいかがでしょうか。

function putBomb(e){
    if(e.target == document.getElementById("clear")){
        return;
    }
    var w = imgToPut.width;
    var h = imgToPut.height;
    var x = getPageX(e)-Math.floor(w/2);
    var y = getPageY(e)-Math.floor(h/2);
    var div = createLayer(x, y, w, h);
    loadDivImage(div, imgToPut.src, w, h);
    setDivVisibility(div, true);
}

<input id="clear" type="button" name="button" value="クリア" onclick="putBomb = ''" >


引用返信 編集キー/
■37721 / inTopicNo.11)  Re[9]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (7回)-(2009/06/29(Mon) 14:23:24)
どうもありがとうございます!
アドバイス通り修正して実行してみたのですが、アイコンがまったく配置できない状態になってしまいました。。
googleで探し回っているのですがなかなか参考になるものがないです。。。


	function putBomb(e){
    		if(e.target == document.getElementById("clear")){
        		return;
    		}
    		var w = imgToPut.width;
    		var h = imgToPut.height;
    		var x = getPageX(e)-Math.floor(w/2);
    		var y = getPageY(e)-Math.floor(h/2);
    		var div = createLayer(x, y, w, h);
    		loadDivImage(div, imgToPut.src, w, h);
    		setDivVisibility(div, true);
	}

<p>
<input id="clear" type="button" name="button" value="クリア" onclick="putBomb = ''" >
</p>


(※一部抜粋)

引用返信 編集キー/
■37727 / inTopicNo.12)  Re[10]: Aspで地図上にアイコンを表示させる
□投稿者/ もりお (3回)-(2009/06/29(Mon) 15:13:43)
No37721 (Ai さん) に返信
IEではe.targetでターゲットを取得できないようです。
代わりにevent.srcElementが用意されているようです。
このようにしてみてはいかがでしょうか。

function putBomb(e){
    if(getTarget(e) == document.getElementById("clear")){
        return;
    }
    var w = imgToPut.width;
    var h = imgToPut.height;
    var x = getPageX(e)-Math.floor(w/2);
    var y = getPageY(e)-Math.floor(h/2);
    var div = createLayer(x, y, w, h);
    loadDivImage(div, imgToPut.src, w, h);
    setDivVisibility(div, true);
}

function getTarget(e){
    if(e != null){
        return e.target;
    }
    return event.srcElement;
}

引用返信 編集キー/
■37730 / inTopicNo.13)  Re[11]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (8回)-(2009/06/29(Mon) 15:53:14)
度々ありがとうございます!
event.srcElementというのがあったんですね。
早速修正したのですが、始めの関数のすぐ下のif文をreturnにすると変数名がクリアされていなかったようで、
document.onmousedown = ""; とすると、1度だけクリアされました。
なので、アイコンが6つある場合、2つ目のアイコンまでは配置できるようになりました。
ですが、3つ目のアイコンを配置しようとしてもできなかったです。。
onclickって何度クリックしてもいくつでも処理できるはずでは!?


	function putBomb(e){
	    if(getTarget(e) == document.getElementById("clear")){
	         document.onmousedown = "";
	    }
	    var w = imgToPut.width;
	    var h = imgToPut.height;
	    var x = getPageX(e)-Math.floor(w/2);
	    var y = getPageY(e)-Math.floor(h/2);
	    var div = createLayer(x, y, w, h);
	    loadDivImage(div, imgToPut.src, w, h);
	    setDivVisibility(div, true);
	}

	function getTarget(e){
	    if(e != null){
	        return e.target;
	    }
	    return event.srcElement;
	}
	
	if(document.layers) document.captureEvents(Event.MOUSEDOWN);
		document.onmousedown = putBomb;   		
	}

<p>
<input id="clear" type="button" name="button" value="クリア" onclick="putBomb('clear')" >
</p>

引用返信 編集キー/
■37731 / inTopicNo.14)  Re[12]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (9回)-(2009/06/29(Mon) 16:18:23)
クリアボタンのサイズを大きくすることにより、すべてのアイコンを選んで配置することができました!
ですが、クリアボタンを押すとそこにアイコンが配置されてしまいます。
ボタン上にアイコンを表示させないようにしたいです。
googleで調べていますがなかなかヒットするものがないですね。。。

<p>
<input id="clear" type="button" name="button" value="クリア" style="width:100px;height:100px;" onclick="putBomb('clear')" >
</p>
引用返信 編集キー/
■37747 / inTopicNo.15)  Re[13]: Aspで地図上にアイコンを表示させる
□投稿者/ Ai (10回)-(2009/06/29(Mon) 17:47:06)
関数の中にx,yの座標の指定を入れることでボタンの上には配置しないようにはできたのですが、
その範囲を超えて配置しようとすると、大分内側の離れた場所に配置されてしまいます。。。
考えたのが、もし変な場所に配置されてしまったらそれを指定し削除できるようにしたらいいのではと思うのですが、
これもまたわからないので、もしおわかりでしたらアドバイスをお願い致します。


function putBomb(e){
if(getTarget(e) == document.getElementById("clear")){
document.onmousedown = "";
}
var w = imgToPut.width;
var h = imgToPut.height;
var x = getPageX(e)-Math.floor(w/2);
var y = getPageY(e)-Math.floor(h/2);

if(x<0)x=0;
if(x>700)x=700;

if(y<0)y=0;
if(y>630)y=630;


var div = createLayer(x, y, w, h);
loadDivImage(div, imgToPut.src, w, h);
setDivVisibility(div, true);
}


引用返信 編集キー/


トピック内ページ移動 / << 0 >>

このトピックに書きこむ

過去ログには書き込み不可

管理者用

- Child Tree -