忙しい現代人の腰&肩のお悩み対策!

javascript初心者です。

クリッカブルマップにおいて指定area内をクリックすると
画像が差し替えになる状態です。

差し替え後の画像はarea範囲よりも大きい(マップ全体と同一サイズ)なのですが
このarea座標外でクリックして、元画像に戻るようにしたいです。

現在は、area座標内をクリックしないと元画像に戻りません。

■jabascript

function circle01_over(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = 'ロールオーバー後の画像(元画像と同じサイズで一部だけ変えたもの)';
}


function image_out(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = '元画像マップ';
}

function circle01_click(){
var objElement = document.getElementById( '元画像マップ' );
objElement.src = 'クリック後の画像';
}

■html

<img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" />
<map name="Map" id="Map">
<area shape="circle" coords="***,***,***" href="javascript:void(0);" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" />

初歩的な事で申し訳ありません・・・
尚、jQueryも新規リンク(html)も使用不可です。
添付画像のように動作させたいです。
宜しくお願い致します。

「初心者です。クリッカブルマップoncli」の質問画像

このQ&Aに関連する最新のQ&A

A 回答 (2件)

ANo1です。



>クリック後の画像上で元areaの範囲内をさわったりすると
>画像が元areaのロールオーバー時のものが表示されてしまうんです
ホットスポットも含めて違う画像に変わるのでしたら、クリッカブルマップを2セット用意しておいて、それを入替えたほうがわかり易いでしょう。
現状のように同じ画像要素を用いて、参照するマップを入替えてもよいですが、上記のほうがわかりやすいかと。
    • good
    • 0
この回答へのお礼

御礼が遅くなってしまい申し訳ありません。
やはりクリッカブルマップ2枚だてが良さそうですね。
もう少し勉強して、進めたいと思います。ありがとうございました。

お礼日時:2013/07/05 02:45

>このarea座標外でクリックして、元画像に戻るようにしたいです。


添付図で見ると別のareaのようですので、別にareaを定義して、同様の仕組みで画像を元に戻すようにすれば解決すると思いますが…?
    • good
    • 0
この回答へのお礼

ご回答ありがとうございます。

別areaの指定は設定できるのですが、元areaの設定が生きたままなので
クリック後の画像上で元areaの範囲内をさわったりすると
画像が元areaのロールオーバー時のものが表示されてしまうんです。

クリック後の画像は、元areaの範囲をオーバーしたサイズなので
一度クリックするとどこが元areaの範囲かは認識できなくなります。

この元areaの設定内で、別areaの指示もできればと思ったのですが・・・
クリック回数を指定するなどするしかなさそうですね。

お忙しい中、ありがとうございました。

お礼日時:2013/07/01 13:32

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Qイメージマップでマウスオーバーするとポップアップ

いつもお世話になっております。
地図の画像をイメージマップにして、地図の各ポイントをマウスオーバーすると画像が横に出る
というものを作りたいのですが、可能でしょうか?
調べたのですが「イメージマップにマウスオーバーで説明文を出す」や
「リンクにマウスオーバーで画像を出す」というものしか見つかりませんでした。
javascriptオフにも対応するためCSSで実現できないかと考えているのですが方法を教えて頂けませんでしょうか?
宜しくお願いいたします。

Aベストアンサー

「イメージマップにマウスオーバーで説明文を出す」と
「リンクにマウスオーバーで画像を出す」
を組み合わせてみてはどうでしょうか。
(要は area のonmouseoverで画像を出す関数を呼ぶ)

なお、CSSをちゃんと実装したブラウザでならCSSだけでも出来そうですが、
特にIE6あたりが実装していないプロパティを使わないとできないので
現実的にはjavascriptを使うか、全体をFlashで作成するしかないと思います。

Qクリッカブルマップをロールオーバーをしたい!

画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464

ですが、
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')">
</map>
</div>
<div>
<img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map">
<map name="Map4">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')">
</map>
</div>

このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。
ジャバスクリプト初心者の私にはなぜだか全く分かりません。
他の方法(フラッシュなど)もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか?

どうぞよろしくお願いいたします。

画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464

ですが、
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01....続きを読む

Aベストアンサー

<img>のID属性がだぶっているからです。
もっとも単純でおばかな対処方法
<script type="text/javascript">
<!--
function changeMapImage1(url) {
document.getElementById('map1').src = url;
}
function changeMapImage2(url) {
document.getElementById('map2').src = url;
}

//-->
</script>
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map1">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage1('sample_01_02.jpg')" onmouseout="changeMapImage1('sample_01.jpg')">
</map>
</div>
<div>
<img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map2">
<map name="Map4">
<area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage2('sample_02_02.jpg')" onmouseout="changeMapImage2('sample_02.jpg')">
</map>
</div>

<img>のID属性がだぶっているからです。
もっとも単純でおばかな対処方法
<script type="text/javascript">
<!--
function changeMapImage1(url) {
document.getElementById('map1').src = url;
}
function changeMapImage2(url) {
document.getElementById('map2').src = url;
}

//-->
</script>
<div>
<img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map1">
<map name="Map3">
<area shape="rect" coords="26,105,167,131" href="#start" onmouse...続きを読む

QCSSでborderの長さを指定、または可変にしたい。

下記のように指定していますが、これだと横幅いっぱいに下の線が表示されてしまいます。

文字なりの長さ、または指定のピクセル数にしたいのですが、どのようにしたらよいでしょうか。

h3{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

Aベストアンサー

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよければ

<h3><span>××○○</span></h3>
のようにspanで囲い、スタイルをspanに対して指定する方法もあります。

h3 span{
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

borderの長さはそのボックスの大きさですから、ボックスの大きさを指定する事になります。
h3{
width:???px;
border-width : 0px 0px 1px 5px;
border-style : solid ;
border-color : #FF3333;
padding-left : 5px;
}

また、文字数(ボックスの内容)に合わせたい場合は、ボックスを浮動化(float)する等の方法もありますが・・・そのボックスの周りへ影響が出たり、ブラウザ毎にバグや実装の違いなどが比較的多く、扱いが面倒になるのであまりおすすめできません。

HTMLの方も修正する方法でもよけ...続きを読む

Qクリッカブルマップ(イメージマップ)でロールオーバー時に画像を表示

Webデザインを勉強中の者です。

間取り図の各部屋の上にマウスをポイントすると、各部屋の画像を表示させる
というようなことがしたいのですが、検索しても、
なかなかコレといった情報を見つけられずに苦戦しております・・

<map><area></map>で、形状・座標等を指定し、
別ウィンドウで画像を表示させることは出来たのですが、そうではなく、
間取り図上で、マウスをポイントしている間だけ各部屋の画像を表示するようにしたいです。

javascript(jquery)は、まだよく分かりません・・
こんな初心者ですが、こんな方法はどう?もしくは、こんな参考サイトあるよ!
など教えていただけましたら、たいへん有難いです。

OS:Windows7、バージョン:HTML5、エディター:Dreamweaver CCを使用しております。
よろしくお願いいたします。。

Aベストアンサー

これとか。
http://tenderfeel.xsrv.jp/jquery/292/
必要なのは「jquery.js」と「tooltip_jq.js」。
この2つのJSファイルは上記サイトから借りれば良いと思います。

サンプルページ作ってみました。
http://www13.plala.or.jp/torayoshi/sample/index.html

QonClickに複数の関数を挿入する方法

初心者なのですがアニメーションの関数anime1、anime2、anime3を作成し、onClickに下記のように設定しました。
クリックするとアニメーション2つの設定ではは動くのですが、3つ目を設定すると動かなくなります。
通常はこのような設定はしないものなのでしょうか?
教えてください。
よろしくお願いします。
<INPUT type="button" value="START" onClick="anime1(), anime2()">・・・OKです。
<INPUT type="button" value="START" onClick="anime1(), anime2(),anime3()">・・・動きません。

Aベストアンサー

セミコロンでつなぐのが常道ですが、3つ以上なら
別途function化したほうが、可読性が高くなると
思います。

Qforeachで回った数を表示したい

単純な質問ですみません。
====
//getTestlistは別ファイルで定義済み。
<?
$testlist=getTestlist();
foreach($testlist as $test){
?>


<? } ?>
====
例えば↑こんなふうにforeachで$testlistが存在するだけ回したとします。
そのときに何回まわったか?($testが何件あったか?)だけを表示したいのですが、そんなことってできますか?
表示したい位置は<? } ?>の外側にと考えています。
あさってな質問でしたらすみません。
phpVer 4.3

よろしくお願いいたします。

Aベストアンサー

<?
$testlist=getTestlist();
$n=0;
foreach($testlist as $test){
$n++;
?>
<?}?>

<?=$n?>回
とかでよいかと思います。

途中でbreakなどが無ければ
<? echo count($testlist) ?>でも良いかも知れません。

Qonclickで2個指定するには?

例えば、下記のような二つの指定があるします。

function checkd1(){
document.FORM.CHECK1.checked=true
}
function checkd2(){
document.write("テスト");
}

これをonclickで二つとも指定するということはできるのでしょうか?

<a href="#" onclick="checkd1()">ボタン</a>
<a href="#" onclick="checkd2()">ボタン2</a>

を<a href="#" onclick="checkd1(),checkd2()">ボタン</a>としても動いてくれないので、書き直すのではなく、このまま二つを指定したいのですが、どうすればよいのでしょうか?

Aベストアンサー

><a href="#" onclick="checkd1(),checkd2()">ボタン</a>

<a href="#" onclick="checkd1();checkd2()">ボタン</a>

おしいですね。
, ではなく ; なら両方の関数が呼ばれると思います。
(Firefox3とIE6で確認しました。)

なぜ ; かと言うと、
Javascriptの文法で、文の区切りは ; だからですね。

Qクリッカブルマップにツールチップを実装したい

<a class="tooltip"><span>ツールチップ</span></a>
a.tooltip span {
display: none;
}
a.tooltip:hover span {
display: block;
}
上記のようにしてcssだけでツールチップを実装しています。

これを応用して、クリッカブルマップにツールチップを実装したいのですが
<map>
<area shape="rect" coords=",,,"/>
</map>
このようにタグが<a>の場合と異なっており、どのように記述すればよいのかわかりません。

やり方を教えてほしいです。
どうぞよろしくお願いします。

Aベストアンサー

area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。

擬似空間の作り方は、透明gifを 乗せる等です。

.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}

<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透明.gif" alt=""><span>aaa</span></a></div>
</div>

また jquery を使うという 方法もあるとおもいます。
その場合はarea でも いけるとおもいます。コード書き換えは発生すると思いますが。

area には hover をかけることができないので、
画像の上に レイヤーのように 擬似空間を作り、そこに a で指定してあげる方法が
よいと思います。

擬似空間の作り方は、透明gifを 乗せる等です。

.parent{position:relative;top:0;}
.child{position:absolute;top: --;left: --;}
a.tooltip span{display:none;}
a.tooltip:hover span{display:block;}

<div class="parent">
<img src="" alt="この画像はbackgroundにしてもいいかもしれません">
<div class="child"><a class="tooltip" href=""><img src="透...続きを読む

Qjavascript ColorBoxの最大縦幅変更について

javascript ColorBoxの最大縦幅変更について

いつもお世話になります。

ColorBoxは最大縦幅が決まっているようで、一定以上の大きさの内容を入れるとボックス内部にスクロールバーが表示されてしまいます。内容に応じて縦幅を自由に伸縮できるようにしたいのですが、どのようにすればよいかわかりません。

ColorBoxを使用された経験がある方や、JavaScript得意な方見えましたらご教授いただけないでしょうか。

ColorBox
http://colorpowered.com/colorbox/

以上、よろしくお願いいたします。

Aベストアンサー

ColorBoxで画像を表示されているのでしょうか、
ColorBoxのオプションに
width,height,innerWidth,innerHeight,maxWidth,maxHeight
scalePhotos,scrolling
等、表示サイズにかかわるパラメーターが幾つかあります。
ドキュメントの説明は多少わかりにくいので、いくつか実際に
試して見るとよく解ると思います。
単に、widthとheightを100%にして、maxWidth,maxHeightを
指定しなければ、伸縮してスクロールバーが出ないと思うんですけど...

具体的に、これこれの設定をしたけど、なになににならなかった。
みたいな具体的な質問のされ方をしないと、漠然とした聞き方では、
的確な回答は困難でしょう。

QFORMで送信ボタンと戻るボタンを2つつけてそれぞれ遷移先を変えたい

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入力された値を表示する -->
  <INPUT type="submit" name="submit" value="登録"> // c.php に遷移する
  <INPUT type="submit" name="submit" value="戻る"> // a.php に戻る
 </FORM>

● c.php (完了画面)
--------------------------------------------------------------------------------
b.php について質問なのですが、
b.phpにおいて、登録ボタンと戻るボタンを2つつけて、
それぞれ遷移先を変えたいのですが、どうすればいいんでしょうか・・・?
<FORM method="POST" action="c.php">と書いてしまうと、
戻るボタンを押しても戻らずに、c.phpに遷移してしまいますよね??
こういう場合ってJavaScriptとかで遷移先を指定するんですか・・?
もしそうでしたら、JavaScriptがよくわからないので
できればサンプルコード示していただけると助かります・・・。
  

  
以下のような画面を作りたいのですが↓

--------------------------------------------------------------------------------
● a.php (ユーザ情報入力画面) ※フォームに入力する画面
 
 <FORM method="POST" action="b.php">
  <INPUT type="text" name="mail">
  <INPUT type="submit" name="submit" value="確認">
 </FORM>

● b.php (ユーザ情報入力確認画面)※フォームに入力された値を表示する画面

 <FORM method="POST" action="c.php">
  <!-- ここには、フォームに入...続きを読む

Aベストアンサー

はじめまして。

<INPUT type="submit" name="submit" value="登録" onClick="form.action='c.php';return true">
<INPUT type="submit" name="submit" value="戻る" onClick="form.action='a.php';return true">

でいいと思います。(実際、このコードで使っています)
値を渡すには、FORM内にhiddenで、値を設定しておいて、methodをPOSTに設定しておけば、渡せます。


このカテゴリの人気Q&Aランキング