2014年10月12日日曜日

HTML:画像の上にポップアップ表示させたい場合


今月末納品するリプレース案件のシステム。

一部コンテンツを一般公開するわけなんだけどHTMLに不備が見つかってしまう。

地図画面の上にこんな感じでポップアップ表示をさせていたんだけどIE8,IE9では表示されるのだがFireFox,Chrome,IE10,IE11では表示されない…。
赤丸部分にカーソル合わせてください。これが出なかったんですよIE11だけは




HTMLはこんな感じ
<IMG src="test.png" useMap="#POPUP">
<MAP name="POPUP" alt="test">
<!-- ポップアップタグ -->
<AREA href="sample.html" shape=circ alt="ここは〇〇&#13現在:××&#13;1時間後:▲▼" coords=234,156,20></AREA>
</MAP>


調べた結果IE11以外は<AREA alt="~" の部分を<AREA title="~" に変更することで無事解決

IE11だけはどうしても表示されない。
<AREA タグ内でonMouseOver,onMouseOutでDIVの表示に切り替えないと駄目かな?なんて考え始めたのだが確かJavaScriptは極力使わない方針だったので躊躇してしまう。

しかしなんでIE11だけ駄目なんじゃ!?

表示出来ないt多分納品出来ないのでJavaScriptで表示するのも視野に入れて作成しているとあれ!?なんか出るようになったぞ!

そういえば今IMGタグの終了タグ入れたよな!?

まっまっまさか!
</IMG>

この終了タグが抜けていたせい!?

なんでIE11だけ駄目なんだよ。全部駄目だったらもっと早く気がついたのに…
このコンテンツって何も変えていなくてIE11 での表示確認だけだったのに酷い。。。

かなり無駄な時間を使ってしまったではないか…

終了タグはちゃんと入れましょうね。

終了タグは全く関係ありませんでした。
無くても問題なく表示されました。

表示がポップアップの表示が遅いだけだったかも知れません。。。