JavaScriptのonClickについて



パソコントラブル解決・過去ログTOP  >  ログTOP

 ◇-?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の時、反応範囲を制御出来ませんか。

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

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


▲このページのトップに戻る
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>
》
>（１）三角形の画像を作成し、保存した場合、フアイルとしては三角形を囲む
>四角のサイズで保存されます
　この意味がわからない。画像を右クリックで「名前を付けて保存」のこと？。

　画像の移動に関しては、こちらを参考に。
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フアイルとし場合です。

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

上記の場合で（２）は出来ないようにしたいわけです。

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



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

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

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

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

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

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

関連質問なのですが、こんな事は可能でしょうか？？
（１）このgifフアイルは三角形の辺の外を透明にして有ります。
（２）また、上記の３角図形の下に４角の図形が有ります。
（３）２つの図形が重なった場合、三角形の透明部分より、下の図形が見えます。
（４）この透明部分をクリックした場合、下の４角の図形を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"」など。
　あと、三角形領域と中の図形は同一でいいんですね？。別物だと思ってました。だから無理と言いました。

パソコントラブル解決・過去ログTOP  >  ログTOP  >  JavaScriptのonClickについて

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

A2.何度目の訪問ですか？
初めて来た　　　数度目(２～４)　５回以上来ている　　 管理人:

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

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


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

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

参考回数投稿日時何か一言
検索投稿あり2007/07/09-15:08左記[投稿あり]クリックにて検索(逆リンク調査)します同様の質問へのリンクとなっています
(社)日本お助け隊
人間関係のトラブルの相談にのります。
電話相談無料。
和魂カウンセラー認定講座
和魂カウンセラー認定をしています。
全国イベントスケジュール
イベントが登録でき申込みできます。無料。