Why doesnt this map work, in Firefox?
<img usemap="m_one" id="one" src="/images/layout/town_and_country/Town__Country_Web_Map.jpg" alt="Town__Country_Web_Map" border="0" height="507" width="720">
<map id="m_one" name="m_one">
<area href="/local-area/in-the-community" coords="374,278,375,267,378,257,390,240,407,228,417,225,428,224,438,225,448,228,465,240,477,257,480,267,481,278,480,288,477,298,465,315,448,327,438,330,428,331,417,330,407,327,390,315,378,298,375,288,374,278,374,278" shape="poly">
<area href="/local-area/woodside-village-profile" coords="589,63,590,56,592,50,599,40,609,33,616,31,623,30,629,31,636,33,646,40,653,50,655,56,656,63,655,70,653,76,646,86,636,93,629,95,623,96,616,95,609,93,599,86,592,76,590,70,589,63,589,63" shape="poly">
<area href="/flamstead-village-profile" coords="571,392, 41" shape="circle">
<area href="/slip-end-village-profile" coords="575,118, 41" shape="circle">
<area href="/caddington-village-profile" coords="450,55, 41" shape="circle">
<area href="/aly-green-village-profile" coords="383,118, 41" shape="circle">
<area href="/Kensworth-village-profile" coords="235,144, 41" shape="circle">
<area href="/studham-village-profile" coords="53,147, 41" shape="circle">
<area href="/studham-village-profile" coords="145,304, 41" shape="circle">
</map>
Try adding a # inside "usemap"
<img usemap="#m_one" id="one" src="/images/layout/town_and_country/Town__Country_Web_Map.jpg" alt="Town__Country_Web_Map" border="0" height="507" width="720">
Related
I have an image map in my code witch is supposed to be the background, but when I change it to be the background image or just to fit nicely on screen, the image is the correct size, but the buttons stay in the same position, do anyone know what is solution to fix it?
<img src="thestartsmap.png" usemap="#image-map" > <br /> <!-- //class="fill" // style="width:100%; height:100%" // -->
<map name="image-map">
<area target="" alt="mercury" title="mercury" href="TheTerrestialsPlanets.aspx#mercury" coords="172,378,30" shape="circle">
<area target="" alt="venus" title="venus" href="TheTerrestialsPlanets.aspx#venus" coords="275,378,47" shape="circle">
<area target="" alt="TheEarth" title="TheEarth" href="TheEarth.aspx" coords="400,377,51" shape="circle">
<area target="" alt="mars" title="mars" href="TheTerrestialsPlanets.aspx#mars" coords="507,377,35" shape="circle">
<area target="" alt="jupiter" title="jupiter" href="TheJoviansPlanets.aspx#jupiter" coords="685,372,130" shape="circle">
<area target="" alt="saturn" title="saturn" href="TheJoviansPlanets.aspx#saturn" coords="912,273,968,187,1008,173,1034,203,1024,313,1042,376,1023,431,972,469,890,563,854,554,845,489,855,427,838,392,845,338,874,297" shape="poly">
<area target="" alt="uranus" title="uranus" href="TheJoviansPlanets.aspx#uranus" coords="1106,379,61" shape="circle">
<area target="" alt="neptune" title="neptune" href="TheJoviansPlanets.aspx#neptune" coords="1244,380,55" shape="circle">
<area target="" alt="TheTerrastialsPlanets" title="TheTerrastials" href="TheTerrestialsPlanets.aspx" coords="206,498,450,519" shape="rect">
<area target="" alt="TheJoviansPlanets" title="TheJovians" href="TheJoviansPlanets.aspx" coords="775,629,1048,657" shape="rect">
<area target="" alt="TheSun" title="TheSun" href="TheSun.aspx" coords="25,768,60,564,67,361,62,229,157,227,153,158,52,156,39,74,22,1,-1,0,1,768" shape="poly">
<area target="" alt="News" title="News" href="News.aspx" coords="466,136,476,170,511,182,511,150,523,148,529,134,550,122,599,166,623,143,576,98,600,66,582,44,546,67,491,22,469,48,507,88,439,89,437,113,509,117" shape="poly">
<area target="" alt="FormationAndStructure" title="FormationAndStructure" href="FormationAndStructure.aspx" coords="1154,56,1177,52,1196,58,1210,71,1216,92,1210,114,1195,130,1198,150,1251,152,1251,176,1233,179,1235,205,1108,205,1108,182,1090,181,1089,153,1152,153,1148,129,1137,116,1131,95,1135,71" shape="poly">
</map>
</div>
everytime I change the image to fit the screen, it does not change the position of the buttons.
I am an e-marketer so, I have to send the below HTML for header and footer in my emails. I did an image map for this and when I zoom in/out (100% messes things up) on Outlook, the links become messed up. Is there another way I can link icons from the header if imagemapping doesn't work?image of the header image of the footer
<!-- Header Start -->
<div align="center">
<img src="https://www.cisofficeplus.ca/Maestro/2020Emails/Templates/2021_eblastTemplates_Header.jpg" usemap="#image-map" >
<map name="image-map">
<table>
<tr>
<td>
<area target="" alt="Card" title="Card" href="https://corbettoffice.com/" coords="5,5,634,125" shape="rect"></td><td>
<area target="" alt="Monthly Flyer" title="Monthly Flyer" href="https://corbettoffice.com/content.aspx?l=0,1,782,811" coords="639,5,898,124" shape="rect"></td><td>
<area target="" alt="Furniture" title="Furniture" href="https://corbettoffice.com/search.aspx?q=furniture" coords="284,162,25" shape="circle"></td><td>
<area target="" alt="Workplace Wellness" title="Workplace Wellness" href="http://work-well.ca/index.asp?mn=240&utm_source=remarkety&utm_medium=email&utm_campaign=Corbett+J+-+Week+2A-+December+8%2C+2020_1_2&_rmId=W7JpEb6rjPtw7OEoZrL6Iw9E1" coords="351,161,26" shape="circle"></td><td>
<area target="" alt="Technology" title="Technology" href="https://corbettoffice.com/search.aspx?q=technology" coords="418,162,26" shape="circle"></td><td>
<area target="" alt="Office Supplies" title="Office Supplies" href="https://corbettoffice.com/search.aspx?q=office+supplies" coords="485,161,25" shape="circle"></td><td>
<area target="" alt="Arts" title="Arts" href="https://corbettoffice.com/search.aspx?q=art" coords="552,161,26" shape="circle"></td><td>
<area target="" alt="Facility and Breakroom" title="Facility and Breakroom" href="https://corbettoffice.com/search.aspx?q=cleaning+supplies" coords="620,161,25" shape="circle"></td>
</tr>
</table>
</map>
</div>
<!-- Header Finish-->
<!-- Footer Start -->
<div align="center">
<img src="https://www.cisofficeplus.ca/Maestro/2020Emails/Templates/2021_eblastTemplates_Footer.jpg" usemap="#image-map2">
<map name="image-map2">
<area target="" alt="Contact Us" title="Contact Us" href="https://corbettoffice.com/contact-us.aspx" coords="12,20,89,53" shape="rect">
<area target="" alt="Privacy Policy" title="Privacy Policy" href="" coords="100,22,184,52" shape="rect">
<area target="" alt="Facebook" title="Facebook" href="https://www.facebook.com/CorbettOP" coords="286,19,329,60" shape="rect">
<area target="" alt="Twitter" title="Twitter" href="https://twitter.com/OffcePls" coords="335,20,377,59" shape="rect">
<area target="" alt="Pinterest" title="Pinterest" href="https://www.pinterest.com/OffcePls/" coords="426,59,383,20" shape="rect">
<area target="" alt="Youtube" title="Youtube" href="https://www.youtube.com/OfficePlusSimplyMore" coords="472,19,431,58" shape="rect">
<area target="" alt="Blog" title="Blog" href="https://blog.office-plus.ca" coords="518,19,478,57" shape="rect">
<area target="" alt="Instantgram" title="Instantgram" href="" coords="565,19,525,58" shape="rect">
<area target="" alt="Linkedin" title="Linkedin" href="" coords="614,19,571,58" shape="rect">
<area target="" alt="WorkplaceWellness" title="WorkplaceWellness" href="http://www.work-well.ca/index.asp?mn=240" coords="738,74,891,5" shape="rect">
</map>
<div>
<!-- Footer Finish-->
I am trying to put an image map into my app and I have the following erb code:
<div class="col-xs-12 col-sm-4 text-center">
<!-- Image Map Generated by http://www.image-map.net/ -->
<%= image_tag "Remote.png", style: "width: 200px", usemap: "#image-map", alt: "Remote control menu. Yes, you get to hold it." %>
<map name="image-map">
<area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="241,595,103" shape="circle">
<area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="511,587,95" shape="circle">
<area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
<area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
<area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
<area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
<area target="" alt="My Mancard" title="My Mancard" href="<%= url_for edit_user_registration_path(current_user) %>" coords="241,315,140" shape="circle">
<area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="669,234,909,410" shape="rect">
<area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
<area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
<area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
<area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
<area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
<area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
<area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
<area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
</map>
</div>
When I look at the inspect source of the page it renders to:
<div class="col-xs-12 col-sm-4 text-center">
<!-- Image Map Generated by http://www.image-map.net/ -->
<img style="width: 200px" usemap="#image-map" alt="Remote control menu. Yes, you get to hold it." src="/assets/Remote-4f484678a9b3452f30cec85b33c1abf34aa0a74ef9c933b9c42d40a823c59b30.png" />
<map name="image-map">
<area target="" alt="BBQ" title="BBQ" href="/home/bbq" coords="241,595,103" shape="circle">
<area target="" alt="Jokes" title="Jokes" href="/home/jokes" coords="511,587,95" shape="circle">
<area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
<area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
<area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
<area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
<area target="" alt="My Mancard" title="My Mancard" href="/users/edit.1" coords="241,315,140" shape="circle">
<area target="" alt="Sign In" title="Sign In" href="/users/sign_in" coords="669,234,909,410" shape="rect">
<area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
<area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
<area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
<area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
<area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
<area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
<area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
<area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
</map>
</div>
The image appears but it does not seem to have any links. Can anyone see where I went wrong?
I found your problem.
You set a fixed width to img (style="width: 200px") and your coords is to full image size.
You will need to use a resized image on your generator, and avoid the css width.
<img src="images/imagemap.png" width="600" height="100" border="0" usemap="#map" />
<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Eric -->
<area shape="rect" coords="2,2,98,97" onclick="scrollto1()" style="cursor: pointer;" />
<area shape="rect" coords="102,3,202,95" onclick="scrollto2()" style="cursor: pointer;" />
<area shape="rect" coords="208,3,307,95" onclick="scrollto3()" style="cursor: pointer;"/>
<area shape="rect" coords="315,5,409,98" onclick="scrollto4()" style="cursor: pointer;"/>
<area shape="rect" coords="413,6,502,97" onclick="scrollto5()" style="cursor: pointer;"/>
<area shape="rect" coords="507,4,597,97" onclick="scrollto6()" style="cursor: pointer;"/>
</map>
The image map is clickable in all browsers except Internet Explorer 10. I am wondering if there is some way to get things working in Internet Explorer.
I have updated your code, its working now :)
you do not have the area self closing, and you were missing href="#" and style is not required at all :)
check the fiddle in case you want to check
Link : http://jsfiddle.net/MarmeeK/bD4s7/
<img src="http://images5.fanpop.com/image/photos/30600000/Template-800-x-100-pippy-and-jezzis-world-of-purdy-mindedness-30664157-800-100.jpg" width="600" height="100" border="0" usemap="#maps" alt="" />
<map name="maps">
<area shape="rect" coords="2,2,98,97" onclick="scrollto1()" style="cursor: pointer;" >
<area shape="rect" coords="102,3,202,95" href="#" >
<area shape="rect" coords="208,3,307,95" href="#" >
<area shape="rect" coords="315,5,409,98" href="#" >
<area shape="rect" coords="413,6,502,97" href="#" >
<area shape="rect" coords="507,4,597,97" href="#" onclick="javascript:alert('hi');" >
</map>
The code below works great in all modern browsers. I'm using a transparent gif as an image map so I can swap different keyboard images/divs below it to make the keyboard appear to be playable. In IE8 everything functions, but I get that ugly icon in the top left corner. Any ideas?
<div id="pressed-keys" class="kb-none">
<div id="kb-audio"></div>
</div>
<div id="mapped-keys" class="hide">
<img src="keyboard-overlay.gif" border="0" width="316" height="250" usemap="#keyboard-map" border="0" alt="Keyboard" class="alpha-0" style="background:transparent;border:0;" />
<map name="keyboard-map" id="keyboard-map">
<area id="key-1" class="kb1-C2" shape="poly" coords="77,155,88,149,157,189,165,182,213,208,193,229" href="#" alt="C">
<area id="key-2" class="kb2-C2s" shape="poly" coords="97,138,89,142,89,149,157,188,167,180,155,167" href="#" alt="C#">
<area id="key-3" class="kb3-D2" shape="poly" coords="111,138,105,141,155,166,168,179,166,182,214,208,232,191,184,168,182,170" href="#" alt="D">
<area id="key-4" class="kb4-D2s" shape="poly" coords="113,131,113,137,181,168,191,163,179,151,120,127" href="#" alt="D#">
<area id="key-5" class="kb5-E2" shape="poly" coords="233,190,186,168,192,163,180,150,129,129,131,129,247,174" href="#" alt="E">
<area id="key-6" class="kb6-F2" shape="poly" coords="248,173,259,161,215,145,209,149,140,125,133,129" href="#" alt="F">
<area id="key-7" class="kb7-F2s" shape="poly" coords="140,125,141,117,146,115,205,134,215,144,208,149" href="#" alt="F#">
<area id="key-8" class="kb8-G2" shape="poly" coords="260,160,270,149,226,135,224,137,205,133,216,144" href="#" alt="G">
<area id="key-9" class="kb9-G2s" shape="poly" coords="223,136,155,116,156,110,160,107,219,124,228,133" href="#" alt="G#">
<area id="key-10" class="kb10-A2" shape="poly" coords="221,124,229,133,228,135,270,149,278,139,237,127,236,127" href="#" alt="A">
<area id="key-11" class="kb11-A2s" shape="poly" coords="169,108,170,103,174,101,231,115,239,123,236,127" href="#" alt="A#">
<area id="key-12" class="kb12-B2" shape="poly" coords="278,138,286,129,234,117,240,123,238,126" href="#" alt="B">
<area id="key-13" class="kb13-C3" shape="poly" coords="285,128,233,115,230,114,182,102,185,100,250,114,253,111,291,120" href="#" alt="C">
<area id="key-14" class="kb14-C3s" shape="poly" coords="249,113,186,99,186,94,189,92,245,103,252,110" href="#" alt="C#">
<area id="key-15" class="kb15-D3" shape="poly" coords="291,119,296,113,260,105,257,106,247,104,253,110" href="#" alt="D">
<area id="key-16" class="kb16-D3s" shape="poly" coords="257,105,244,102,196,92,196,89,201,86,253,95,261,102" href="#" alt="D#">
<area id="key-17" class="kb17-E3" shape="poly" coords="296,111,301,106,256,97,262,102,260,104" href="#" alt="E">
</map>
</div>