クリックでクリッカブルマップの色が変化する処理
クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。
過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。
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のライブラリなどございましたら、ご紹介頂けると幸いです。
よろしくお願いいたします。
ご教授のほど、よろしくお願いいたします。
補足
アドバイスありがとうございます。 最初にloadを使いましたが動きませんでした。 ずっと調べてはいますが、クリックしてから 動くものしか見つからないのでどうすれば いいのか教えていただけますでしょうか。