CODEWITHSUNDEEP
javascripthtmlcoordinatesimagemap
user3755799
user3755799

Reputation:

Outer Coordinates for ImageMap

I have an Image Map like below, One Place inside another as follows:

enter image description here

How to get the Coordinates for Outer place without selecting inside. I'm using this Link to get the coordinates of the map.

(i.e i need to get UpperHanover's coordinates along when hovered on the three areas it should not show Upperhanover.)

I want get coordinates for the outer area without selecting inside area as follows. enter image description here

As per suggested answer below i'm getting image map as folloes: but i dont want to see the border line. enter image description here

Sorry for my poor explanation. Please ask if you are not able to understand.

Upvotes: 1

Views: 246

Answers (5)

icke
icke

Reputation: 1578

I would try to use a "poly" shaped area that encloses the white area.

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#example"/>
<map name="example">
  <area shape="poly" coords="0,0, 280,0, 280,50, 250,50, 250,150, 320,150, 320,50, 280,50, 280,0, 538,0, 538,190, 0,190" alt="clickable area" href="javascript:alert('Click!')">
</map>

I have created a JSFiddle as an example. The yellow "o" of the logo is not clickable while the rest is. http://jsfiddle.net/pXth7/

I hope I understood your problem correctly.

Edit: I did not understand it correctly. Apparently you want to make the clickable areas visible with some library or other. The only solution to that I can think of is this: http://jsfiddle.net/X4mPW/10/

Upvotes: 3

Philipp Werminghausen
Philipp Werminghausen

Reputation: 1152

Image maps are not really for coloring, but is this what you are looking for? http://jsfiddle.net/me2loveit2/X4mPW/8/

<area shape="rect" coords="240,45,330,140" alt="UPPER HANOVER TOWNSHIP">
  <area shape="rect" coords="0,0,538,190" alt="UPPER HANOVER TOWNSHIP" href="javascript:alert('Click!')">

Upvotes: 1

Julian
Julian

Reputation: 4366

From what you have said, I have the impression that

  1. You want to see information when you hover UpperHanover (the coordinates of the area?), but not when you hover the smaller inside areas.
  2. You don't want to see a focus line around the area when you click it.

I have forked the JSFiddle of icke to solve both issues here: http://jsfiddle.net/ACjBQ/1/

(1.) is solved by adding a title attribute to the <area> tag with the contents that you want to have. I just copied the value of the coords attribute but you can substitute any text of your choosing. (2.) is solved by adding some JQuery code that un-highlights the area as soon as you click it.

Please let us know whether this is what you intended.

Upvotes: 1

prakashstar42
prakashstar42

Reputation: 687

Checkout the link I have given link 1 to entire logo and link 2 to red color 'O'

http://jsfiddle.net/pXth7/1/

<img src="https://www.google.de/images/srpr/logo11w.png" usemap="#Map"/>
<map name="Map"><area shape="circle" coords="179,97,60" href="javascript:alert('Click 1')">
  <area shape="rect" coords="42,16,472,167" href="javascript:alert('Click 2')" >
</map>
</map>

Upvotes: 1

Crozin
Crozin

Reputation: 44376

You could create two separate shapes for a single map:

<img src="EFPvH.png" alt="" usemap="#map" />
<map name="map">
    <area shape="poly" coords="30, 126, 19, 56, 80, 52, 103, 68, 106, 62, 127, 75, 145, 74, 176, 96, 174, 71, 188, 71, 188, 142, 93, 145, 91, 120" />
    <area shape="poly" coords="16, 7, 185, 9, 188, 67, 178, 67, 173, 65, 148, 64, 123, 49, 91, 37, 83, 53, 22, 55" />
</map>

First shape covers Upper Upper Hanover, and second shape covers Lower Upper Hanover.

enter image description here

Upvotes: 2

Related Questions