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.
Related
Below is my HTML code embedded in python,,
I am able to add and navigate to only one hyperlink instead of many
<img src="+footer+" width=1000 alt="Image not found" usemap="#image-map"><map name="image-map">
<area shape="rect" coords="30,90,130,30" alt="Pulse" title="Pulse" href="https://pulse.eleva.com/v3/home"><area shape="rect" coords="150,80,250,30" alt="Belong" title="Belong" href="https://pulse.elevancehealth.com/portal/ILegato/pages_communities/tunein/inclusiondiversity">
<area target="" alt="Legato" title="Legato" href="https://www.egato.com/" coords="760,40,20" shape="circle"><area target="" alt="Youtube" title="Youtube" href="https://www.youtube.com/UCUi-cSOJ6ad2q1I4vMgl6gg" coords="780,40,20"shape="circle">
<area target="" alt="Linkedin" title="Linkedin" href="https://www.linkedin.com/company/lth-technologies/mycompany/" coords="820,40,20" shape="circle">
<area target="" alt="Facebook" title="Facebook" href="https://www.facebook.com/Lechnologies/" coords="840,40,20" shape="circle">
</map>
I am able to add and navigate to only one hyperlink instead of many
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-->
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">
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>