[webkit-dev] Possibilities to use border css property on image map...

Arunprasad Rajkumar ararunprasad at gmail.com
Mon Feb 25 23:26:18 PST 2013

Hello WebKit Folks,

Good day !!

I'm trying to use *border *CSS property on image map. Suppose if area
element gets focus it should highlight with different border size & color
than the default one.

So I tried using :focus { border:5px solid red; }. But it is not working in
WebKit based browsers. But *border *property works well for all other
elements(a,div,span,p,..) but not with *area. *I tried to debug it in
RenderImage::paintReplaced, but I don't get any clue about how the border
is drawn.
Below is the sample document,

<html><head><meta http-equiv="Content-Type" content="text/html;
:focus { border:5px solid red; }
body {margin: 100px;}
window.onload = function()
<map name="imagemap">
    <area id="area" shape="rect" coords="0,0,50,50" href="#dummy">
<img src="http://upload.wikimedia.org/wikipedia/en/5/5a/Webkit_Logo.png"
width="128" height="128" usemap="#imagemap">
<a href="#dummy">Anchor with Border</a>

I don't want to use any external js libraries to do this work(JQuery has a
plugin to do the task using canvas/svg).

Your help is greatly appreciated!!!.

Kind Regards,
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.webkit.org/pipermail/webkit-dev/attachments/20130226/40c939fd/attachment.html>

More information about the webkit-dev mailing list