| ■37699 / ) |
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>
|
|