Hi,
I am having a problem with Safari 5.1 with an image map. I designed an Image Map for my Website in Fireworks with three hotspots.
When you click on the hotspot in Safari to link to the page a border appears around the hotspot. It doesn't happen in any other browser.
Anyone have an idea how to get around this?
Web address is: http://79.170.44.76/agrisearch-site.org/
iMac 3.06 24", Mac OS X (10.6.2), 4gb RAM
I'm having the same problem. Image maps are supposed to be invisible. Upon clicking, not only does the image map show as a blue outline, but is stays on until you click somewhere else. I would also add that this did not happen in previous versions of Safari. Is this a Safari 5.1 bug, or do we need to code around it?
outline:none; for the area style seems to remove it
Thanks, andyBall_uk - that worked!
Hi Thanks folks, I took me a long time with different permutations but eventually I got it sorted. I didn't know I had to include "area" in the css.
To explain it to people like myself
Give your Image Map an id say id="imagemap"
In your CSS put the following
#imagemap area {
outline:none;
}
This was exactly what I´ve been looking for! I have spent some time searching the web for a solution to this problem and now it works perfectly! Thanks a lot!!
Hi
I have this same problem but am a bit of a web numpty - I did each page simply as a massive jpeg using hotspots for links but now they've all got this blue outline - can anyone help?! Have tried to add the suggestions below to the code but no luck so far. Seems to be in Safari only.
cheers
< Link Edited By Host >
Howdy, could you be so kind as to show where in your CSS this goes? Thanks Don H
Well I found out! Here yer go! Paste the code in bold in the same area as the example and any Dreamweaver CS5.5 Hot Spots you create, this will get rid of the Blue Border when the links are clicked on in Safari. You would think either Apple or Adobe would sort this? Make life alot easier?
<html>
<head>
<title>"Trailer Music"</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<style type="text/css">
body {
margin-left: 10px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
}
*:focus
{
outline: none;
outline-width: 0;
}
</style>
</style>
</head>
<body bgcolor="#FFFFFF">
<!-- Save for Web Slices (Untitled-1 - Slices: 01, 02, 03, 04) -->
<table id="Table_01" width="742" height="578" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<img src="http://www.donhughes-music.com/mailtrailers/images/index_01.jpg" alt="image1" width="361" height="298" border="0"></td>
<td><img src="http://www.donhughes-music.com/mailtrailers/images/index_02.jpg" alt="dhm link" width="381" height="298" border="0" usemap="#click"></td>
</tr>
<tr>
<td>
<img src="http://www.donhughes-music.com/mailtrailers/images/index_03.jpg" alt="" width="361" height="280" border="0" usemap="#Map"></td>
<td><a href="http://trailers.donhughes-music.com"><img src="http://www.donhughes-music.com/mailtrailers/images/index_04.jpg" alt="image4" width="381" height="280" border="0"></a></td>
</tr>
</table>
<!-- End Save for Web Slices -->
<map name="click">
<area shape="rect" coords="51,135,260,185" href="http://trailers.donhughes-music.com" target="_blank" usemap="#click" border="0">
</map>
<map name="Map">
<area shape="rect" coords="12,140,276,198" href="http://www.donhughes-music.com" target="_self" alt="DHM Link">
</map>
</body>
</html>
Hello
Im still lost and cant get it to work??
Thanks, this totally worked for me as the other ones didn't. Phew!
*:focus
{
outline: none;
outline-width: 0;
}
Here's another fix: create rollover images of the same image. Blue lines gone.
Worked for me... thanks everyone
Ho do you remove Border on Image Map Links in Safari
