画像の指定範囲でのポップアップについて
- １枚の画像の中に複数のクリック個所を設け、それぞれ違う画像をポップアップさせる方法について教えてください。
- No.1266995で締め切った質問です。
- JavaSciptを使用して、ポップアップウィンドウを開くことができます。
- ベストアンサー
画像の指定範囲でのポップアップについて
No.1266995で締め切ってしまったのですが、１枚の画像の中に複数のクリック個所を設け、それぞれ違う画像をポップアップさせたいのですが、うまくいきません。どう修正したらよいのでしょうか。2度世話をお掛けしてすいません。 <head> <script Language="JavaScript"><!-- function openWin() { window.open("image/画像１.jpg","Sample","width=320,height=240"); window.open("image/画像２.jpg","Sample","width=320,height=240"); } // --></script> </head> <body> <img src="元画像.jpg" usemap="#myMAP"> <map name="myMAP"> <area shape="circle" coords="130,182,10" href="javaScript:openWin()"> <area shape="circle" coords="170,170,10" href="javaScript:openWin()"> </map>
- mantenbosi2
- お礼率40% (4/10)
- ホームページ作成ソフト
- 回答数2
- ありがとう数1
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
おはようございます。 >更に数件とかなった場合は、数字を２、３、４、５・・・・と振っていけば良いのでしょうか。 その通りです。 数字も揃えた方がわかりやすかったですね。 <head> <script Language="JavaScript"><!-- function openWin1() { window.open("image/画像１.jpg","Sample","width=320,height=240"); } function openWin2() { window.open("image/画像２.jpg","Sample","width=320,height=240"); } function openWin3() { window.open("image/画像３.jpg","Sample","width=320,height=240"); } // --></script> </head> <body> <img src="元画像.jpg" usemap="#myMAP"> <map name="myMAP"> <area shape="circle" coords="130,182,10" href="javaScript:openWin1()"> <area shape="circle" coords="170,170,10" href="javaScript:openWin2()"> <area shape="circle" coords="***,***,10" href="javaScript:openWin3()"> </map> ↑のように3とすればOKです。4,5,6も同じ。
その他の回答 (1)
- gaviru44
- ベストアンサー率56% (95/168)
こんばんは。 <head> <script Language="JavaScript"><!-- function openWin() { window.open("image/画像１.jpg","Sample","width=320,height=240"); } function openWin1() { window.open("image/画像２.jpg","Sample","width=320,height=240"); } // --></script> </head> <body> <img src="元画像.jpg" usemap="#myMAP"> <map name="myMAP"> <area shape="circle" coords="130,182,10" href="javaScript:openWin()"> <area shape="circle" coords="170,170,10" href="javaScript:openWin1()"> </map> <head>～</head>内の二つ目のfunction openWin()のところをfunction openWin1()に変える <body>～</body>の二つ目のjavaScript:openWin()">をjavaScript:openWin1()">に変える で、いけると思います。
補足
これが、更に数件とかなった場合は、数字を２、３、４、５・・・・と振っていけば良いのでしょうか。 よろしくお願いします。
関連するQ&A
- javascriptでのポップアップウィンドウが開かなくて困っています＞＜
初歩的な質問ですいません。 <script language="JavaScript"> <!-- function OpenWin(){ win=window.open("sample.html","new","width=100,height=100"); } //--> </script> <a href="javascript:OpenWin()"><img src="img/1.jpg" width="60" height="60" onClick="MM_openBrWindow('sample.html','sample','scrollbars=yes,width=460,height=460')" border="0"></a> 上のスクリプトで下のリンクで開こうとする時に、 どうしても開けません。＞＜ どうしてなのでしょうか！？ どこかが間違えているのでしょうか！？ 誰か助けていただけませんでしょうか；＞＜；；
- ベストアンサー
- JavaScript
- java scriptによるポップアップウインドウについて
<head> <SCRIPT language="JavaScript"> <!-- function OpenWin1(){ win=window.open("window1.html","new","width=300,height=100"); } // --> <!-- function OpenWin2(){ win=window.open("window2.html","new","width=500,height=200"); } // --> </SCRIPT> </head> <body bgcolor="#FFFFFF" text="#000000"> <A href="javascript:OpenWin1()">1.ウィンドウを開く</A> <A href="javascript:OpenWin2()">2.ウィンドウを開く</A> </body> 「1.ウィンドウを開く」をクリックしてwindow1.htmlのポップアップウインドウを表示させたまま、「2.ウィンドウを開く」をクリックすると、最初のウインドウサイズを保持したまま、新しいウインドウが開いてしまうのですが、これをうまく処理する方法はないのでしょうか？ どなたかアドバイス頂けると嬉しいです。 よろしくお願い致します。
- ベストアンサー
- JavaScript
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 JavaScriptで制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>
- ベストアンサー
- JavaScript
- クリッカブルマップをロールオーバーをしたい！
画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 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番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- フレームからサイズ指定したポップアップを開く
教えてください。 上下二段にフレームをきったページを作っています。 上がメニューで下がメインコンテンツです。 下に配置したボタン画像をクリックすると、サイズ指定したポップアップが開くということをしたいのです。 <SCRIPT language="JavaScript"> <!-- function openmenu02() { str=" window02.html"; menuWin = window.open(str,'menu2','width=350,height=350'); window.open(str,'menu2','width=350,height=350'); menuWin.opener = self; } //--> </SCRIPT> <A HREF="javascript:openmenu02()" TARGET="_top">画像のボタン</a> これだとマックのIEでしか反応しませんでした。 どこが間違っているのでしょうか？
- 締切済み
- JavaScript
- JavaScriptのwindow.openでリファラーが取得できない。
<SCRIPT language="JavaScript"> <!-- function OpenWin(){ window.open("sample.cgi,"new","width=500,height=250"); } // --> <A href="#" onClick="OpenWin()">オープン</a> 上のようにsample.htmlのページ内にwindow.openのJavaScriptを書いています。 sample.cgi内に$ENV{'HTTP_REFERER'}を埋め込んでいるのですがリファラーが取得できません。 window.openの場合はリファラーは取得できないのでしょうか？
- ベストアンサー
- CGI
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- ポップアップウィンドウが出来ないです
ポップアップウィンドウをつくりたいのですが、 head内に <script type="text/javascript"> function openWin(theURI) { PopUpWin=window.open(theURI,'theWin','scrollbars=0, width=250,height=320,resizable=1,directories=0, toolbar=0,status=1,location=0'); PopUpWin.focus(); } </script> と書いて body内に <a onclick="openWin('bgm.html');return false;" onkeypress="openWin('bgm.html');return false;"> と書きました 初心者がどうにか書いたものなので、全体的に間違っているかも知れないですが、どこを直せばいいか教えてください (サーバの都合で現在アップデートできないので、オフラインで動作確認しましたがポップアップしません。 オフラインでは動作しないのですか？)
- ベストアンサー
- JavaScript
- 背景画像にクリッカブルマップでリンクを飛ばす方法
背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■CSSで書いているのは .bodytitle { background-image: url('http://**************/title.jpg' width="750" height="269" border="0" usemap="#maintop"); } ■HTMLのbodyの中に書いているのは <map name="maintop"> <area shape="rect" coords="12,10,280,80" href="http://******/" target="_blank"> <area shape="rect" coords="510,8,740,71" href="http://******/" target="_blank"> </map> お手間おかけしますがどうぞよろしくお願い致します。
- ベストアンサー
- デザイナー・クリエイティブ職
- クリックすると領域を表示するする質問
javascript色と画像についての質問です ある画像にＹＥＩＩＯＷとＧｒｅｅｎとＢlueと書いてあり、その領域をクリックすると（これは画像です） （これは色です）（これは背景色です）とそれぞれ表示させたいのですがクリックして文字を表示させるソースなどがいまいちわかりませんどなたかご教授ください <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=Shift_JIS"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>イメージマップの利用</title> <script language="JavaScript" type="text/javascript"> <!-- var defaultColor="white" document.bgColor=defaultColor; function changeBG(color){ document.bgColor = color; } //--> </script> </head> <body bgcolor="#ffffff"> <p><img src="images/map.jpg" width="598" height="117" alt="maptest" usemap="#map1"> <map name="map1"> <area shape="rect" coords="31,63,201,108" href="xxx1.html" alt="yellow" <area shape="rect" coords="202,2,374,42" alt="green" href="xxx2.html" <area shape="circle" coords="546,66,42" alt="blue" href="xxx3.html" </map></p> </body> </html>
- ベストアンサー
- JavaScript
お礼
明解にお答え頂き、大変ありがとうございました。 早速やってみたいと思います。