Android ImageMap WebKit Highlightcolor

Question

Hi there i got following problem:

-I am using an ImageMap to make different parts of an image clickable, which works fine. I am intercepting the link clicks via a WebViewClient and do something else with them. Problem is, i don´t want the clicked area to be highlighted/selected. The following style doesn´t seem to work. I have tested this on various Android devices (2.2, 2.3, 4.0 etc. ) and the rectangle lights up everytime i click on the area of the image. Anybody got any ideas ?

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
   <style>
    a{outline:none;}
    a:active{outline:none;}
    a:focus{outline:none;}
    area,area:active,area:focus {outline: none; border:0; }
    *{-webkit-tap-highlight-color:rgba(0,0,0,0);}
    </style>
  </head>
  <body>
    <img usemap="#map1" src="sourceimage" >
    <map name="map1">
     <area href="do1" alt="text1" coords="338,142,209,182"
          shape="rect">
   ...

    </map>
  </body>
</html>

I just found the answer to it. It has nothing to do with the html image map per se. I just forgot to set ***webView.setFocusableInTouchMode(false);*** which solved the problem of highlighting the selection. — tenshox, Apr 27 '12 at 14:04

score 0 · Accepted Answer · answered Apr 30 '12 at 13:56

0

I just found the answer to it. It has nothing to do with the html image map per se. I just forgot to set webView.setFocusableInTouchMode(false); which solved the problem of highlighting the selection.

answered Apr 30 '12 at 13:56

tenshox

13
3

score 0 · Answer 2 · edited May 23 '17 at 12:30

0

This worked for me:

$("map area").on("touchend", function() {
    return false;});

According with: Removing heighlight from image map area in Android 4.x app via PhoneGap Build

edited May 23 '17 at 12:30

Community

1
1

answered May 18 '15 at 03:26

Cesar Aguirre

41
4

Android ImageMap WebKit Highlightcolor

2 Answers2