クリックでクリッカブルマップの色が変化する処理

解決済

質問者：majunian
質問日時：2011/09/14 09:10
回答数：1件

クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。
過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。
HTML JQueryコードを下記に記します。

<HTML>

<div id="click">
<img src="../../Images/kousi2-0.png" usemap="#sikaku" width="400px" height="400px" alt="map" class="metermap"/>
<map name="sikaku">
<area shape="rect" coords="19,22,89,91" alt="map1" id="clickmap1" />
<area shape="rect" coords="94,22,161,91" alt="map1" id="clickmap2" />
<area shape="rect" coords="166,22,235,91" alt="map1" id="clickmap3" />
</map>
</div>

<JQuery>

//クリッカブルマップの切り替え処理

$(document).ready(
function () {
$("#clickmap1").click(function () {;
var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-1.png");
$("#click img").attr("src",onsrc);
});
});

$(document).ready(
function () {
$("#clickmap1").click(function () {;
var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-2.png");
$("#click img").attr("src",onsrc);
});
});

$(document).ready(
function () {
$("#clickmap1").click(function () {;
var onsrc = $("#click img").attr("src").replace("..Images/kousi2-0.png","../Images/kousi2-3.png");
$("#click img").attr("src",onsrc);
});
});

これで画像は切り替わるのですが、所定の場所に画像が移動してくれません。
今使用している格子の画像で説明すると、クリックで出現する赤の四角が、格子の左上から右下に移動してくれないといった感じです。
replaceで置き換えているだけなので、その場所しか切り替わらないのは当然ですが、
解決策が見えてきません。

有効なJQueryのライブラリなどございましたら、ご紹介頂けると幸いです。
よろしくお願いいたします。

ご教授のほど、よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： fujillin
回答日時：2011/09/14 20:03

ご質問文を読んでも何をなさりたいのかよくわかりませんが、

とりあえず、ご提示のコードを見ると
・同じ#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">

</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">

</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ピクセルずれないみたい…？