• ベストアンサー

クリッカブルマップでページを開くとき

簡単な地図をかいて、クリッカブルマップにした のですがそれぞれのお店の写真をクリックすることで お店の中の写真が一枚だけ出るようにしたいんです。 現時点では、クリックすると新しいブラウザが開いて 大きいところにポツンと写真一枚です。 写真の大きさくらいの、小さいブラウザを開きたい のですが、できますか? ちょっと、説明が悪いかも知れませんが何か良い案が ある方教えて下さい。

質問者が選んだベストアンサー

  • ベストアンサー
  • Borom
  • ベストアンサー率30% (14/46)
回答No.2

JavaScriptのwindow.openで実現可能ですよ。 200x300で開く場合は、 onclick="window.open('photo.html','sub','width=200,height=300');" という属性をクリッカブルマップの対象エリアに埋め込んでください。

参考URL:
http://tohoho.wakusei.ne.jp/js/window.htm#open
pekotarou
質問者

お礼

何度かしつこくやってみたら、できました! 夕方は全然できなくてちょっと諦め気味だったのですが 諦めなくて良かったです。 教えて頂いてありがとうございました!

pekotarou
質問者

補足

回答ありがとうございます。 対象エリアというのが、良く分かりません(--;) <a href="">の中に入れるのかな?と思って やってみましたが、だめでした。 参考URLも見ましたが今一つ分かりません。 せっかく教えて頂いたのに申し訳ないです(T-T) もしよかったらエリアを教えて下さい。

全文を見る
すると、全ての回答が全文表示されます。

その他の回答 (1)

回答No.1

JavaScriptを使うと、新しく開くウインドウのサイズを指定することができます。 作成されたHTMLファイルをメモ帳などのテキストエディタで開いてください。 そして、 <HEAD>~</HEAD>という箇所の間に以下の内容を記述してください。 <SCRIPT language="JavaScript"> <!-- function subWin(){ Window.open("リンク先のファイル名","Window1","width=★★★,height="☆☆☆"); } //--> </SCRIPT>   ・リンク先のファイルには、リンク画像ファイルの名前を入れてください。   ・width=★★★には、横幅をピクセルで入力します(例:width=120 横幅120ピクセル)   ・height=☆☆☆には、縦の長さをピクセルで入力します。 さらに、リンクを指定するクリッカブルマップの<AREA>タグを次のように変更してください。 <AREA href="JavaScript:subWin()" shape="~" coods="~">  shape="~"と、coods="~"の部分はいじらなくてOKです。 説明が下手ですが、良かったら試してみてください。

pekotarou
質問者

補足

ご回答ありがとうございます! 今、作ったHTMLファイルで教えて頂いたのを やってみたんですが、うまく行きません。 リンク先が6店ほどあるのですが、<!--から-->までを 6個コピーして使ってみましたが駄目でした。 たくさんのリンクがある場合でもこの方法は使え ますか? もしかしたらコピーのしかたが悪かったのかも しれませんね。再度試してみます。

全文を見る
すると、全ての回答が全文表示されます。

関連するQ&A

  • クリッカブルマップで・・・

    ランダムにクリッカブルマップを出す事は出来るでしょうか? どこのホームページを見ても ランダム画像まででクリッカブルマップの説明はないんです。 どうしたらランダムにクリッカブルマップを出す事が出来るんでしょうか? どなたか教えてください・・・。

  • クリッカブルマップ(イメージマップ)について

    検索してもどうしても難しく、ここにて質問させて頂きます。 http://www.pds-navi.com/ 上記のサイトのように日本地図を作りたいのですが、各説明サイトをみても座標がどうのとかで分かりません。 簡単にこのようなクリッカブルマップ地図を製作できるツール等ありますでしょうか? 当方windows7です。 宜しくお願い致します。

    • ベストアンサー
    • CSS
  • クリッカブルマップを使わず同じ効果を得たい…。

    出来るかも分からないのですが、宜しくお願いします。 題名の通りなのですが、クリッカブルマップのように1枚の画像上に複数箇所のリンクを設定したいのですが、クリッカブルマップ自体は使用したくありません。 そこで、質問なのですがHTMLやCSSを工夫することで、またはJavascriptを使うことで、こういった指定が実現可能でしょうか? 実際には、良くある地図みたいに地域ごとの形でリンクの設定が出来ればと思います。 なお、FlashはNGとさせてください。 どなたか、ご存知の方いらっしゃいましたらアドバイス頂けないでしょうか。 宜しくお願いします。

    • ベストアンサー
    • CSS
  • クリッカブルマップから 小ウィンドウを出して閉じれますか?

    クリッカブルマップをクリックして 小ウィンドウをサイズ指定で出して ウィンドウにはツールバーやメニューバーなど表示させないで一番シンプルに出したいのです。 小ウィンドウを閉じる時にはウィンドウ内に作ったGIFボタンで閉じさせたいのですが どのようにしたら良いのでしょうか? クリッカブルマップでは無くてテキストからのリンクから小ウィンドウを出すテストでは成功したのですがクリッカブルにしたら複雑すぎてよく分からなくなってしまいました よろしくおねがいしまーす

  • クリッカブルマップがきかない!?

    html初心者です。 地図の画像上に複数のにクリッカブルマップを作成して、同ページ内のアンカーリンクへリンクを設定しています。 ※クリッカブルマップはDreamweaverで作成しています。 IEではちゃんとリンク先に行くのですが、ネスケだと、リンク先に移動しません。。どこが悪いのでしょうか??ソースは下記にある通りです。 なにか決定的にタグが抜けているんでしょうか?? 皆様、初心者な私にどうか教えてください。 よろしくお願いします。。。 ---------------------------------------------- <BODY> <div align="left"> <img src="image/map.gif" width="500" height="300" border="0" usemap="#Map"> <MAP name="Map"> <AREA shape="rect" coords="342,38,447,65" href="#01"> <AREA shape="rect" coords="333,108,439,144" href="#02"> </MAP> </div> <div> <A name="#01">一丁目</A> <A name="#02">二丁目</A> </div> </BODY>

    • ベストアンサー
    • HTML
  • クリッカブルマップの作り方

    クリッカブルマップの作り方 アメリカの州、中国の省、山手線の駅名をクリックしたら、リンク先へとぶ画像をつくりたいと考えています。 下絵の入手先をご存じでしたらお教えください。有料でかまいません。 フォトショップか、イラレか、あるいは何でつくればいいでしょうか? 作り方のサイトなどありますでしょうか? 下は一例です。 http://www.jcbus.co.jp/chinahotel/map/

  • クリッカブルマップについて

    クリッカブルマップについて教えていただきたい点がございます。 例えば、以下のような記述をした場合。 ■例 <a href="***.html"> <img src="***.jpg" alt="***" width="***" height="***" border="0" usemap="#Map" /> </a> <map name="Map" id="Map"> <area shape="rect" coords="***" href="***.html" alt="***" /> </map> エリア指定した部分以外のところは<a>タグでのリンクになり、エリアで指定している部分はそのURLになるかと思うのですが、Firefoxですとうまく遷移するのですが、IEだとクリックしてもエリア指定した部分しかページ遷移をしてくれません。 ※ブラウザ左下のマウスオーバー時にでるURLは飛び先を認識しているのですが、クリックしても反応が無いのです。。。 IEはshape="default"にも対応していないようですし、一部分のみをエリアで指定し、それ以外のところは全体的に別のリンクを指定したい場合、どういった記述をすればよいのでしょうか? shape="poly"で囲んでも問題は無いのですが、あまり見た目が良くないので。。。 また、これよりも良い方法があるなど、ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いでございます。 ----------------------------------- 私が制作時に確認をしているブラウザのバージョンは次の通りです。 Firefox:3.6.12 IE:8.0 ----------------------------------- 何卒よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • 画像毎に違うクリッカブルマップを設定したい

    地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 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>

  • 携帯でクリッカブルマップ

    携帯HPのデザインでクリッカブルマップを使い 1つの画像に複数リンクをしたり、好きな位置に 画像リンクをつけいて自分の携帯(au)では 表示されたしリンクも押せたんですが、 他の携帯(docomo)では表示されるけどリンクが押せない、 リンク自体表示されてない、みたいなんですが クリッカブルマップはauにしか機能しないものなんですかね…? 他の携帯でも対応できるようにする方法があれば教えて下さい。 ない場合は他にいい案を提供していただきたいです;

  • クリッカブルマップとチェックボックスを連動させたい

    Webフォーム制作について教えてください。 □北海道 □本州 □四国 □九州 というチェックボックスがあります。その下に日本地図を置いて、日本地図をクリッカブルマップにします。 たとえば地図上の北海道部分をクリックすると、チェックボックスの「□北海道」のところにチェックが入るようにしたいのです。 さんざんググってみましたが挫折いたしました。どうか宜しくお願い申し上げます。