MozillaZine

dotted line around html area/map button

Discuss how to use and promote Web standards with the Mozilla Gecko engine.
marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 23rd, 2015, 2:41 pm

On firefox 42.0 I can't avoid the dotted line around a tag area (map) html button.
The same html is ok on chrome, IE 10, microsoft edge, safari and opera.
Could someone help me? thx a lot in advance for your cooperation, mario

malliz
Folder@Home

User avatar
 
Posts: 43325
Joined: December 7th, 2002, 4:34 am
Location: Australia

Post Posted November 23rd, 2015, 3:20 pm

Is this for a web site you visit or one you are working on?
What sort of man would put a known criminal in charge of a major branch of government? Apart from, say, the average voter.
"Terry Pratchett"

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 24th, 2015, 3:25 am

A site i am working on.
The following is just a rough and simple example of something that works on Chrome, Safari, IE 11 (i said 10 and i was wrong: not yet tested IE 10), Microsoft Edge, Opera and shows the dotted line on Firefox:

<!DOCTYPE HTML>
<html>
<head>
<title>Map test</title>
</head>
<body style="margin:0">
<div id="acc0" style="position:absolute;width:700px;height:800px;background:#fdb;top:30px;left:30px" >
<img src="/img/bgBase.png" width="700" height="800" style="border: 0" alt="Accumulo0" usemap="#accumulo0" >
<map name="accumulo0" id="accumulo0" >
<area shape="circle" coords="669,133,120" href="javascript:void(0)" onclick="clic1()" onfocus="this.blur()"
title="Come Accumulo"/>
</map>
</div>
<div id="acc1" style="position:absolute;width:700px;height:800px;background:#fdb;top:30px;left:30px;display:none" >
<img src="/img/comeAccumulo_adipe.png" width="700" height="800" style="border:0" alt="Accumulo1" usemap="#accumulo1" >
<map name="accumulo1" id="accumulo1">
<area shape="poly" id="s11" coords="410,130,735,330,735,430,410,430" href="javascript:void(0)" onclick="clic2()" title="Adipe" onfocus="this.blur()" />
<area shape="poly" id="s12" coords="410,130,735,330,735,0,410,0" href="javascript:void(0)" onclick="clic2()" title="Liquidi" onfocus="this.blur()" />
</map>
</div>
</body>
<script>
function clic1(){
document.getElementById('acc1').style.display = 'block';
document.getElementById('acc0').style.display = 'none';
}
function clic2(){
document.getElementById('acc1').style.display = 'none';
document.getElementById('acc0').style.display = 'block';
}
</script>
</html>

Thx a lot, mario
Last edited by marioAlberto on November 25th, 2015, 12:46 am, edited 1 time in total.

LIMPET235
Moderator

User avatar
 
Posts: 37706
Joined: October 19th, 2007, 1:53 am
Location: The South Coast of N.S.W. Oz.

Post Posted November 24th, 2015, 3:38 am

Moving this to Web Dev....
Ancient Amateur Astronomer
Win-7-HP/IntelĀ® DualCore-2.0GHz/500G HDD/4 Gig Ram/550Watt PSU/350WattUPS/Firefox-20.0-56.0.1-57.0/T-bird-2.0.0.24/SnagIt-v10.0.1/MWP-7.11.0.
RadioYachting.
(Always choose the "Custom" Install.)

Pim

User avatar
 
Posts: 2200
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted November 25th, 2015, 2:26 pm

Which dotted line are we talking about? I don't see any.
There is, however, an 1px solid #C0C0C0 line around the large rectangle in Chrome that isn't there in SeaMonkey.
Groetjes, Pim

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 26th, 2015, 1:58 am

The dotted box that appears around the mapped area onclick.
As far as i know, putting onfocus="this.blur()" inside the area tag should be (in this case) the way to avoid the dotted box onclick. In fact, it works for Chrome and other browsers with the exception of Firefox (version 42.0). In Firefox, i'm not able to get rid of that box. This is my problem...

jscher2000

User avatar
 
Posts: 10077
Joined: December 19th, 2004, 12:26 am
Location: Silicon Valley, CA USA

Post Posted November 30th, 2015, 12:03 am

Can you link to a page demonstrating this problem? Without your image, it's hard to use your code.

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 30th, 2015, 2:24 am


marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 30th, 2015, 3:00 am

We just see it in firefox, but the important thing is that we should get rid of the dotted line whatever the navigator. Can you suggest the way to avoid it?

Pim

User avatar
 
Posts: 2200
Joined: May 17th, 2004, 2:04 pm
Location: Netherlands

Post Posted November 30th, 2015, 3:02 am

OK. There are a number of solutions here:
http://stackoverflow.com/questions/4821724
So depending on which browsers you want to support, you may want to implement some or all of those...

area {outline:0} as a style for the area
hidefocus="true" on the image
tabindex="-1" on the area

etc. They even mention the onfocus="blur()", so they've got everything covered!
Groetjes, Pim

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 30th, 2015, 3:28 am

All your suggestions are in place (all of them are in the source code, now), but in firefox the dotted circle onclick is still present.
Unfortunately, before writing on this forum, I read the forum that you mentioned (and others), but no results...
In any case thx for your support

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted November 30th, 2015, 4:24 am

I do not see a dotted line. Just a full line (at least it looks like a full line) when the mouse button is pressed.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 30th, 2015, 5:10 am

Yes, the outline (dotted or solid) when the mouse is pressed (I said onclick) is what I need to avoid

trolly
Moderator

User avatar
 
Posts: 39879
Joined: August 22nd, 2005, 7:25 am

Post Posted November 30th, 2015, 5:49 am

Strangely, when I remove the href attribute at least the small circle does not have an outline.

Edit: Found second map and removed href too. Now no outline is shown.
Think for yourself. Otherwise you have to believe what other people tell you.
A society based on individualism is an oxymoron. || Freedom is at first the freedom to starve.
Constitution says: One man, one vote. Supreme court says: One dollar, one vote.

marioAlberto
 
Posts: 8
Joined: November 23rd, 2015, 2:16 pm

Post Posted November 30th, 2015, 7:18 am

Quite simple and clever solution! thx a lot, indeed!

Return to Web Development / Standards Evangelism


Who is online

Users browsing this forum: No registered users and 1 guest