クリッカブルマップを使用して、特定の場所をクリックしたら色と場所が変化するようなものを作成したいと思っております。
過去の質問も参考にさせて頂いたのですが、思うように作動してくれないので、質問を立てさせて頂きました。
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のライブラリなどございましたら、ご紹介頂けると幸いです。
よろしくお願いいたします。
ご教授のほど、よろしくお願いいたします。
No.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ピクセルずれないみたい…?
ご回答ありがとうございました。
画像が上手く貼り付けられず、言葉だけで挙動を説明するのは困難でした。
説明下手で申し訳ありませんでした。
一応希望していた動作は実現できましたので、
ベストアンサーをもって、お礼と替えさせて頂きます。
ありがとうございました
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
このQ&Aを見た人はこんなQ&Aも見ています
関連するカテゴリからQ&Aを探す
おすすめ情報
このQ&Aを見た人がよく見るQ&A
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
Colorboxがうまく設置できません
-
交互に入れ替わる画像を複数配置
-
枠より大きな画像を部分的に表...
-
MAX関数を使ってからLEFT JOIN...
-
jqueryのsortableで一部ソート...
-
createElementで作成した要素を...
-
変数内容をHTML内で表示する方法
-
指定したパスが現URLに含まれて...
-
読み込んだQRコードをフォーム...
-
CSS <div>の入れ子が反映さ...
-
JavaScriptで変更した属性の元...
-
qtipの使い方について
-
css固定したフッターが本文と重...
-
jQuery FlexSliderのカルーセ...
-
フッター上部に謎の隙間
-
getElementByIdの戻り値がnull...
-
jqueryで要素の中身を要素の外...
-
Slick.jsのオプションrtlについて
-
JavaScript スライドの画像にリ...
-
JavaScriptで、?マークとコロ...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
デフォルト非表示にしたい。【t...
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
jQueryでのドラッグアンドドロ...
-
bxsliderで最初に縦に複数表示...
-
Javascript初心者|jQueryの.va...
-
アップロードファイルの種類に...
-
画像マウスオーバーで、checkb...
-
複数bxsliderをタブで切り替え...
-
サムネイルにカーソルを合わせ...
-
JavaScriptでの画像切り替えを...
-
時間差で画像を動作させたいjav...
-
「画像クリックで音声再生」を ...
-
JavaScriptでクレイアニメ。ち...
-
マウスオーバーにて画像に虫眼...
-
JavaScript/CANVASでの画像読込...
-
クリックでクリッカブルマップ...
-
JQueryでオープニングアニメー...
-
交互に入れ替わる画像を複数配置
-
VBAでIEを動かす場合、下記の①...
おすすめ情報