• 締切済み

ドラッグできる画像

こんにちは。２回目の質問です。 またJavaScriptについての質問なんですが、 HTMLページに画像が複数あって、マウスで自由にドラッグして好きな場所に配置したいです。これはHPで解説してくれているページを見つけたんですが、ちょっと違います。 どこが違うかというと、画像の重なり具合が調節できないこと。参考までにつぎのHPをみてください。（注：ポップアップの広告が出ます） http://holden.hp.infoseek.co.jp/sample/c_img5.html ここのお地蔵さんは、招き猫の上に表示することはできません。ただしドラッグしている間は別ですが。 このお地蔵さんと招き猫のようにドラッグで移動できて、さらに画像の上下（前後）をマウスクリックで変えるようにするにはどうしたらいいでしょうか? また２つ以上の画像を配置したい場合はどうしたら良いですか? JavaScriptの記述は私が参考に出したHPのもの意外でもかまいません。できればJavaScriptの記述を書いてほしいです。 お願いします。

みんなの回答

  • todo36
  • ベストアンサー率58% (728/1234)
回答No.1

moveAboveかな

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ドラッグして矩形を描くには

    JavaScriptを用いて開発を行っています。 行いたいことは、画像の上でマウスをドラッグすると矩形が表示されるというものです。 矩形を描くことによって、選択範囲を取得したいと考えています。 Flashを用いることも考えたのですが、できればjavascriptで対応できればと考えております。 よろしくお願いいたします。

  • インラインフレームをドラッグ可能に

    １ページ内に複数のインラインフレームを配置し、各フレームにドラッグを行うハンドル（マウスポインタでつかむところ）を付加して、ドラッグ可能にしたいです。 例えば、１ページにGoogleとYahoo Jのトップページのフレームを表示、各フレームにウインドウのタイトルバーのようなものを付け、ドラッグ可能なページを作りたいです。 特にライブラリの有無や種類にこだわりません。 どのようにすれば作れるでしょうか？

  • jqueryを使い、画像のみドラッグ＆ドロップを禁

    現在、画像のみ右クリック禁止しています。 $(function(){ $('img').on('contextmenu',function(e){ return false; }); }); しかし、ドラッグしてデスクトップに保存ができてしまいます。 これを防ぐ記述方法を教えて下さい。

  • 画像をランダムに表示させマウスを重ねるとさらに切り替わる方法

    今ＨＰを作成しているんですが、題名の方法が知りたいです。 JavaScriptを使って画像をランダムに表示させる方法ありますよね。 <script language="javascript"> <!-- //ランダムに画像を表示 img = new Array(); img[0] = "画像1"; img[1] = "画像2"; img[2] = "画像3"; n = Math.floor(Math.random()*img.length); document.write("<img src='"+img[n]+"'　border='0'>"); //--> </SCRIPT> それとマウスを重ねると画像が変わる onmouseover="this.src='画像4'" onmouseout="this.src='画像5'" というタグありますよね。 2つのタグを組み合わせてランダムに表示された画像に マウスを重ねると画像がかわるということがやりたいのですが JavaScriptの知識があまりないためわかりません。 この方法は可能でしょうか？ もしくは他の方法あるでしょうか？ ランダムに表示される画像は３枚と仮定し、 それぞれ３枚の画像はマウスを重ねるごとに 違う画像を表示させたいと思っています。 解決法をわかるかたがいらっしゃったら よろしくお願い致します。

    • ベストアンサー
    • HTML
  • 画像をクリックして別の画像を表示させたい

    現在HPで親ページから、サブウインドウで画像を表示させるアルバムを作っています。 そのサブウインドウをクリックすると別の画像を表示させたいと思い、下記のように記述したのですが、画像がまったく変わりません。 （下記のページはalbum01です。クリックしたら album02を表示させたいと思っています。） ----------------------------------------------- HEAD部に記述 <script language="JavaScript"> <!--num=0; function change() {num++; num %= 5; document.myIMG.src = "../img/album02.jpg"; } // --></script> BODY部に記述 <body> <table width="300" border="0" cellspacing="2" cellpadding="0"> <tr> <td> <a href="javaScript:change()"> <img src="../img/album01.jpg"name="album01"border="0"></a></td> </tr> <tr> <td> <div align="center">□画像をクリックすると、次の画像も見られます□</div> </td> </tr> </table> <div align="center"></div> </body> -------------------------------------------- 写真は全部で５枚です。今後増やしていきたいと思っています。 javascriptのことはわからないので、どこがどう間違っているのかわかりません。 表示されるようにするにはどのようにしたらいいですか？ 使用OSはWin98、ブラウザはIE6.0です。 よろしくお願いします。

  • AS3のbuttomModeは、Loaderで読み込んだ画像には適用で

    AS3のbuttomModeは、Loaderで読み込んだ画像には適用できないのでしょうか？ お世話になります。AS初心者です。 XMLから外部画像のURLを取得して、ステージに配置しているのですが、その際、その画像にリンクをはっています。これ自体はまったく問題なく動いているのですが、リンクなのでマウスカーソルを「指」の形にしたいと思い、読み込んだ画像に対して「buttonMode=true」を設定しています。ところが、思うようにマウスカーソルが変化しません。（参考までにコードを下に示します） Loaderで読みこんだ状態では、buttomModeは使えないのでしょうか？　ヒントだけでも構いません、どなたかお知恵をお貸しください。m(__)m //ロード用のオブジェクトを作成しています。 var img:Loader = new Loader(); //XMLから画像のURLを読み込んでいます。 //myXMLはここより前の段階でxmlファイルを読み込んでいます。 var imgURL:URLRequest = new URLRequest(myXML.data[0].image); //イメージのロード開始 img.load(imgURL); //座標を指定 img.x = 100; img.y = 100; //マウスイベントを設定してリンクを設定しておく //imgClickは別の個所でnavigateToURLで、 //リンクをするように記述しています。 img.addEventListener(MouseEvent.CLICK, imgClick); //マウスモードをtrueにします。 img.buttomMode = true; //ステージに配置します。 addChild(img);

    • ベストアンサー
    • Flash
  • 画像拡大のみにする場合は。

    こんにちは。はじめまして。 質問致しますどうか宜しくお願い致します。 HPでの画像画像を拡大の方法はわかりましたが 拡大して縮小もして繰り返し、してしいます。 参考にしましたのは下記のHPです。 http://www.wind.sannet.ne.jp/alfix/javascript/img/5.html このプログラムを縮小～画像拡大だけで1回のみで 大きくなった画像を繰り返さずか止まるようにしたいのですが どのように改善すれば宜しいでしょうか？ 詳しい方是非宜しくお願い致します。

  • 画像の表示につきまして

    こんにちは。お世話になります。 　画像の表示について伺いたいことがございます。 　現在、HPを作成しています。そこには、横並びで三つの画像を配置しています。 　しかし、そのHPをいつ開いても、表示されるのは一番左の画像のみで、真ん中と右の画像は表示されません。 　ただし、マウスポインタを当てると、真ん中の画像も右の画像も表示されるようになり、以降は、画像が消えるような事はないのですが、その後、そのHPを閉じて、また開くと、同じように真ん中と右のみ表示されません。 　インターネットオプションの「画像を表示する」にも、きちんとチェックが入っていますし、他のPCで開いても同様の結果になります。 　こういう場合、どういった不具合が考えられるでしょうか。また、改善方法はありますでしょうか。 　因みに、下記のようなタグを使っており、マウスオーバーすると画像が切り替わるようにしてあります。 <p class="img"><a href="http://●●●"><img width="235" height="120" onmousedown="this.src='http://●●●/img1.jpg'" onmouseout="this.src='http://●●●/img1.jpg'" onmouseover="this.src='http://●●●/img1_on.jpg'" alt="画像" src="this.src='http://●●●/img1.jpg'" / border="0"></a></p> 　windowsXP IE6.0を使っております。 　皆様、お忙しい中恐れ入りますが、ご教示下さい。宜しくお願い致します。

    • ベストアンサー
    • HTML
  • HP作成（MicrosoftExpression)

    HP作成（MicrosoftExpression)を使われている方おられましたら教えてください。 無償で使える、HP作成ソフトとして、MicrosoftExpressionを紹介いただき、 無償ダウンロードで使っております。 簡単なHP作成で、文章、写真のみ貼り付けたページを作っておりますが、 配置をドラッグなどで決めずらく（単なるマウス操作） せっかく作ったあと、プレビューで見ても、文章と写真が重なっていたりしてやり直し などしております。（プレビュー意識で、配置を再検討） かなり、この重なり（ずれ）が大きく使い物にならないレベルです。 別途入力方法など改善方法があれば、ご教授いただけないでしょうか？

  • マウスオーバーイベントで画像表示

    こんにちわ。 JavaScriptについて質問があります。 あるリンクの上にマウスを重ねると、テーブルのある場所にイメージを表示させることはJavaScriptで可能でしょうか？ やりたい事としては、リンク部分にマウスを重ねると、そのリンクの説明を記した画像をテーブル中に表示させたいと思ってます。 ネットを探しまくったのですが、参考になりそうなページが無かったので質問してみました。 参考になるページでも構いませんので、知っている方がいらっしゃったら宜しくお願いします。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する