クリッカブルマップの枠線を消すには

最近では、使う機会も少なくなってきている(気がする)クリッカブルマップですが、地味に使うこともあるので、これも備忘録としてご紹介します。

方法はいたって簡単。
該当するareaタグに、CSSで記述してあげるだけです。

【CSS】

area{
border:none;
outline:none;
}

IEでは効いてくれないようです。
その時は、下記をareaタグに加えてあげてください。

onFocus="this.blur();"

 

【サンプル】

修整版

 

猫の顔の部分に、クリッカブルマップを設定しました。
(本当は未修正版も載せたいのですが、どうもこのワードプレス上では、ご丁寧にクリッカブルマップの枠線はデフォルトで修正されているようです。
そのためだけに調整するのも面倒大変そうなので、ぜひ各自でお比べくださいw)

以前は、スクリプトを使ったりもしてたんですが、今はほぼCSSで修正できるのです。
便利になったものです。(何年も前に)
…なかなか使う機会もなかったもので。でも、お手軽で便利と思ったものは、なんでも紹介したい次第です。

スクリプトを使っていた時は、正直設定が手間だなあ…、面倒くさいなあ…、とか思ったものです。
なんて言うと、方法を教えてくれた我らが上司に怒られそうですので、やめておきましょう。
読まれた方は、くれぐれも上司に密告しませんでくださいm(_ _)m

参照させて頂いたサイト
https://itstudio.co/2014/12/25/3386/

カテゴリーCSS