How to change image map coords with media query - html

I have an image map and I made a media query so that the image changes at a specific width. How can I write code so that I can change the coords for the new image?
HTML
<img src="../images/journey-final-01.jpg" alt="journey" usemap="#journeymap">
<map id="map_ID" name="journeymap">
<area target="" alt="flag1" title="Milestone 1" href="" coords="1356,644,1482,809" shape="rect">
<area target="" alt="flag2" title="Milestone 2" href="" coords="808,595,900,710" shape="rect">
<area target="" alt="flag3" title="Milestone 3" href="" coords="1361,320,1431,405" shape="rect">
<area target="" alt="flag4" title="Milestone 4" href="" coords="1124,161,1190,248" shape="rect">
<area target="" alt="cap" title="DDA" href="" coords="1173,110,1359,5" shape="rect">
</map>
CSS
body img{
width: 100vw;
height: 100vh;
}
#media only screen and (max-width: 600px) {
body img {
content: url("../images/journey-mobile-01.jpg");
}
}

Related

Not able to add and navigate to multiple hyperlinks on the same image in same line through Python while sending image as attachment in email body

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

when I change the dimansions of my imgae (image with image map) the chords than dont match the image anymore. HTML CSS

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.

html, cannot do onhover for an image map areas

I'm trying to apply a filter to an images map area, when it is hovered on. It displays the tooltip on the correct area, but nothing changes when I hover on it.I've tried to use z-index but that didn't help either.
html code:
<div>
<img src={imagesource} usemap="#image-map">
</img>
<map name="image-map">
<area id="area1" style={{backgroundColor:"black", zIndex:"3"}} target="_self" alt="siauliai" title="siauliai" href="" coords="2087,1394,1974,1821,1379,1890,1312,1760,1396,1540,1311,1445,1334,1383,1328,1355,1592,1349" shape="poly"/>
<area id="area2" target="_self" alt="panevezys" title="panevezys" href="" coords="2036,1844,2266,1911,2396,1715,2851,1703,2940,1585,2412,1327,2115,1411,2053,1535,2042,1636" shape="poly"/>
<area id="area3" target="_self" alt="utena" title="utena" href="" coords="2379,1748,2389,1850,2676,2158,2907,2181,2884,2007,3339,2046,3283,1788,2974,1619,2766,1726,2516,1729" shape="poly"/>
<area id="area4" target="_self" alt="vilnius" title="vilnius" href="" coords="3173,2975,2933,2601,3124,2269,3364,2064,2940,2021,2912,2212,2678,2212,2403,1887,2240,1972,2481,2339,2276,2686,2671,2657,2523,2827,2558,2961" shape="poly"/>
<area id="area5" target="_self" alt="alytus" title="alytus" href="" coords="1781,2660,2523,3197" shape="rect"/>
<area id="area6" target="_self" alt="marijamp" title="marijamp" href="" coords="1314,2184,1753,2198,1859,2601,1583,2827,1293,2693" shape="poly"/>
<area id="area7" target="_self" alt="Klaipeda" title="Klaipeda" href="" coords="671,1510,1074,1347,855,1651,1138,2174,473,2033" shape="poly"/>
<area id="area8" target="_self" alt="telsiai" title="telsiai" href="" coords="883,1663,989,1804,1322,1755,1371,1564,1307,1352,1201,1324,1124,1338,975,1515" shape="poly"/>
<area id="area9" target="_self" alt="taurage" title="taurage" href="" coords="1703,2073,1689,2137,1159,2172,1032,2002,1004,1826,1279,1762,1435,2024" shape="poly"/>
<area id="area10" target="_self" alt="kaunas" title="kaunas" href="" coords="1774,2146,1951,2641,2226,2549,2424,2330,2191,1913,1611,1870,1428,1899,1477,2012,1682,2033" shape="poly"/>
</map>
css code:
area{
display:block;
}
#area1:hover {
background:black;
opacity: 0.5;
}
#area2:hover {
background:black;
opacity: 0.5;
}
#area3:hover {
background:black;
opacity: 0.5;
}
#area4:hover {
background:black;
opacity: 0.5;
}
#area5:hover {
background:black;
opacity: 0.5;
}
#area6:hover {
opacity: 0.5;
background:black;
}
#area7:hover {
opacity: 0.5;
background:black;
}
#area8:hover {
opacity: 0.5;
opacity:0.2;
}

I don't know the solution. But I see you can just define area:hover single time instead of repeating it. Or give them a single class and then use .classname:hover. This way also, it only effects the area you hovered instead of effecting all.
Sorry I don't have the answer but this was a little productivity tip.

How can I fix my ImageMap links for HTML when sent as email and the zoom is changed (100% zoom doesn't work)?

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

Image Map Not Working with ERB/HTML

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.