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
dotted line around html area/map button
-
marioAlberto
- Posts: 8
- Joined: November 23rd, 2015, 2:16 pm
-
malliz
- Folder@Home
- Posts: 43796
- Joined: December 7th, 2002, 4:34 am
- Location: Australia
Re: dotted line around html area/map button
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"
"Terry Pratchett"
-
marioAlberto
- Posts: 8
- Joined: November 23rd, 2015, 2:16 pm
Re: dotted line around html area/map button
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
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
- Posts: 39952
- Joined: October 19th, 2007, 1:53 am
- Location: The South Coast of N.S.W. Oz.
Re: dotted line around html area/map button
Moving this to Web Dev....
[Ancient Amateur Astronomer.]
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)
Win-10-H/64 bit/500G SSD/16 Gig Ram/450Watt PSU/350WattUPS/Firefox-115.0.2/T-bird-115.3.2./SnagIt-v10.0.1/MWP-7.12.125.
(Always choose the "Custom" Install.)
-
Pim
- Posts: 2215
- Joined: May 17th, 2004, 2:04 pm
- Location: Netherlands
Re: dotted line around html area/map button
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.
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
Re: dotted line around html area/map button
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...
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
- Posts: 11758
- Joined: December 19th, 2004, 12:26 am
- Location: Silicon Valley, CA USA
- Contact:
Re: dotted line around html area/map button
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
-
marioAlberto
- Posts: 8
- Joined: November 23rd, 2015, 2:16 pm
Re: dotted line around html area/map button
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
- Posts: 2215
- Joined: May 17th, 2004, 2:04 pm
- Location: Netherlands
Re: dotted line around html area/map button
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!
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
Re: dotted line around html area/map button
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
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
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: dotted line around html area/map button
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.
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
Re: dotted line around html area/map button
Yes, the outline (dotted or solid) when the mouse is pressed (I said onclick) is what I need to avoid
-
trolly
- Moderator
- Posts: 39851
- Joined: August 22nd, 2005, 7:25 am
Re: dotted line around html area/map button
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.
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.
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
Re: dotted line around html area/map button
Quite simple and clever solution! thx a lot, indeed!