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
Solved

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

Posted on 2013-07-02
6
606 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
  • 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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.

 

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

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

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.

Question has a verified solution.

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

This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
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.
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

861 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