子供向けのクリッカブルマップ作成、ロールオーバーがうまくいかないのはなぜ？

前へ 次へ
このQ&Aのポイント
  • 子供向けのサイトを作るときにクリッカブルマップを使用していますが、ロールオーバーがうまくいきません。どうすれば解決できるでしょうか？
  • C-Mapというアプリケーションで子供向けのサイトを作成していますが、クリッカブルマップの設定がうまくいっていないようです。どこを修正すれば良いでしょうか？
  • 子供向けのウェブサイトを作ろうとしていますが、クリッカブルマップのロールオーバーがうまく機能しません。解決策を教えてください。
回答を見る
  • ベストアンサー

子供向けのサイトを作ろうと思っています。

子供向けのサイトを作ろうと思っていて、クリッカブルマップで作成しました。 ロールオーバーをしたいのですが…うまくいきません。 どこが間違っているのか教えて頂きたいのですが、宜しくお願い致します。 ちなみにC-Mapというアプリケーションで作成しました。 <HTML> <HEAD> <TITLE>ここへサイトのタイトル</TITLE> <meta http-equiv="Content-type" content="text/html; charset=Shift_JIS"> <script language="Javascript"> <!-- resizeTo(1024,728); //--> </script> <STYLE type="text/css"> <!-- body{overflow:hidden} --> </STYLE> </HEAD> <BODY bgcolor="#000000" text="#FFFFFF" link="#000000" vlink="#000000" alink="#000000" BACKGROUND="image.gif"> <IMG src="mapa.jpg" usemap="#mapa" border="0"> <MAP name="mapa"> <AREA shape="poly" coords="592,466,583,464,577,456,575,447,577,437,584,430,592," href="mapa.html" alt="マップA" onMouseOver="mapb.jpg" onMouseOut="mapa.jpg"> <AREA shape="circle" coords="422,398,0" nohref> ・ ・ ・ </body> </html>

  • HTML
  • 回答数1
  • ありがとう数0

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

  • ベストアンサー
回答No.1

Yahoo知恵袋に似たような話が載っていますがこれでどうでしょうか。 C-MAPはクリッカブルマップを簡単に作成するソフトであり、細かい指定(CSSなど)は HTML本体に記述すれば動くようになるかもしれません。

参考URL：
http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1442043134
  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. HTML

関連するQ&A

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

    私は、Macintoshを使って、ＨＰ製作をしているのですが、 クリッカブルマップが、MacのSafariではちゃんと出来ているのに、 internet explorerだと見れません。 どこが違うのでしょうか？ご回答お願いします。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- BODY{cursor:crosshair;} --> </style> <title>サンプル</title> </head> <body background="002.jpg"> <div style="top : 40px;left : 90px; position : absolute; z-index : 1; " id="Layer1"> <img src="window18.jpg"　usemap="#map1"　alt=""> <map name="map1"> <area shape="rect" coords="586,247,617,261" href="info.html" target="iframe"> <area shape="rect" coords="622,247,660,261" href="info.html" target="iframe"> <area shape="rect" coords="666,247,690,261" href="contact.html" target="iframe"> <area shape="rect" coords="582,276,626,291" href="cosme.html" target="iframe"> <area shape="rect" coords="631,276,663,290" href="kaimono2.html" target="iframe"> <area shape="rect" coords="667,276,698,290" href="link.html" target="iframe"> <area shape="default" nohref> </map> </div> <div style="top : 145px;left : 190px; position : absolute; z-index : 1; " id="Layer2"> <iframe src="migi.html" border="0px" width="450" height="280" scrolling="AUTO" name="iframe"> </iframe></div> </body> </html>

    • ベストアンサー
    • 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>

  • クリッカブルマップでのターゲット指定？

    長くなるかもしれないけど、聞いてください><； 今のところまだFFFTPにはアップしていないです。 作り始めたばっかりで、「index」と「page1」、「page2」、「page3」が あります。 ★「index」…　今のところはフレームにしています。 　　　　　　　(右と左の2分割にしています) ★「page1」…　フレームの左側です。 ★「page2」…　フレームの右側で、クリッカブルマップを 　　　　　　　　貼り付けていて、ボタンを押すと「page3」を 　　　　　　　　左側にうつすようにしたいです。 ★「page3」…　「page2」のクリッカブルマップを押した後に 　　　　　　　　左側に新しく出るページです。 －－－－－－－－－　page2　－－－－－－－－－－－－－－－－－－ <html> <head> <title>page2</title> <style type="text/css"> <!-- body{ overflow:hidden; } --> </style> </head> <body> <IMG src="d03.jpg" usemap="#d03" border="0"> <MAP name="d03"> <AREA shape="circle" coords="302,133,72 " href="page3.html"> <AREA shape="default" nohref><!-- デフォルトエリア --> </MAP> </body> </html> －－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－－ ★問題点★(質問したいところ) ・「index」で、クリッカブルマップのボタンを押して 　左側に「page3」が出るようにしたいのに、 　右側に「page3」が出てしまいます。 　↑にあるタグに何か変なところや足りないところありますか？？ 　具体的に教えてください>< 　(難しい言葉とかは分かりません！)

    • ベストアンサー
    • HTML
  • クリックすると領域を表示するする質問

    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>

  • 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
  • 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でなくとも同じ事が出来るのでしたら、それで構いません。 どうか宜しくお願い致します。

  • 画像の指定範囲でのポップアップについて

    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>

  • クリカブルマップのリンクが反映されない

    htmlでクリカブルマップを使ってページを作ろうとしています。 ↓現在下記のような記述です ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <title>トップページ</title> </head> <body bgcolor="#ffffff"> <center> <img src="○○○.jpg" usemap="#△△△" border="0"> <map name="△△△"> <area shape="rect" href="profile.html"　coords="274,98,417,118"> <area shape="rect" href="gallery.html"　coords="720,559,793,573"> </map> </center> </body> </html> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ いろんなHPでちゃんと確認しながら記述したのですが、リンクがどうもうまくいきません。画像はきちんと表示されます。しかし、画像の上にマウスカーソルを置いても何も反応してくれません。クリックしてももちろんダメです。座標値が間違ってるのかな？と思い何度も確認しましたが間違っていませんでした。スペルも間違いないし、＝とかのつけ忘れもないし、もう何がどう間違って反映されないのかがどうしてもわからなくて質問しました。 初心者なもので・・・・おわかりになった方、どうか教えていただきたいです；▽；

    • ベストアンサー
    • HTML
  • アイフレームとクリッカブルマップ

    こんばんわ、イメージマップ(クリッカブルマップ)とアイフレームを 一緒に使いたいのですが、どうしてもできません＞＜ 　 マップのソースが <IMG src="背景画像" usemap="#g" border="0"> <MAP name="g"> <AREA shape="poly" coords="470,471,466,479,457,482,448,479,445,471,448,463,457,460,466,463" href="★" target="aifurenaka" alt="MEMO"><!-- MEMO --> <AREA shape="poly" coords="547,464,543,472,534,475,525,472,522,464,525,456,534,453,543,456" href="★" target="aifurenaka" alt="ABOUT"><!-- ABOUT --> <AREA shape="poly" coords="622,470,618,478,609,481,600,478,597,470,600,462,609,459,618,462" href="★" target="aifurenaka" alt="BOARD"><!-- BOARD --> <AREA shape="poly" coords="692,467,688,475,679,478,670,475,667,467,670,459,679,456,688,459" href="★" target="aifurenaka" alt="MIX"><!-- MIX --> <AREA shape="default" nohref><!-- デフォルトエリア --> </MAP>

  • 背景画像にクリッカブルマップでリンクを飛ばす方法

    背景画像にクリッカブルマップを使用してリンクを設定したいと思っているのですが 上手く設定できません。 どなたかご教示頂けないでしょうか。そもそも出来ないものでしょうか？ ■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> お手間おかけしますがどうぞよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する