イメージマップの境界線を消す方法(改訂版)

Html 
<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();"

「onFocus="this.blur()"」を追加する。
ただし、IE6,7では消えるが、IE9,safari,Chrome,Firefoxでは線が出てしまう。


なので、下記のサイトを参考に、CSSとonFocusを追加する。
http://blogs.yahoo.co.jp/k3_labs/2756417.html


CSS

.nonborder {
  border:none;
  outline:none;
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();" class="nonborder"

のように記述してやると、IE6,7,8,9,safari,Chromeでは消えるが、Firefoxでは線が出てしまう。
原因としては、「onFocus="this.blur();"」があるためなので、


javascript

function nonborder(){
	var ua = navigator.userAgent;
	var chkFF = ua.indexOf("Firefox",0);
	if(chkFF<0){
		this.blur();//もしくはthis.focus()
	}
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="nonborder()" class="nonborder"

というようにFirefox以外の場合にblur()を効かせるように記述すると、
今度はIE9で効かなくなる。


ということで苦肉の策だが、最終的に下記のように。
Firefoxの場合のみ、javascriptでonFocusを空にする用にさせた。


CSS

.nonborder {
  border:none;
  outline:none;
}

HTML

<map name="Map" id="Map">
  <area shape="poly" onFocus="this.blur();" class="nonborder"

javascript(jQuery)

var ua = navigator.userAgent;
var chkFF = ua.indexOf("Firefox",0);
if(chkFF>0){
  if($("#Map area").length){
    $("#Map area").attr("onFocus","");
  }
}

これで良いのだろうか？？