Solved

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

Posted on 2013-07-02
6
598 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
Live: Real-Time Solutions, Start Here

Receive instant 1:1 support from technology experts, using our real-time conversation and whiteboard interface. Your first 5 minutes are always free.

 

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

Gigs: Get Your Project Delivered by an Expert

Select from freelancers specializing in everything from database administration to programming, who have proven themselves as experts in their field. Hire the best, collaborate easily, pay securely and get projects done right.

Question has a verified solution.

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

Suggested Solutions

In this article, we will look at our content management system as a whole, to get an idea of how we will start to manage these content items.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

786 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