【HTML,css,jQuery】イメージマップでareaタグの線を消す方法!

エンジニア

さて、これまでイメージマップの作り方をご紹介してきました。

これまでの記事はこちらから

今の状態でも問題はないのですが、クリックした時に線が残ってしまいます…
最後にもう少し綺麗にしていきます!

■cssでの方法

リセットcssにこちらのコードが入っているか確認してください。
入っていない場合は追加しましょう。

area{
 border:none;
 outline:none;
}

これで線は消えますが、IEでは効いてくれないんです。

■IEで線を消す方法

IEでも線を消す時はこちらです。
下記のコードをareaタグに追加してください。

onFocus="this.blur();"

これでIEでも線が消えましたね!

しかし…今度は線を消してたはずの「Firefox」が出てきてしまうんです。

■Firefoxで線を消す方法

これで最後です。

これまでの工程を踏まえてFirefoxで線を消す時は、jQueryを書いていきます。

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

はい!これでどのブラウザでもクリックした時に線は出てこないで綺麗な状態になりましたね!

3回に渡りイメージマップの使い方をご紹介させて頂きました。皆さんのお力になれれば幸いです。

それではまた。

関連記事

特集記事

コメント

この記事へのコメントはありません。

CAPTCHA


TOP