Ciao a tutti,
sto creando una piccola paginetta iniziale che userò come HomePage del mio sito per indirizzare gli utenti sul mio:
shop
forum
gruppo facebook

Per far questo ho mappato un'immagine in questo modo:

codice HTML:
<!doctype html>

<html lang="it">
<head>
    <title>Home Page GDA-Italia</title>
    <link rel="stylesheet" type="text/css" href="home.css">
</head>
<body>

<div id="sfondo"></div>
    
<div id="home">
         
<img src="homepage.jpg" width="800" height="600" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,200,200" href="/forum">
  <area shape="rect" coords="0,600,200,480" href="http://www.facebook.com/groups/gda.italia">
  <area shape="rect" coords="317,103,754,574" href="/shop">  
</map>

</div>

</body>
</html>
Il file css home.css è questo:

codice HTML:
html,body{
height:100%;
margin:0;
}

#home{
width: 800px;
height: 600px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -400px;
margin-top: -300px;
}

img{
border: none;
}
Quando clicco su una delle 3 aree mappate, per un attimo prima che si apra il link desiderato si vede un bordo blu.

Ho provato in diversi modi ma purtroppo non riesco.

Vorrei effettuare la modifica se possibile sul css.

Qualcuno sa dirmi come fare?

Grazie