JavaScriptのonClickについて



 ◇-?JavaScriptのonClickについて-しん-06/12-13:26(224)-No.410056
   ┗?!Re:JavaScriptのonClickについて...-テツヤ-06/12-14:38(223)-No.410069
     ┗?!!Re:JavaScriptのonClickについ...-しん-06/13-09:30(204)-No.410173
       ┗?!!!Re:JavaScriptのonClickについ...-テツヤ-06/13-11:19(202)-No.410185
         ┗?!!!【多分解決】Re:JavaScriptのo...-しん-06/15-10:08(156)-No.410419
           ┗?!!!T!修正1_Re:JavaScriptのonCli...-テツヤ-06/15-13:37(152)-No.410434

▲このページのトップに戻る
410056JavaScriptのonClickについてしん 2007/06/12-13:26

メーカー名:東芝
OS名:WindowsXp HomeEdition
パソコン名:PAEX522PDE3
使用回線:ADSL
--
画像をマウスで移動させるソフトを作成しています。
画像の移動(onMouseMove)は出来ますが

画像をonClickの時、反応範囲を制御出来ませんか。

「例」
(1)三角形の画像を作成し、保存した場合、フアイルとしては三角形を囲む
四角のサイズで保存されます。
(2)この画像をonClickで制御する場合、三角形の領域は勿論、反応しますが
三角形の外側の領域でも反応します。
(3)三角形の外側を透明にしても反応します。

之を三角形の内側でのみ反応する様に出来ませんか?
(任意の範囲で制御出来れば最高です。)


▲このページのトップに戻る
410069Re:JavaScriptのonClickについてテツヤ 2007/06/12-14:38

記事番号410056へのコメント
 ちょっと質問の意味がわかりません。《
<HTML>
<HEAD>
<TITLE>Test19</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<META http-equiv="Content-Style-Type" content="text/css">
</HEAD>

<BODY>

<IMG src="Img/img1028186672.jpg" usemap="#テスト" style="width:100px; height:100px"><BR>
<MAP name="テスト">
<AREA alt="リンク"
href="" target="サンプル" shape=poly coords="50,0,100,100,0,100">
</MAP>

</BODY>
</HTML>

>(1)三角形の画像を作成し、保存した場合、フアイルとしては三角形を囲む
>四角のサイズで保存されます
 この意味がわからない。画像を右クリックで「名前を付けて保存」のこと?。

 画像の移動に関しては、こちらを参考に。
http://www.geocities.jp/tetuya630213/Script.htm
の中のImageAなど。

▲このページのトップに戻る
410173Re:JavaScriptのonClickについてしん 2007/06/13-09:30

記事番号410069へのコメント
テツヤさんは No.410069「Re:JavaScriptのonClickについて」で書きました。
テツヤさん有難うございます。
説明不足ですいません。

参考htmフアイルImageAの中の下記の
<IMG class=Move src="FC.gif">で三角図形をgifフアイルとし場合です。

この場合
(1)三角図形の辺で囲まれた中を「クリック」して「ドラッグ」すれば画像は移動できます。
(2)三角図形の片の外(辺の近く)でも移動できます。

上記の場合で(2)は出来ないようにしたいわけです。

(フアイルとしては三角形を囲む四角のサイズで、width=??,height=??で保存されていると思いますが?)



▲このページのトップに戻る
410185Re:JavaScriptのonClickについてテツヤ 2007/06/13-11:19

記事番号410173へのコメント
しんさんは No.410173「Re:JavaScriptのonClickについて」で書きました。
>(1)三角図形の辺で囲まれた中を「クリック」して「ドラッグ」すれば画像は移動できます。
 こういう処理はHTML、スクリプトでは無理だと思う。
 どうやって三角形(結構大きい?)の中の画像を判断するか、それができそうにない。
 なぜ三角形なんですか?。
 三角形の中が画像1つと限られているなら可能かも。MAP要素のAREAのhref属性の内容が固定するから。でも三角形の枠からマウスカーソルがはみ出た場合は処理不能。座標をそのつど計算しなければならない…つまりマウスカーソルがどこにあるかを常に監視しなければならない。三角形の範囲をどうやって把握するか。難しい。
 数学的?座標計算…三角形の中にマウスカーソル(X,Y)が存在するか否かがわかれば可能かも。

▲このページのトップに戻る
410419Re:JavaScriptのonClickについてしん 2007/06/15-10:08

記事番号410185へのコメント
テツヤさんは No.410185「Re:JavaScriptのonClickについて」で書きました。
テッヤさん有難うございました。

MAP要素のAREAの・・・・この部分は参考になりました。
基本的には可能かと思います。
下記のHTMLを参考にして下さい。

(1)之で三角形の辺の中だけにonClick反応を限定する事が出来ます。
(2)普通、三角形を囲む四角の領域全部で反応しますが、辺の外側では反応しません。
分かり易いように「border="1"」を付けて有ります。

関連質問なのですが、こんな事は可能でしょうか??
(1)このgifフアイルは三角形の辺の外を透明にして有ります。
(2)また、上記の3角図形の下に4角の図形が有ります。
(3)2つの図形が重なった場合、三角形の透明部分より、下の図形が見えます。
(4)この透明部分をクリックした場合、下の4角の図形をonClick出来ませんか?

要は「重なった図形の下の図形を選択出来ませんか?」です。
無理でしょうか・・・

<html lang="ja" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<title>移動</title>
<SCRIPT language="JavaScript1.1" type=text/javascript>
<!--
var flag = false;
var myLeft;
var myTop;
var dx,dy;

function dragOn(n){
flag = true;
myLeft=parseInt(document.getElementById(1).style.left);
myTop=parseInt(document.getElementById(1).style.top);
dx=event.x-myLeft;
dy=event.y-myTop
}
function dragImg(){
if (!flag) return;
document.getElementById(1).style.left =event.x-dx;
document.getElementById(1).style.top =event.y-dy;
return false;
}
function dragOff(){
if (!flag) return;
flag = false;
}
window.document.onmousemove = dragImg;
window.document.onmouseup = dragOff;
//-->
</SCRIPT>
</head>
<body bgColor="#0000ff">
<div id="1" style="position: absolute;left:0;top:0;" >
<img src="3kaku.gif" border="1" usemap="#Map" style="width:325px;height:282px;" >
<map name="Map">
<area shape="poly" coords="5,278,320,278,165,6" href="#" onMouseDown="dragOn(1)">
</map>
</div>
</body>
</html>

▲このページのトップに戻る
410434修正1_Re:JavaScriptのonClickについてテツヤ 2007/06/15-13:37

記事番号410419へのコメント
 どうやってもダメでした。
 「onclick="return false"」「onclick="event.celBubble=false"」など。
 あと、三角形領域と中の図形は同一でいいんですね?。別物だと思ってました。だから無理と言いました。

A1.本ページは参考になりましたか? 又はアドバイスがありますか?
解決 参考になった 参考にならなかった アドバイスする

A2.何度目の訪問ですか?
初めて来た   数度目(2〜4) 5回以上来ている   管理人:

A3.何か一言どうぞ(アドレスは書くことができません)

A4.アドレスがあればどうぞ(1つまで)


↑↑↑↑よろしければ押してください↑↑↑↑

何か一言(本ページで参考になったならないを含めて残してあります)
◎:解決 ○:参考になった ×:参考にならなかった !:アドバイスあり

参考回数投稿日時何か一言
検索投稿あり2007/07/09-15:08左記[投稿あり]クリックにて検索(逆リンク調査)します同様の質問へのリンクとなっています