Celebrate National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

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

Posted on 2013-07-02
6
Medium Priority
?
637 Views
Last Modified: 2013-07-02
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
Comment
Question by:StevenHook
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
6 Comments
 
LVL 42

Expert Comment

by:sedgwick
ID: 39292632
can u try something, take the target attribute value (the actual url) and place it instead of # in the href attribute.
0
 

Author Comment

by:StevenHook
ID: 39292635
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
 
LVL 9

Expert Comment

by:TvMpt
ID: 39292642
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
Don't Cry: How Liquid Web is Ensuring Security

WannaCry is just the start. Read how Liquid Web is protecting itself and its customers against new threats.

 

Author Comment

by:StevenHook
ID: 39292651
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
 
LVL 9

Accepted Solution

by:
TvMpt earned 2000 total points
ID: 39292662
(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
 

Author Closing Comment

by:StevenHook
ID: 39293200
Thanks
Worked to use "no editor"
The other's I couldn't find the options as described.
0

Featured Post

Will your db performance match your db growth?

In Percona’s white paper “Performance at Scale: Keeping Your Database on Its Toes,” we take a high-level approach to what you need to think about when planning for database scalability.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Is your Office 365 signature not working the way you want it to? Are signature updates taking up too much of your time? Let's run through the most common problems that an IT administrator can encounter when dealing with Office 365 email signatures.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

730 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question