Remove image map border

Hello, I tried to check if there's an solution to my problem in this forum and around the web.
I found something but can't really get to get my problem solved.
I made an hotspot within an image on Dreamweaver (cs6)
It's a polygonal area.
I found solutions for image border but not for a polygonal area.
Can somebody help me?
Here's the code. maybe it's a bit messed up becuase I tried and tried, but it seems to work correctly (except for polygonal border still showing up)
<td><img src="/imgs/cristianapalandri-transparent.png" width="140" height="88" usemap="#Map" border="0" style="border": "0"; outline: "0">
</td>
</tr>
</table>
<map name="Map" id="Map">
<area shape="poly" coords="31,53,41,34,37,15,63,21,72,10,88,22,122,25,106,51,108,74,68,64,51,73,46,52" href="abstract.html" target="_self" />
</map>
</body>
</html>
It's a transparent png in a table, this because i have a background image.
here's the link.
http://www.cristianapalandri.com/
Hope you can help me.
Coz

Your css is very flawed. You currently have this as your img tag...
<img src="/imgs/cristianapalandri-transparent.png" width="140" height="88" usemap="#Map" border="0" style="border": "0"; outline: "0">
It should be written like this...
<img src="/imgs/cristianapalandri-transparent.png" width="140" height="88" usemap="#Map" style="border:none;" />
There is no need to remove the outline, that is used for accessibility reasons and should be left in.

Similar Messages

Ho do you remove Border on Image Map Links in Safari

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/

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">

<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>

<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>

Black border around hotspots in Image map?

I have an image map in my HTML file that contains three
circular hotspots. When they're viewed in a browser, each one has a
black border around it after it's clicked on. I've seen other help
threads on the border problem talk about putting 'border:none" in
the IMG tag, but there's no IMG tag..it's an image map and border
is already set to "0". The code is below:
<map name="satelliteLinks">
<area shape="circle" coords="94,64,41" href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
<area shape="circle" coords="297,51,48" href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
<area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
target="_self" />
</map>
Any suggestions would be very helpful as my deadline to have
this complete is today!!

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Remove the dotted line in the image map

dear all, i would want to know how to remove the dotted line
of the image map, for my case, i cannot see the dotted line in IE
but can see the line in firefox, (in my boss computer, he can see
the dotted line in both IE and firefox)
i have try some method such as using the component of
Remove
IE Link Scrubber by PVII. while i find it is not work. could
any one give some suggestion for me to remove the dotted link of
the image map or give me some ways that other than using map.
thx a lot !!!!!!!!

i have find a way to solve the problem of the dotted line in
the image map
e.g. <map name="123" >
<area style="cursor: hand" shape="circle"
coords="223,261,76"
onClick="checkit('m_strategic/m_strategic.cfm')"></map>
the checkit() method is just to redirect the page into other
page only.
however another problem is face, the cursor will not change
to hand when i point to the image map, i have try adding
onMouseMove="this.style.cursor=hand" on the <area> tag
however it don;t work, it only work when i put into the <img>
tag. can any one tell me how to change the mouse cursor in this
situtation??
thx a lot

Remove blue boarders on hotspot image maps?

Hi
Something changed in Safari recently and all my hotspot image maps now have a blue boarder when clicked: www.harveyregan.com
I'm afraid, as a web know-nothing, I just used Dreamweaver to make a site with tables, big jpegs and links/navigation through said hotspots. No Css links. Is there any way out there to correct these lines?
Cheers
DazzaHR

A friend helped me sort it using this code after the first body tag in the coding:
}area {
outline:none;
He did change the map name too I think but I just remember going through each page and copying the above into the code and it worked. Hope that helps

Adding A HREF or image map to an image puts 3px L/R padding on image

Hi all --
I'm having an interesting problem. I'm designing a web page that has a navigation banner (home - programs - schedule of events - contact us - downloads) that is made up of a .png for each page (i.e. home.png, programs.png, etc). My page is 1000px wide and all of the navigation banner's images add up to 1000px wide.
I'm using JavaScript to create an onMouseOver and onMouseOut effect on each of the images. The problem that I'm having occurs when I tried to add a link (either by <A HREF= or using an image map). Whenever I add a link to the image, a small (3px) area of white space shows up to the right of the image. This shifts all of my other images 3px to the right (and 3 more for each link I add to subsequent images) thus making the total width of the navigation banner over 1000px and the last image gets shoved to a new line.
I can find no way to get rid of this white space other than to remove the link from the image. There is no property on the page that adds any sort of padding, margins, or borders to images or links, so I can see no property that has to be changed.
Help! How do I get rid of this white space but still keep the link on the image??
[I've attached a screen shot showing a before/after of the images without/with links]
Thanks in advance!
//kl

First, how are you looking at it?
Internet Exploder frequently adds padding and space -- especially where there is white space in your code (so take that out for a start). Additionally, if you are using Microsoft's non-compliant browsers, you will note that many of them automagically adjust placement of objects and you have to write code specifically to stop that from happening.

For Internet Exploiter 6, you literally may need to rewrite navigation:

Now my menu has a special CSS stylesheet for that idiotic browser here:
ul#content {
background-image: url("../content_images/bg.jpg");
background-repeat: repeat-x;
cursor: default;
height: 30px;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul {
cursor: default;
font-size: 0;
list-style-type: none;
margin: 0 0 0 0;
padding: 0 0 0 0;
ul#content ul li {
background-image: none;
border-bottom: solid 1px black;
float: none;
margin-bottom: -1px;
ul#content li {
background-image: none;
border-bottom: solid 1px black;
float: left;
margin-bottom: -1px;
padding: 0 0 0 0;
position: relative;
white-space: nowrap;
z-index: 100;
ul#content li ul {
display: none;
top: 0;
ul#content li.hover ul {
display: block;
position: absolute;
ul#content li.current ul {
position: absolute;
ul#content li {
background-image: url("../content_images/center.jpg");
background-repeat: repeat-x;
ul#content li span {
background-image: url("../content_images/right.jpg");
background-position: right top;
background-repeat: no-repeat;
display: block;
ul#content li span a {
background-image: url("../content_images/left.jpg");
background-position: left top;
background-repeat: no-repeat;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
height: 20px;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: center;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content li * a {
height: auto;
width: auto;
ul#content li span * a {
height: auto;
width: auto;
ul#content ul.level-1 {
left: 0px;
top: 100%;
ul#content ul.level-1 li {
background-image: none;
ul#content ul.level-1 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li * a {
height: auto;
width: auto;
ul#content ul.level-1 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 {
left: 112px;
ul#content ul.level-2 li {
background-image: none;
ul#content ul.level-1 ul.level-2 li a {
background-color: #DA4D33;
background-image: none;
border-bottom: dotted 1px #E9E5F9;
border-left: solid 1px #E9E5F9;
border-right: solid 1px #656586;
color: #fff;
display: block;
font-family: "Trebuchet MS", Helvetica, sans-serif;
font-size: 10px;
font-style: normal;
font-weight: bold;
margin: 0 0 0 0;
padding: 5px 5px 5px 5px;
text-align: left;
text-decoration: none;
text-transform: uppercase;
width: 100px;
ul#content ul.level-1 ul.level-2 li a.active {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-2 li * a {
height: auto;
width: auto;
ul#content ul.level-2 li span * a {
height: auto;
width: auto;
ul#content ul.level-1 ul.level-2 li.hover a {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;
ul#content ul.level-1 ul.level-2 li.current a.current {
background-color: #E9E5F9;
border-bottom: dotted 1px #DA4D33;
border-right: solid 1px #E9E5F9;
color: #332151;
font-weight: bold;
text-decoration: none;

How do I update/edit/change an image map in Fireworks CS4 or CS5?

Hi,
I've created an imagemap in Fw CS4, exported the image + html file, and it works ok.
1. I closed Fireworks, then ran it again and re-opened the exported PNG, and could see the hotspots, and could edit/update/add/remove them.
2. I closed Firewoks again, then moved the exported .png image (the original was a PNG as well) and html file to a different folder.
Problem: When I open the (exported) image, I can no longer edit the hotspots. The image map still works (in a browser), however.
Doesn't the HTML file define the hotspots? How do I update or edit an image map in Fireworks? Do I need to re-import the HTML file somehow? Fw help isn't very helpful on this topic.
I've also found that Fw seems to change the PNG when exporting it. Is it adding some kind of metadata to the exported PNG?
I've made sure the "Show slices and hotspots" button is on. This is really puzzling!
Environment: Windows XP SP3, Fireworks 10.03.011

Thanks to you both.
I think I understand what's happened, and yes, I've overwritten my original PNG
sigh. Fireworks doesn't really make this obvious!
That renaming tip is great! We already have a process for making PNGs of marked-up PDFs (so the extension is .pdf.png), so this will fit in just nicely!
You both ROCK!

Image Map with rollover mouse effect

Hi,
I inserted a image map to portal and I'm facing following problem:
The image is a world map and I want the regions e.g. North America to be highlited if the mouse is over the region. I've already created the images for that and have uploaded them.
How can I reach my goal? Has anyone an idea?
Here's my image map so far:
<MAP NAME="mymap">
<area shape="poly" coords="9,31,10,43,8,56,24,49,41,66,45,102,63,127,86,136,69,105,85,105,150,35,156,11,136,5,100,17,78,25,62,31,8,26,10,29,10,29,3,20"
HREF="http://server:7778/portal/page?_pageid=553,68779&_dad=portal&_schema=PORTAL" target="_blank"
alt = "North America"
onmouseover="mymap.src='http://server:7778/pls/portal/docs/PAGE/PGR_BRS_PUR/TAB_STANDARD_INFO/TAB78030/WORLD_NA.BMP'">
</MAP>
Best Regards
Daniela

<img src="/../..../img.gif" border="0" name="image" width="453" height="417" usemap="#imageMap">
<map name="imageMap">
<area shape="poly" coords="277,....."
href="/portal/page?_pageid=313,215796&_dad=portal&_schema=PORTAL" target="_top"
onMouseOver="document.images['image'].src='/..../....img_over.gif';"
onMouseOut="document.images['image'].src='/.../...img.gif';">
I use this in html pages that I integrate in portal trough URL pages (for easier updates management). But it should work directly in portal imagemap too.
Regards
Loko

Help with Images Maps,

Hi,
I have an HTML page where an IMG is loaded:
<img src="images/renders/Main_Image.jpeg" alt="Main Image" name="Main_IMG" width="800" height="600" border="0" usemap="#Main_MAP" id="Main_IMG" />
Then I have 4 images maps laid on top of the image:
<map name="Main_MAP" id="Main_MAP">
<area shape="poly" coords="--some numbers--" href="Area1.html" target="_parent" alt="Area1 Button" />
<area shape="poly" coords="--some numbers--" href="Area2.html" target="_parent" alt="Area2 Button" />
<area shape="poly" coords="--some numbers--" href="Area3.html" target="_parent" alt="Area3 Button" />
<area shape="poly" coords="--some numbers" href="Area4.html" target="_parent" alt="Area4 Button"/>
</map>
See Example:
Each area is essentially an invisible button. I want to make it so when the mouse hovers over the areas, I want the background image to display something different. On mouse out of the area, I want the image to go back. When the user clicks the Area, the user is moved to another part of the site.
Area 1 should change Main_Image.jpeg to Main_Image1.jpeg
Area 2 should change Main_Image.jpeg to Main_Image2.jpeg
etc.
I thought I could do this with Images Maps, but I can't figure out how. Is there an easier way? I have Dreamweaver CS4.
Thank you in advance!

Hey CF. Thank you very much for the reply! I thought I was losing my mind trying to figure out a way.
I'll try out the slice and dice approach... where's a turtle when you need one.
Cheers Dude.
S

Image map problem in Firefox 2.0.0.9

I have created a page in Dreamweaver with an image that has
an image map with six links. It works correctly in IE, Safari, and
Opera, but Firefox 2.0.0.9 has an issue. When I click on the top
link, I get the second url. When I click on the second, I get the
third url, and so on. The last hotspot does not seem to link at
all. The links seem to be offset by one position somehow. I think
this worked before 2.0.0.9, but I am not sure.. I thought that this
page was thoroughly tested previously.
Has anyone observed this before, and is there a solution?

Two items in the Advanced JavaScript window were removed as of the Firefox 4.0 version, but they are still available thru about:config .
Type '''about:config''' in the URL bar and hit Enter. <br />
''If you see the warning, you can confirm that you want to access that page.''
Filter = '''dom.disable_window_status_change''' = double-click to toggle to '''false''' to allow websites to mess with status text.

Does WDA support HTML Image Maps?

How to implement HTML image maps in Web Dynpro for ABAP?
Is the usemap (and related area shapes) available?
What I mean is explained by the following example:
<body>
<img src="trees.gif" usemap="#green" border="0">
<map name="green">
<area shape="polygon" coords="19,44,45,11,87,37,82,76,49,98" href="http://www.trees.com/save.html">
<area shape="rect" coords="128,132,241,179" href="http://www.trees.com/furniture.html">
<area shape="circle" coords="68,211,35" href="http://www.trees.com/plantations.html">
</map>
</body>
Thanks

Use IFrame UI element (if exists - hope yes) and link to it an HTML file with only your image-map.
If the image-map change by user, you must find the way to create the HTML in a dynamic way.
Sorry i haven't alot experience with ABAP, i did this in Java Web Dynpro but i guess you can do also with ABAP.

Google - web/images/maps bar is on top, not on side

google search results used to have the news/images/maps listings on the left of the results page.
now they are on the top of the results page.
this is not the case in chrome, so I think something changed, but I cannot figure it out.
I know my 8 year old was playing with google.org or some such to show his name instead of google, but I have not found what he may have done.
I re-set the defaults, no joy. nothing in the plug-ins......
is it OK to also ask if there is a way to remove the google services bar ? all these tool bars take full lines. only the microsoft START line is compact with multiple results on one bar.
Thanks !

hello dave, i'm not sure if it applies in your case, but from time to time google enables changes in the user interface for some of its users in order to test new designs and gather comparative data.
http://googlesystem.blogspot.co.at/2012/08/googles-sidebar-less-search-experiments.html
you could try to [[Clear the cache - Delete temporary Internet files to fix common website issues|clear the cache]] & [[Delete cookies to remove the information websites have stored on your computer|cookies from google.com]] and reload the page.

Exporting image maps, no option to save HTML

Hi All,
I'm trying to export an image map from Illustrator CS6. However I can't get it to save the HTML.
I've setup my hotspots etc. However when I do "Save for Web", there is no option to save "Images & HTML". It only gives me the option of "Image Only".
The only way I've been able to get the HTML is to click on "Preview" from the "Save for Web" screen, and then copy and paste the image map code from there.
I've also tested it with slices, and same thing. There just seems to be no way to get it to generate a HTML file.
Am I missing something? Is there some other way I'm supposed to get it to create the HTML?
Thanks,
Eugene

That's weird that they would simply remove the output option, but still allow URL's to be linked to an object.
Anyway thanks for the response. I've just done some hunting around in Fireworks and figured out how to link hotspots to the Illustrator objects, and output the HTML image map. Problem sorted

Multiple image maps opening defined new windows

I want to make one image, with two image maps. Each image map
when clicked, opens a new browser window that is SIZED depending on
how I define it to be in the code.
Here is an example of an image with two image maps. How do I
add the code to make those maps open a SIZED window (lets say 500
pixels x 500 pixels?)
<img src="sidebarhome.jpg" width="165" height="113"
border="0" usemap="#foo" href="makedonations.htm"
target="_blank">
<map name="foo">
<area shape="rect" coords="2,13,163,58"
href="ceo_message.htm" target="_blank" alt="In these pages you'll
learn more about the CSO Program.">
<area shape="rect" coords="3,63,164,86" href="csoblog.htm"
target="_blank" alt="Visit our blog and discover what we're doing
next.">
</map>

Select each map and apply an OpenBrowserWindow behavior to
it.
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.dreamweavermx-templates.com
- Template Triage!
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
http://www.macromedia.com/support/search/
- Macromedia (MM) Technotes
==================
"devidas" <[email protected]> wrote in
message
news:e2mprq$mn$[email protected]..
>I want to make one image, with two image maps. Each image
map when clicked,
> opens a new browser window that is SIZED depending on
how I define it to
> be in
> the code.
>
> Here is an example of an image with two image maps. How
do I add the code
> to
> make those maps open a SIZED window (lets say 500 pixels
x 500 pixels?)
>
> <img src="sidebarhome.jpg" width="165" height="113"
border="0"
> usemap="#foo"
> href="makedonations.htm" target="_blank">
>
> <map name="foo">
> <area shape="rect" coords="2,13,163,58"
href="ceo_message.htm"
> target="_blank"
> alt="In these pages you'll learn more about the CSO
Program.">
> <area shape="rect" coords="3,63,164,86"
href="csoblog.htm" target="_blank"
> alt="Visit our blog and discover what we're doing
next.">
> </map>
>

Global change for hotspots on image map

The image underneath my hotspots needed to be changed in
Photoshop. It's on all of the pages, and when the image was
replaced in Dreamweaver, I noticed that all of the hotspots that I
created manually in Dreamweaver were lost. How can I create
hotspots on just one of the pages and have it apply to all of the
pages? (I'm not using templates, by the way.)
I created slices on the image in Image ready, then exported
images and html, but I'm not sure how to incorporate and organize
everything in Dreamweaver.

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Remove image map border

Similar Messages

Maybe you are looking for