- 締切済み
jqueryを使い、画像のみドラッグ＆ドロップを禁
現在、画像のみ右クリック禁止しています。 $(function(){ $('img').on('contextmenu',function(e){ return false; }); }); しかし、ドラッグしてデスクトップに保存ができてしまいます。 これを防ぐ記述方法を教えて下さい。
- morinokoe
- お礼率13% (23/165)
- JavaScript
- 回答数1
- ありがとう数5
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- fujillin
- ベストアンサー率61% (1594/2576)
透明画像等でマスキングしておくくらいでしょうか。 でも、いずれにしろ表示している時点でキャッシュには残りますし、ダイレクトに表示したりあるいはページを保存することでも誰でも簡単に保存できてしまいますが…… 画像のURLを暗号化したり、画像データ自体を暗号化して、解凍用のスクリプトも暗号化するなどしておけば、少しは保存しにくくはなるとおもいますけれど。
関連するQ&A
- jQueryで右クリック禁止後に再度有効にする方法
以下のコードでブラウザ上の右クリックを禁止にしましたが、 再度再開をしたい場合どのように記述すればよろしいのでしょうか？ $(document).bind('contextmenu', function(e) { return false; }); jQueryのverが古いのは気にしないで下さい。 是非宜しくお願い致します。
- ベストアンサー
- JavaScript
- ｊQueryでシンプルドラッグドロップがまずい
Javascript,jQuery初心者です。主にWINDOWS7、GoogleChrome使用です。 ｊQueryでシンプルなドラッグドロップ自作をやってみました。 <!DOCTYPE html> <html> <head> <meta carset="utf-8"> <script src="js/jquery-1.11.0.min.js"></script> <style> #chr{ position:absolute; left:100px; top:100px; } </style> <body> <div id="msg"></div> <div id="chr"> <img src="parts/usl470.jpg"> </div> <script> dragflg=false; $("#chr").mousedown(function(){ dragflg=true; $("#msg").html("on")}) .mouseup(function(){ dragflg=false; $("#msg").html("up")}); $(window).mousemove(function(e){ if(dragflg) { $("#chr").css("left",e.clientX-20+"px") .css("top",e.clientY-20+"px"); } }); </script> </body> </head> </html> mousedown、mouseupの検出を確認するために、隅にon、upと表示するようにしてあります。 思惑通り、押すとon、離すとupが表示されますが、ドラッグドロップした後は、離している状態のupになってくれず、押さずに動かしても#chrはついてきてしまいます。まともなドラッグドロップと違い、もう１回クリックでやっと離してくれる、という具合です。 #chr上でボタンを離している時はそれを検出するんじゃないのか？と思ってしまうのですが、ついでに、ドラッグ動作自体も、移動禁止マークが出てちょっとおかしいし、詳しい人はどうやってこういう症状を回避してドラッグドロップの動作を実現しているのでしょうか？ ネットで見て回って参考にしようにも、短くてシンプルなjQueryのドラッグドロップのサンプルが見つからず、ここで何が間違いなのか意見を仰ごうと思ったものです。手っ取り早くｊQueryUIを導入すれば、やりたいこと自体は出来るんでしょうけど、ボタン離していても検出できないのが何なのかは、すっきりしておきたいと思いました。どうかよろしくお願いします。
- ベストアンサー
- JavaScript
- jqueryについて
jqueryについて こんな内容のjqueryをひとつにまとめて、なおかつ01～99（実績数）までのidを割り振る設定したいのですが可能でしょうか？ 例えば $(function(){ $("#navi01-99 a").click(function(){ $("#main01-99 img").attr("src",$(this).attr("href")); return false; }); みたいな感じであとはidに番号を付ければいいみたいな・・・出来ませんでしょうか？ 用途は仕事の制作実績で使用したいのですが、どなたか教えていただけますでしょうか？ $(function(){ $("#navi01 a").click(function(){ $("#main01 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi02 a").click(function(){ $("#main02 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi03 a").click(function(){ $("#main03 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi04 a").click(function(){ $("#main04 img").attr("src",$(this).attr("href")); return false; }); }); $(function(){ $("#navi05 a").click(function(){ $("#main05 img").attr("src",$(this).attr("href")); return false; }); });
- ベストアンサー
- AJAX
- フレームでの右クリック禁止
フレームを使って、画面を分割しているのですが、単体のHTMLを開くと次に示すJavascriptで右クリックが出来なくなりますが、フレームにしてしまうと、出来なくなってしまいます。 フレームにしても右クリックを禁止するには、どうしたらよいでしょうか？ ご教授ください。よろしくお願いします。 <script language="JavaScript" type="text/javascript"> <!-- function contextmenu() { alert("右クリックは、使用できません。"); return false; } document.oncontextmenu = contextmenu(); --> </script>
- ベストアンサー
- JavaScript
- 画像をクリックしたときに右クリック禁止を発動したい
Bodyタグなどに「oncontextmenu=return false」と書くと、右クリックを禁止できますが、最初から右クリックを禁止するのではなく、ある特定の画像をクリックしたときに発動させたいのですが。 それを例えばダイナミックHTML（？）的に「<img src="xxx.jpg" onmousedown="document.body.background='壁紙'">」のようなやり方を応用して、「oncontextmenu=return false」を発動できないか試してみましたが、（文法を根本的に知らないので）どうも上手く出来ません。 （※<img src="a.jpg" oncontextmenu=return false>と書けば、その画像の右クリックだけは禁止できますが） Javaスクリプトを使えばこのコントロールが可能かと思いますが、もしこの「onmousedown="document.body.background='壁紙'"」レベルの単純な指示で、右クリック禁止が発動できる方法が何かございましたら、お教えいただければ幸いです。 （※右クリック禁止をさせても、結局のところソースを見られたりするのを禁止する事は出来ない、というのは知っています。そういう内容の質問ではありません）
- ベストアンサー
- HTML
- jqueryの質問。
毎回、お世話になります。 jqueryを使ってリンク文字をクリックすると画像が変更できるようにしたいのですが、 上手くいきません。 <HTML> <body> <ul> <li><a href="DSC_0014.jpg">a</a></li> <li><a href="kamen.jpg">b</a></li> <li><a href="irumi.jpg">c</a></li> </ul> <p><img src="DSC_0014.jpg" width="1000" height="671"> <SCRIPT> $(function(){ ("a:eq(0)").click(function(){ $("img").attr("src","DSC_0014.jpg").attr("alt","人物"); return false }); $("a:eq(1)").click(function(){ $("img").attr("src","kamen.jpg").attr("alt","仮面"); return false }); $("a:eq(2)").click(function(){ $("img").attr("src","irumi.jpg").attr("alt","イルミ"); return false }); }); このコードだとリストa,b,cをクリックすると別ページに画像が表示されます。 その場での画像切り替えをしたいのですが、どこが間違っているのでしょうか? 宜しくお願い致します。
- ベストアンサー
- その他（プログラミング・開発）
- jqueryで、後から追加した画像もドラッグ&ドロップできるようにした
jqueryで、後から追加した画像もドラッグ&ドロップできるようにしたい 以下のようにして、画像をドラッグ&ドロップできるようにしています そこに、新たに画像をアップロードして、その画像もドラッグできるようにするところで詰まってしまいました アップロードする時に画面遷移を起こしたくなかったので、インラインフレームを使っています upload.phpでアップロードされた画像を取得して、divタグのクラス名を指定したりしてappendChildで親フレームに挿入 しかし、画像が表示されはするのですがドラッグしようとしても何も起こらない状態です Firebugでも見てみると、元の画像は <div class="dragArea ui-draggable"><img src="./img0.jpg" width="100" height="100"></div> となっていますが、アップロードした画像(新規追加した要素)は、 <div id="adddragfile"><div class="dragArea"><img src="././tmp/newimg.jpg" width="100" height="100"></div></div> となっていて、ドラッグ属性が付いていないように思えます よろしくお願いします /* include.php */ //ドラッグ可能な画像 <div class='dragArea'><img src='./img0.jpg' width='100' height='100'></div> //ここにタグを追加していく <div id='adddragfile'></div> //ドロップ先となる画像 <div class='dropArea'><img src='./img1.jpg' width='300' height='300'></div> <div class='dropArea'><img src='./img2.jpg' width='300' height='300'></div> //ファイルのアップロード <iframe title='upload_frame' name="upload_frame" style="display:none"></iframe> <form action="./upload.php" method="post" enctype="multipart/form-data" target="upload_frame"> <input type="hidden" name="max_file_size" value="1000000"> <input type="file" name="upload_image"> <input type="submit" value="画像アップロード"> </form> /* jqueryファイル */ $(function(){ $(".dragArea").draggable({ cursor:'move', helper:'clone' }); $(".dropArea").droppable({ drop:function(e,ui){ alert("ドロップされました"); } }); }); /* upload.php */ <?php $upload_dir = './tmp/'; $filename = $_FILES['upload_image']['name']; move_uploaded_file($_FILES['upload_image']['tmp_name'], $upload_dir.$filename); ?> <script type="text/javasscript"> //親フレームのオブジェクトを取得 var container = parent.document.getElementById('adddragfile'); //要素を作成していく div = parent.document.createElement('div'); div.className = "dragArea"; image = parent.document.createElement('img'); image.src = './<?php print($upload_dir.$filename);?>'; image.width = "100"; image.height = "100"; container.appendChild(div); div.appendChild(image); </script>
- ベストアンサー
- JavaScript
- ある条件の画像のみ表示を切り替える
jqueryでメニューのように並んでる画像に対してクリックさせるとクリックしたものに対してclass属性にcurrentというものを入れるようにしています。 $("#localSide h2 img").click(function(){ if($(this).attr("class") != "current"){ $("#localSide h2 img").removeClass("current"); $(this).addClass("current"); }else{ return false; } }); そのときにclass="current"となっている画像のみ(<img class="current"～>)にsrcの値を切り替えたいのですがどのような記述をすればいいのでしょうか。 以下のようなイメージです。 <img src="images/menu/bottun_off.gif"> ↓ <img class="current" src="images/menu/bottun_on.gif"> もし、imgにcurrentというclass名を持っていたら、その画像のsrc属性の値の_off.を_on.に差し替えるというようにしたいのですが、その画像の指定がうまくいきません。本当に困ってます。よろしくお願いします。
- ベストアンサー
- AJAX
- フォトッショップエレメント３．０にて、画像がドラッグ＆ドロップできません。
（フォトショップエレメント３．０にて）白紙ファイルに画像を取り込みたいのですが、あるＧＩＦファイルを開き下の欄の最初に開いた白紙ファイルにドラッグ＆ドロップしようとしたら出来ませんでした。そのＧＩＦファイルは、移動は出来ますが新規レイヤーを作成する事ができないんです。ネット上で右クリックして保存した画像だからでしょうか？よくわかりません。教えて下さい。また白紙ファイルに画像を取り込むにはワードでいうところの挿入から取り込むみたいな方法はないのでしょうか？いつも最初に白紙ファイルを開く→取り込みたいファイルを開き白紙ファイルにドラッグ＆ドロップする方法をとっています。とても困ってます。よろしくお願いします。
- ベストアンサー
- その他(ソフトウェア)
- 動画上での右クリック禁止について
右クリックを禁止するJavaScriptを外部ファイルに 書いて、動画のプロパティなどが見づらいように したいと思っているのですが、うまくいきません。 oncontextmenuを無効にする形で、 HTMLや画像の上では、右クリックを無効にできたのですが、埋め込んだWindowsMediaplayerの動画の上で 右クリックをすると、普通にcontextmenuが出てきて しまいます。 どのようにしたら、動画ファイル上での右クリックを禁止にすることができるでしょうか？ どなたか教えてください。よろしくお願いします。 外部JSファイルに書いた内容は、下記のとおりです。 function DisableOnContextMenu(ev) { return false; } function DisableContextMenu(ev) { if (ev) { if (ev.button && ev.button == 2) { // W3C DOM2 return false; } else if (!ev.button && ev.which == 3) { // N4 return false; } else if (navigator.platform.indexOf("Mac")!=-1 && navigator.appName == "Netscape") { return false; } } else { if (event && event.button && event.button == 2) { // IE return false; } } } if (navigator.appName == "Netscape" && !(navigator.platform.indexOf("Mac")!=-1)) { document.captureEvents(Event.MOUSEDOWN); } document.onmousedown=DisableContextMenu; document.oncontextmenu=DisableOnContextMenu;
- 締切済み
- JavaScript
