- ベストアンサー
子画面で画像を表示したい
親画面に画像が表示されていて下記のようなＨＴＭＬのＡＲＥＡを 使用しています。 <BODY> <DIV> <IMG src="abcde.gif" usemap="#m_map"> <MAP name="m_map"> <AREA shape="rect" coords="10,10,400,400" href="abc.html" alt="周囲" target="_blank"> </MAP> </DIV> </BODY> エリア選択した後に子画面 ・画面サイズ:300×300 ・画面位置:縦方向100,横方向100 ・画面スクロールなし の状態で表示したいのですが、 JavaScriptの作成方法がわかりません。 （やったのですが、うまく表示されません。） すみませんが、参考になる回答を教えて頂けないでしょうか？ よろしくお願い致します。
- keiko1985
- お礼率60% (17/28)
- JavaScript
- 回答数2
- ありがとう数2
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
趣味でHPを作成している者です クリッカブルマップで作成していて リンクを押すと小窓が出るように設定したいと言うことだと 認識して回答します。 <head> <script type="text/JavaScript"> <!-- function OpenWin1(){ win1=window.open("表示するURL","new1","width=300,height=300,left=100,top=100, scrollbars=no"); } // --> </SCRIPT> </head> クリッカブルマップ内 <area shape="" coords="" heaf="javascript:OpenWin1()" alt=""> 様はリンクのアドレス部分にJavaScriptプログラムを 入れると新しいウィンドウが出ます。 私も独学でやっているのでこれはかなり苦労しました…。 なかなかサブウィンドウが表示されずエラーばっかりで…。 １週間位格闘したのを思い出します。 色々なサイトに載っているままやってもなかなか JavaScriptは作動しないものです。 なぜでしょうね？？ あと、<script type="">でも<script language="">でも どちらでも良いですが、だんだん後者は使わない流れになってます。 まだ当分は使ってられますけど。 最後にJavaScriptとCSSは外部に別に専用の.jsと.cssという拡張子で コードを直接入力(今回で言うとfanctionからいきなり書いてきます <script～もいりません)したものを作っておいてそれをHTMLに 呼び出した(head内に<script type="text/JavaScript" src="お好きな名前.js"></script>)方がHTMLがすっきりします
その他の回答 (1)
- worst_shin
- ベストアンサー率55% (69/125)
<HEAD></HEAD>の間に <SCRIPT language="JavaScript"> <!-- function newWio01(){ Win1=window.open("表示したいURL","width=300,height=300,left=100,top=100,scrollbars=no"); } // --> </SCRIPT> <BODY></BODY>の間に <A href="javascript:newWio01()">ここは文字</A> (これは文字をクリックして小窓を出す方法） もしくは、 <A href="javascript:newWio01()"><IMG src="abcde.gif" width="240" height="265" border="0" ></A> （こっちは画像をクリックして小窓を出す方法） ※ width=300,height=300,left=15,top=30,scrollbars=no 幅が300 高さが300 表示される位置 左から100 上から100 スクロールバーが無しという意味です これは小窓を出す方法ですが これで良いと思うんだけど （target="_blank" となっているんで、別窓 の設定だし・・・）
お礼
ご回答ありがとうございます。 ただこの方法ですと、abcde.gif画像自体が小さく表示されてしまいます。 abcde.gif画像の一部分(AREAのshape="rect" coords="10,10,400,400")をクリックすると子画面を表示するようにしたいのです。 どうか、よろしくお願い致します。
関連するQ&A
- map初心者です
名前の付け方がわかりません。 なんでもいいのでしょうか？とりあえずわからないので画像名と同じ名前に設定しました。 また、下の記述が全部なのですが画像しかアップされません。 リンクすらなりません。 どこがおかしいのでしょうか。よろしくお願いします。 <img src="img/1.jpg" usemap="#1map" border="0"> <map name="1map"> <area shape="rect" coords="220,148,179,200" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="358,125,181,126" href="http://12345" alt="**" target="_blank"> <area shape="rect" coords="167,336,178,141" href="="http://12345" alt="**" target="_blank"> <area shape="rect" coords="178,338,180,214" href="="http://12345" alt="**" target="_blank"> </map> 関係あるかわかりませんが、使っているのはロリポップです。
- ベストアンサー
- HTML
- 画像に複数リンクをはる方法（イメージマップ）
画像は表示されるのですが、リンクがはれません。 どこがおかしいのでしょうか？ リンクをはる画像と、リンク先は別フレームで、表示させたいフレームの名前はinです。 ついでに、リンクをクリックした瞬間に出る点線の消し方もわかる方がいたら教えてください。 よろしくお願いします。 タグ（html内）↓ <body> <img src="http:～" usemap="mn"> </body> <map name="mn"> <area shape="rect" coords="298,298,355,262" href="http:～l"target="in"> <area shape="rect" coords="298,276,319,285" href="http:～"target="in"> <area shape="rect" coords="324,273,362,288" href="～html" target="in"> <area shape="rect" coords="367,276,399,286" href="～html" target="in"> </map>
- 締切済み
- HTML
- 吹き出しに画像とコメントを入れるプログラム
下記のプログラムで吹き出しを作成して 画像とコメントを表示したいのですが なかなか出来ず困っております。 方法がありましたらよろしくお願いいたします。 <img src="画像名" usemap="#map" border="0"> <map name="map"> <area shape="rect" coords="305,60,390,126" href="アドレス" alt="北海道"> <area shape="rect" coords="288,151,331,181" href="アドレス" alt="青森"> <area shape="rect" coords="280,181,311,221" href="アドレス" alt="秋田"> <area shape="rect" coords="310,181,341,221" href="アドレス" alt="岩手"> <area shape="rect" coords="275,221,305,245" href="アドレス" </map>
- ベストアンサー
- JavaScript
- mapが機能しない
以下のようにmapを設置しましたが、全く機能しません。何が考えられるでしょうか？ <div><img src="images/head.jpg" alt="" usemap="#map" border="0"/></div> <map name="map"> <area href="kan.html#3" alt="" shape="rect" coords="0,3,105,154" /> <area href="kan.html#2" alt="" shape="rect" coords="314,3,393,154" /> <area href="kan.html#1" alt="" shape="rect" coords="106,3,211,146" /> </map>
- ベストアンサー
- HTML
- 背景画像にクリッカブルマップでリンクを飛ばす方法
背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■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で制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(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
- <map>の切り替え
ウェブサイトを作っているのですが、たぶんJavaScriptだとできると思うのでどなたか分かればと思い、投稿しました。 操作的には、 <body> <div><img src="aaa.gif" usemap="#map01" border="0" name="changeImage"></div> <!--▼クリックエリア範囲01の場合--> <map name="map01"> <area shape="rect" coords="0,0,30,30" href="javascript:document.changeImage.src='bbb.gif'";> </map> <map name="map02"> <!--▼クリックエリア範囲01の場合--> <area shape="rect" coords="0,0,20,20" href="bbb.html"> </map> </body> のような感じで、初期設定のusemapがmap01なので、最初クリックする時は、map01のクリックエリア範囲でそのaaa.gifがbbb.gifに変わります。そして、bbb.gifに変わったとき、クリックエリア範囲を<map name="map02">にしたいのです。 できますでしょうか？ 一応補足しておきますが、操作的には違う画面を出すとか、新しい画面に行った時、とかではないです。 同じ画面上の操作です。
- 締切済み
- JavaScript
- クリックしてリンク先に移動する地図をwebに掲載しましたが
ホームページに地図の画像を掲載して、 その地図にいくつかのクリックできるポイントを設定し、 それぞれリンク先に移動するようにしました。 IEではキレイに地図の画像が表示できているのですが、 FireFoxとか、Netscapeでは地図に青い外枠が表示されます。 赤を基調にしたサイトなので不自然な感じがして困っています。 どのようにこれを回避したらよいのでしょうか。 具体的に下記付け加えるもの等ございましたら教えてください。 よろしくお願いします。 <MAP NAME=map1> <AREA SHAPE=rect COORDS="112,2,196,28" HREF="room1.htm"> <AREA SHAPE=rect COORDS="213,3,298,28" HREF="room2.htm"> <AREA SHAPE=rect COORDS="310,2,399,28" HREF="room3.htm"> <AREA SHAPE=rect COORDS="413,2,495,28" HREF="room4.htm"> <AREA SHAPE=rect COORDS="513,1,594,27" HREF="room5.htm"> <AREA SHAPE=rect COORDS="614,2,701,28" HREF="room6.htm"> </MAP><IMG USEMAP="#map1" SRC="worldmap.gif" WIDTH=702 HEIGHT=29 ALIGN=bottom>
- ベストアンサー
- CSS
- Javascriptのマウスオーバー
Javascriptでのマウスオーバーで、Mapを使って画像上に範囲指定しているリンク範囲にボーダーを表示させたいと考えています。 HTMLは、 <html> <head> <title></title> </head> <body> <img src="aaa.gif" border="0" usemap="#Map"> <map name="Map"> <area shape="rect" coords="78,200,228,241" href="bbb.html"> <area shape="rect" coords="326,168,476,209" href="ccc.html"> <area shape="rect" coords="78,141,228,182" href="ddd.html"> </map> </body> </html> このようになっています。 この状態で、マウスオーバー時にリンク範囲をボーダーで囲みたいと思っています。 JavascriptやCSSとの組み合わせ等でいろいろ探してみたのですが、どうしても上手くいきませんでした。どうしたらいいのか教えて下さい。 また、JavascriptやCSSでなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。
- 締切済み
- JavaScript
- background-imageが表示されない
ヘッダーの部分の背景画像が表示されません。 ＣＳＳ #header { height: auto; display:block; margin:0px;padding:0px;width:100%; background-image: url(../images/mainback.png); } ＨＴＭＬ <div id="header"> <div><img src="images/topbar2.gif" alt="" usemap="#map2" border="0" /></div> <map name="map2"> <area href="s.html" alt=""shape="rect"coords="394,57,495,68" /> <area href="t.html" alt=""shape="rect"coords="510,57,605,68"/></map> <div><img src="images/main.png" alt="" usemap="#map1" border="0" /></div> </div> 上記のようにヘッダー画像の下に背景画像をつけたいのですが、画像がある場合背景画像は重ならないんでしょうか？
- ベストアンサー
- HTML
お礼
回答ありがとうございます。 早速実行してみました。 子画面は表示されましたが、画面の内容が表示されませんでした。 子画面のＵＲＬを調べてみたら、javascript:OpenWin1() となっており、うまくリンクされていないようです。 この点、どうして表示されないのか教えて下さい。 よろしくお願い致します。
補足
keiko1985です。 この回答へのお礼を書いた後、プログラムソースをよく見ると プログラムミスがありました。 修正後、実行したら出来ました。 本当にありがとうございました。