- ベストアンサー
クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化する処理
- クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。
- 画像は切り替わるが所定の場所に画像が移動しない問題があります。
- 解決策が見えておらず、JQueryの有効なライブラリについてのご紹介をお願いいたします。
- majunian
- お礼率54% (6/11)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
ご質問文を読んでも何をなさりたいのかよくわかりませんが、 とりあえず、ご提示のコードを見ると ・同じ#clickmap1要素に似たようなイベントを複数設定していますが、確か 実行順序は不確定のはずなので、最後に何が表示されるのか不明。 （順序を期待するのなら、最後のものだけ記述すれば足りる） ・少なくとも、$(document)ready～～を繰り返し記述する必要はなさそう。 ・一度しか実行しないイベントのようなので、one()の方がふさわしそう。 （他にコードがあるのか不明なので、違うかも知れませんが） ・下の説明文とコードの関係がまったくわからない。 などの点が気になりました。 ＞格子の画像で説明すると、クリックで出現する赤の四角が、 ＞格子の左上から右下に移動してくれないといった感じです。 という文章だけからかってに想像したサンプルを。 （勝手な想像なので、参考にもならないでしょうけれど…） クリッカブルマップも使っていませんし。 （全角空白は半角に） <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"> <html lang="ja"> <head><title>test</title> <meta http-equiv="Content-Style-Type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <style type="text/css"> <!-- div.test{ position:absolute; width:500px; height:300px; } div.test div{ width:98px; height:98px; background-color:#ccc; float:left; border:1px solid #eee; border-right-color:#666; border-bottom-color:#888; } div.test div.movable{ clear:left; position:absolute; cursor:pointer; } div.test div.rect1{ top:0px; left:0px; background-color:#eaa; } div.test div.rect2{ top:0px; left:400px; background-color:#aae; } //--> </style> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery","1.5.0");</script> <script type="text/javascript"> <!-- $(function(){ $("div.test div.movable").css("opacity", 0) .click(function(){ move.call(this); }); }); function move(){ var elm = $(this); if(elm.hasClass("active")) return; var x = parseInt(elm.css("left"))==0?400:0; var y = parseInt(elm.css("top"))==0?200:0; elm.addClass("active") .animate({opacity:1}, {duration:1000, complete:function(){ elm.animate({top:y, left:x}, {duration:1000, complete:function(){ elm.animate({opacity:0}, 1000, function(){ elm.removeClass("active"); }); }}); }}); } //--> </script> </head> <body> <div class="test"> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> <div>10</div> <div>11</div> <div>12</div> <div>13</div> <div>14</div> <div>15</div> <div class="movable rect1">moving rect 1</div> <div class="movable rect2">moving rect 2</div> </div> </body> </html> ＊カーソルの変わる部分がクリックの対象（最初は左上と右上） ＊当初は移動をtoggleで記述していたのですが、どうもtoggleは連打クリックをするとおかしな動作になるみたいなので、clickに書き直しました。ほとんど意味のないサンプルなので、ご質問・ご要望は無しに。 ＊なぜかIEとfxで2ピクセルずれないみたい…？
お礼
ご回答ありがとうございました。 画像が上手く貼り付けられず、言葉だけで挙動を説明するのは困難でした。 説明下手で申し訳ありませんでした。 一応希望していた動作は実現できましたので、 ベストアンサーをもって、お礼と替えさせて頂きます。 ありがとうございました