- 締切済み
画像上にインラインフレーム＋クリカッブルマップ
http://liaroidcinema.com/aaatop.html まず上記のURLをご覧いただければ嬉しいです。 こちらのURLをfirefoxでご覧いただけるとお分かりだと思いますが、クリカッブルマップがまったく作動しておりません。 僕のPCのローカル上で開いたり、もしくはsafariで上記URLを開けば正常に作動するのですが、、、。 一体何が原因なのでしょうか？ よろしければfirefoxで作動させる方法をご教授ください。
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
もう一箇所 html,body{paddong:0;margin:0;} paddingですね。 html,body{padding:0;margin:0;} body,a,a:visited,a:focus,a:hover,a:active{color:black;} body{background-color:#4c2821;} div.section{ background:url(./top.jpg) no-repeat 0 0; width:1047px;height:732px; } iframe{display:block;position:absolute; left:527px; top:169px; } div.section h1,div.nav h2{display:none;} div.nav{position:relative;} div.nav ul, div.nav ul li{ display:block;list-style:none; margin:0;padding:0; } div.nav ul li{ width:245px; height:200px; position:absolute; line-height:215px; } div.nav ul li a{ display:block;width:100%;height:100%;} div.nav ul li a span{visibility:hidden;} div.nav ul li.RB{height:28px;width:95px;} li.L1{top:80px;} li.L2{top:300px;} li.L3{top:510px;} li.LA{top:97px;} li.LB{top:132px;} li.R1{left:20px;} li.R2{left:270px;} li.R3{left:520px;} li.R4{left:770px;} li.RB{left:930px;}
- ORUKA1951
- ベストアンサー率45% (5062/11036)
訂正)展示端末じゃなくて点字端末です。 システムがHTMLソースのURLを「はしょっちゃう」ので、それも訂正しておきます。httｐをhttpに戻してください。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<title>Liaroid Cinema office website</title> ＿<style type="text/css" media="screen"> <!-- html,body{paddong:0;margin:0;} body,a,a:visited,a:focus,a:hover;a:active{color:black;} body{background-color:#4c2821;} div.section{ ＿background:url(./top.jpg) no-repeat 0 0; ＿width:1047px;height:732px; } iframe{display:block;position:absolute; ＿left:527px; ＿top:169px; } div.section h1,div.nav h2{display:none;} div.nav{position:relative;} div.nav ul, div.nav ul li{ ＿display:block;list-style:none; ＿margin:0;padding:0; } div.nav ul li{ ＿width:245px; ＿height:200px; ＿position:absolute; ＿line-height:215px; } div.nav ul li a{ display:block;width:100%;height:100%;} div.nav ul li a span{visibility:hidden;} div.nav ul li.RB{height:28px;width:95px;} li.L1{top:80px;} li.L2{top:300px;} li.L3{top:510px;} li.LA{top:97px;} li.LB{top:132px;} li.R1{left:20px;} li.R2{left:270px;} li.R3{left:520px;} li.R4{left:770px;} li.RB{left:930px;} --> </style> </head> <body> ＿<div class="section"> ＿＿<h1>Liaroid Cinema office website</h1> ＿＿<div class="nav"> ＿＿＿<h2>目次</h2> ＿＿＿<ul> ＿＿＿＿<li class="L1 R1"><a href="live.html"><span>Live</span></a></li> ＿＿＿＿<li class="L2 R1"><a href="httｐ://twitter.com/#!/LiaroidCinema"><span>Twitter</span></a></li> ＿＿＿＿<li class="L3 R1"><a href="mail/form.html"><span>Mail</span></a></li> ＿＿＿＿<li class="L1 R2"><a href="discography.html"><span>Discography</span></a></li> ＿＿＿＿<li class="L2 R2"><a href="blog.html"><span>Blog</span></a></li> ＿＿＿＿<li class="L3 R2"><a href="photo.html"><span>Photo</span></a></li> ＿＿＿＿<li class="L3 R3"><a href="biography.html"><span>Biography</span></a></li> ＿＿＿＿<li class="L3 R4"><a href="link.html"><span>Link</span></a></li> ＿＿＿＿<li class="LA RB"><a href="httｐ://www.myspace.com/liaroidcinema">Liaroid Cinema</a></li> ＿＿＿＿<li class="LB RB"><a href="httｐ://www.audioleaf.com/liaroid_cinema">audioleaf</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<iframe src="./newstop.html" name="frame" width="490" height="321" title="情報"><a href="./newstop.html">情報</a></iframe> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
＞やはり我流じゃ無理なのでしょうか？ 誰かに習ってもそれも我流(^^) 下のCSSはともかく、HTMLはあなたでも書けるはず。 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ スタイルシートもよく読めば何をしようとしているかわかるはず・・ 減点数の多いエラーから、Another HTML-lint gatewayの指摘にしたがって少しずつ直すのがよいでしょう。 ただ、大きなHTMLを作った後でチェックするより少しずつ大きくしながら、都度チェックするほうが効率的です。map機能はとても便利がよいのですが、出来れば率直なHTMLで記述してスタイルシートでデザインしていくほうが良いでしょう。そうすれば携帯電話だろうがスクリーンリーダーだろうが展示端末だろうが・・そして何よりも検索エンジンに的確な情報を伝えられる。私はgoogleお勧めのLynxで確認する。 ちょっと簡単なものを書いてみましょう。iframeを使用するのでHTML4.0 Transitionalになります。(最近Transitionalは書いた記憶がないけど) ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) でチェック済み ★タブは＿に置換してあるので戻す!!こと 【重要】 ※href="mailto:"は、HTMLの仕様にはありません。メールクライアントが起動するのはあくまでユーザーの設定によるものです。 ※今回はスタイルシートだけで記述しました。他のユーザーエージェント(携帯電話・PDA・スクリーンリーダー・展示端末・検索エンジン)を考慮するとmapは使わないほうが良いでしょう。 もし使うなら、13.6 イメージマップ ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/struct/objects.html#h-13.6 )に例もありますが、mapを使えないユーザーエージェント用に書くほうが良い。 ※示されたページは幅の狭いディスプレイ(圧倒的に多い1020px)でははみ出してしまいます。出来れば800px程度に抑えましょう。 ※[表示]→スタイルシートで「スタイルシートを利用しない」を選択するとscreen以外のユーザーエージェントの表示が確認できます。(印刷プレビューでも) ※strictにするときは、面倒でも表示したいページのbodyの内容をdiv内にコピーペーストしてoverflow:auto;とする。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<title>Liaroid Cinema office website</title> ＿<style type="text/css" media="screen"> <!-- html,body{padding:0;margin:0;} body,a,a:visited,a:focus,a:hover,a:active{color:black;} body{background-color:#4c2821;} div.section{ ＿background:url(./top.jpg) no-repeat 0 0; ＿width:1047px;height:732px; } iframe{ ＿display:block;position:absolute; ＿left:527px; ＿top:169px; } div.section h1,div.nav h2{display:none;} div.nav{position:relative;} div.nav ul, div.nav ul li{ ＿display:block;list-style:none; ＿margin:0;padding:0; } div.nav ul li{ ＿width:245px; ＿height:200px; ＿position:absolute; ＿line-height:215px; } div.nav ul li a{ display:block;width:100%;height:100%;} div.nav ul li a span{visibility:hidden;} div.nav ul li.RB{height:28px;width:95px;} ＿li.L1{top:80px;} ＿li.L2{top:300px;} ＿li.L3{top:510px;} ＿li.LA{top:97px;} ＿li.LB{top:132px;} ＿li.R1{left:20px;} ＿li.R2{left:270px;} ＿li.R3{left:520px;} ＿li.R4{left:770px;} ＿li.RB{left:930px;} --> </style> </head> <body> ＿<div class="section"> ＿＿<h1>Liaroid Cinema office website</h1> ＿＿<div class="nav"> ＿＿＿<h2>目次</h2> ＿＿＿<ul> ＿＿＿＿<li class="L1 R1"><a href="live.html"><span>Live</span></a></li> ＿＿＿＿<li class="L2 R1"><a href="http://twitter.com/#!/LiaroidCinema"><span>Twitter</span></a></li> ＿＿＿＿<li class="L3 R1"><a href="mail/form.html"><span>Mail</span></a></li> ＿＿＿＿<li class="L1 R2"><a href="discography.html"><span>Discography</span></a></li> ＿＿＿＿<li class="L2 R2"><a href="blog.html"><span>Blog</span></a></li> ＿＿＿＿<li class="L3 R2"><a href="photo.html"><span>Photo</span></a></li> ＿＿＿＿<li class="L3 R3"><a href="biography.html"><span>Biography</span></a></li> ＿＿＿＿<li class="L3 R4"><a href="link.html"><span>Link</span></a></li> ＿＿＿＿<li class="LA RB"><a href="http://www.myspace.com/liaroidcinema">Liaroid Cinema</a></li> ＿＿＿＿<li class="LB RB"><a href="http://www.audioleaf.com/liaroid_cinema">audioleaf</a></li> ＿＿＿</ul> ＿＿</div> ＿＿<iframe src="./newstop.html" name="frame" width="490" height="321" title="情報"><a href="./newstop.html">情報</a></iframe> ＿</div> </body> </html>
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ページ内アンカー(目標)ですから#はあってはなりません。 Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) でチェックしましょう。・・・他にもものすごくたくさんエラーがあって、ブラウザによったら処理できないところがたくさんあります。 6: line 32: <IMG> のアンカー名 `myma1p` が見つかりませんでした。 → 解説 224 ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.cgi ) 以前も、Web標準な方法を書いたような気がする。
- torayoshi
- ベストアンサー率62% (910/1449)
IE8でも作動しませんね。 ローカルとSafariでなら正常作動ってのも良く分からないんですが、 <map name="#myma1p"> の「#」が余計なのでは？ これならIE8でもFirefox5でも作動しますが…
補足
うーん、＃を外しても僕の動作環境では変わらずです。 torayoshiさんのFirefoxでは正常作動しますか？
補足
エラー見させていただきましたが半端ない数ですね。。。 やはり我流じゃ無理なのでしょうか？ アンカーから＃を取り除いても反映されないのはやはり他のエラーのせいでしょうか？