4

I have tried every which way to try to remove the heighlight when pushing on an image map area of an image. I have search google time and time again and have added all the CSS code i could find in hopes it would help.. but it does not seem to.

An example of what i am talking about: android tablet

I have added:

 -webkit-user-modify: read-write-plaintext-only; 
 border:none; 
 outline: 0; 
 -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
 -khtml-user-select: none; 
 -o-user-select: none;
 -moz-user-select: none;
 -webkit-user-select: none;
 user-select: none;

 * {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
cursor: none !important; 
-webkit-user-modify: read-write-plaintext-only;
-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
outline:none;
border: none;
 }

 img{
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
-webkit-user-modify: read-write-plaintext-only;
outline:none;
border: none;
border-style: none;
  }

 body, textarea:focus, input:focus, area:focus{
    outline:none;
    border: none;
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
    -khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-modify: read-write-plaintext-only;
}

a{
   outline:none !important;
   border: none !important;
}

a img
{
    border:none;
    outline:none;
}

area{
outline:none;
border: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-modify: read-write-plaintext-only;
}

#map {
outline:none;
border: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0); 
-khtml-user-select: none;
    -o-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    user-select: none;
    -webkit-user-modify: read-write-plaintext-only;
}

 <img height="1024" src="img/MM.png" usemap="#MM_map" width="768" hidefocus="true">
 <area coords="35,116,349,225" href="#HULU" id="HULU_id" onclick="$('#HULU').click();" shape="rect" style="border: none;" onfocus="blur();">
StealthRT
  • 10,108
  • 40
  • 183
  • 342
  • Try capturing onblur event & call e.preventDefault()? It works for some non-mobile browsers -don't have phone to test right now. – Jamie Treworgy Jan 03 '13 at 02:26
  • http://stackoverflow.com/questions/8880627/webkit-tap-highlight-color-not-applied-to-area-tag Try looking at this topic, might have a solution to your problem. – Mark Verkiel Jan 04 '13 at 10:35
  • @StealthRT: did you find a solution for the problem? would you mind sharing? – Etienne678 May 12 '13 at 15:05

2 Answers2

0

The only way I could prevent that was by capturing the ontouchend event and preventing default browser behavior by returning false on the handler.

with jQuery:

$("map area").on("touchend", function() {
   return false;
});
Roberto Andrade
  • 1,793
  • 1
  • 21
  • 27
0

Simple way. Proven. Used this again, just now even, in Android cordova app.

img[usemap], map area {
     outline: none;
}

enjoy

AJD
  • 46
  • 4