• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 672
  • Last Modified:

I can't get "HTML image map" to work on my page

Hi,
I have a page with a map and I want to have the areas clickable.
I made the image map details in dreamweaver and copied the HTML into my page.
but it doesn't seem to work?

<img src="file:///C|/Users/Steven H/Desktop/Temp/newmap.png" alt="South Africa Map" width="975" height="758" border="0" usemap="#Map" longdesc="Map South Africa Provinces" />
<map name="Map" id="Map">
  <area shape="poly" coords="647,240,654,280,673,278,690,290,710,268,721,267,722,260,706,244,728,237,735,216,720,220,712,200,715,191,689,202,674,203,675,226,663,235,655,227" href="#" target="http://www.essential1doctor.co.za/gauteng.html" alt="Gauteng" />
  <area shape="poly" coords="732,390,768,364,772,326,746,305,690,293,650,286,613,294,587,307,590,319,562,339,553,333,504,360,497,392,467,450,494,465,532,504,573,493,612,508,642,490,624,449,662,404,708,390" href="#" target="http://www.essential1doctor.co.za/free-state.html" alt="Free State" />
  <area shape="poly" coords="371,250,382,265,407,238,403,268,422,274,421,283,444,288,443,311,455,317,455,337,470,336,481,357,491,332,503,336,498,347,505,359,554,330,565,335,584,317,583,303,611,289,640,286,653,282,644,240,650,229,663,228,672,205,690,200,682,195,690,188,650,183,619,168,586,162,553,168,536,221,505,225,448,217,413,200,391,199" href="#" target="http://www.essential1doctor.co.za/north-west.html" alt="North West" />
<area shape="poly" coords="735,24,778,19,806,29,860,32,897,120,853,133,859,154,835,155,819,179,802,173,793,188,792,201,741,205,741,187,729,181,703,189,695,198,690,185,586,160,619,109,693,47,724,39" href="#" target="http://www.essential1doctor.co.za/limpopo.html" alt="Limpopo" />
<area shape="poly" coords="775,319,743,302,695,292,723,270,724,259,714,245,730,240,738,221,733,208,727,215,717,195,728,188,737,188,745,212,792,206,805,177,821,181,839,159,861,158,860,138,896,125,902,232,870,225,837,285,836,286,851,301,868,310" href="#" target="http://www.essential1doctor.co.za/mpumalanga.html" alt="Mpumalanga" />
<area shape="poly" coords="802,530,795,520,755,503,739,503,753,485,738,484,738,462,757,428,751,413,728,397,771,367,778,325,867,313,903,314,903,288,956,287,937,373,886,413,851,457" href="#" target="http://www.essential1doctor.co.za/kwa-zulu-natal.html" alt="Kwa-Zulu Natal" />
<area shape="poly" coords="429,694,428,688,413,683,425,676,414,666,376,660,391,633,410,630,404,606,426,600,435,592,443,595,461,582,458,569,474,563,484,550,525,536,538,508,572,497,612,513,646,493,667,499,684,506,691,483,699,479,734,469,735,487,748,487,741,505,795,525,799,533,738,593,671,640,604,679,549,678,542,688,546,699,509,693,498,708" href="#" target="http://www.essential1doctor.co.za/eastern-cape.html" alt="Eastern Cape" />
<area shape="poly" coords="92,526,17,385,37,380,36,366,41,359,55,355,60,365,65,369,71,375,66,379,74,386,88,396,158,403,170,410,179,400,196,387,219,376,218,167,248,194,269,250,254,270,260,284,268,282,318,286,324,275,334,278,347,260,366,251,378,265,406,244,403,272,420,277,439,292,442,312,453,317,453,341,470,340,482,360,492,336,496,336,497,349,501,360,467,453,533,508,526,532,485,548,470,562,454,568,440,567,414,565,399,578,355,560,342,589,315,591,278,617,265,631,238,632,227,611,241,594,227,592,198,610,194,620,194,590,171,572,157,521,163,507,135,492,122,512,100,515" href="#" target="http://www.essential1doctor.co.za/northern-cape.html" alt="Northern Cape" />
<area shape="poly" coords="129,719,119,697,123,684,123,672,116,664,98,640,102,621,113,622,122,593,119,572,92,535,102,519,120,515,136,495,159,510,169,568,192,592,193,623,231,596,236,599,229,616,238,636,267,638,315,594,339,593,357,563,395,581,415,573,455,568,459,579,443,593,410,602,406,630,389,630,377,657,413,669,420,677,414,686,426,693,410,704,346,698,328,714,303,719,274,718,251,725,224,738,204,738,183,724,157,718,150,707,140,701" href="#" target="http://www.essential1doctor.co.za/western-cape.html" alt="Western Cape" />
</map>

Open in new window


the live page is : http://www.essential1doctor.co.za/search.html

Please help me see where it's gone wrong.
0
StevenHook
Asked:
StevenHook
  • 3
  • 2
1 Solution
 
Meir RivkinFull stack Software EngineerCommented:
can u try something, take the target attribute value (the actual url) and place it instead of # in the href attribute.
0
 
StevenHookAuthor Commented:
Thanks.
This seems to work on my PC in a browser now but still not on the web server.

<body>
<img src="Temp/newmap.png" alt="South Africa Map" width="975" height="758" border="0" usemap="#Map" longdesc="Map South Africa Provinces" />
<map name="Map" id="Map">
  <area shape="poly" coords="647,240,654,280,673,278,690,290,710,268,721,267,722,260,706,244,728,237,735,216,720,220,712,200,715,191,689,202,674,203,675,226,663,235,655,227" href="http://www.essential1doctor.co.za/gauteng.html" target="_self" alt="Gauteng" />
  <area shape="poly" coords="732,390,768,364,772,326,746,305,690,293,650,286,613,294,587,307,590,319,562,339,553,333,504,360,497,392,467,450,494,465,532,504,573,493,612,508,642,490,624,449,662,404,708,390" href="http://www.essential1doctor.co.za/free-state.html" target="_self" alt="Free State" />
  <area shape="poly" coords="370,250,381,265,406,238,402,268,421,274,420,283,443,288,442,311,454,317,454,337,469,336,480,357,490,332,502,336,497,347,504,359,553,330,564,335,583,317,582,303,610,289,639,286,652,282,643,240,649,229,662,228,671,205,689,200,681,195,689,188,649,183,618,168,585,162,552,168,535,221,504,225,447,217,412,200,390,199" href="http://www.essential1doctor.co.za/north-west.html" target="_self" alt="North West" />
  <area shape="poly" coords="735,24,778,19,806,29,860,32,897,120,853,133,859,154,835,155,819,179,802,173,793,188,792,201,741,205,741,187,729,181,703,189,695,198,690,185,586,160,619,109,693,47,724,39" href="http://www.essential1doctor.co.za/limpopo.html" target="_self" alt="Limpopo" />
  <area shape="poly" coords="775,319,743,302,695,292,723,270,724,259,714,245,730,240,738,221,733,208,727,215,717,195,728,188,737,188,745,212,792,206,805,177,821,181,839,159,861,158,860,138,896,125,902,232,870,225,837,285,836,286,851,301,868,310" href="http://www.essential1doctor.co.za/mpumalanga.html" target="_self" alt="Mpumalanga" />
  <area shape="poly" coords="802,530,795,520,755,503,739,503,753,485,738,484,738,462,757,428,751,413,728,397,771,367,778,325,867,313,903,314,903,288,956,287,937,373,886,413,851,457" href="http://www.essential1doctor.co.za/kwa-zulu-natal.html" target="_self" alt="Kwa-Zulu Natal" />
  <area shape="poly" coords="429,694,428,688,413,683,425,676,414,666,376,660,391,633,410,630,404,606,426,600,435,592,443,595,461,582,458,569,474,563,484,550,525,536,538,508,572,497,612,513,646,493,667,499,684,506,691,483,699,479,734,469,735,487,748,487,741,505,795,525,799,533,738,593,671,640,604,679,549,678,542,688,546,699,509,693,498,708" href="http://www.essential1doctor.co.za/eastern-cape.html" target="_self" alt="Eastern Cape" />
  <area shape="poly" coords="92,526,17,385,37,380,36,366,41,359,55,355,60,365,65,369,71,375,66,379,74,386,88,396,158,403,170,410,179,400,196,387,219,376,218,167,248,194,269,250,254,270,260,284,268,282,318,286,324,275,334,278,347,260,366,251,378,265,406,244,403,272,420,277,439,292,442,312,453,317,453,341,470,340,482,360,492,336,496,336,497,349,501,360,467,453,533,508,526,532,485,548,470,562,454,568,440,567,414,565,399,578,355,560,342,589,315,591,278,617,265,631,238,632,227,611,241,594,227,592,198,610,194,620,194,590,171,572,157,521,163,507,135,492,122,512,100,515" href="http://www.essential1doctor.co.za/northern-cape.html" target="_self" alt="Northern Cape" />
  <area shape="poly" coords="129,719,119,697,123,684,123,672,116,664,98,640,102,621,113,622,122,593,119,572,92,535,102,519,120,515,136,495,159,510,169,568,192,592,193,623,231,596,236,599,229,616,238,636,267,638,315,594,339,593,357,563,395,581,415,573,455,568,459,579,443,593,410,602,406,630,389,630,377,657,413,669,420,677,414,686,426,693,410,704,346,698,328,714,303,719,274,718,251,725,224,738,204,738,183,724,157,718,150,707,140,701" href="http://www.essential1doctor.co.za/western-cape.html" target="_self" alt="Western Cape" />
</map>
</body>

Open in new window

0
 
TvMptCommented:
You forget the #map

replace

<img width="975" height="758" alt="South Africa Map" src="/images/newmap.png">

with

<img width="975" height="758" alt="South Africa Map" src="/images/newmap.png" usemap="#Map" >
0
Cloud Class® Course: Amazon Web Services - Basic

Are you thinking about creating an Amazon Web Services account for your business? Not sure where to start? In this course you’ll get an overview of the history of AWS and take a tour of their user interface.

 
StevenHookAuthor Commented:
It seems like joomla strips that out?
I do paste it, but when I go view the source after publishing it it's gone
0
 
TvMptCommented:
(i) I believe that you are using Tiny MCE Editor. Open the plugin Editor - TinyMCE for edit in the Plugin Manager (Extensions -> Plugin Manager) and set the parameters as follows:

(a) Functionality to Extended

(b) Code cleanup on save to Never or Front Only


(ii) Also, review the document http://docs.joomla.org/Why_does_some_HTML_get_removed_from_articles_in_version_1.5.8%3F that would be useful.


(iii) You could also set the editor as No Editor in the Global Configurations and edit the article.
0
 
StevenHookAuthor Commented:
Thanks
Worked to use "no editor"
The other's I couldn't find the options as described.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now