HTML5 Keyboard audio with old IE fallback. IE8 image issue - html
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>
Related
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-->
How do i display a span when i hover over an area (image map) in css?
I have an image of the solar system, I need to display a span above the image, for example, "The sun" when I hover over the sun how do I do that <div class="map"> <div id="p-name"> <p> <span class="nsun">The sun</span> <span class="nmerc">Mercury</span> <span class="nvenu">Venus</span> <span class="nearth">Earth</span> <span class="nmars">Mars</span> <span class="njupi">Jupiter</span> <span class="nsat">Saturn</span> <span class="nura">Uranus</span> <span class="nnep">Neptune</span> <span class="npluto">Pluto</span> </p> </div> <img class="map" src="map.png" alt="Solar map" usemap="#solarmap"> <map name="solarmap"> <area class="sun" shape="circle" coords="145,285,140" alt="The sun"> <area class="merc" shape="circle" coords="332,300,22" alt="Mercury"> <area class="venu" shape="circle" coords="400,300,36" alt="Venus"> <area class="earth" shape="circle" coords="478,300,36" alt="Earth"> <area class="mars" shape="circle" coords="549,300,26" alt="Mars"> <area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter"> <area class="sat" shape="circle" coords="835,309,77" alt="Saturn"> <area class="ura" shape="circle" coords="1004,309,60" alt="Uranus"> <area class="nep" shape="circle" coords="1134,309,60" alt="Neptune"> <area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto"> </map> </div>
You can use the jQuery .mouseenter() and .mouseleave() events to trigger what you need. See https://api.jquery.com/mouseenter/. And I would suggest to use data attributes on maps to make it more dynamic, otherwise you'll need to match the case for each planet (What will happen if we discover a new one ?? ;-) ). Or alternatively, if you don't want to use jQuery, you can follow the example given at w3schools: https://www.w3schools.com/js/tryit.asp?filename=tryjs_imagemap
You can use CSS
:hover
Example
#p-name{
display:none;
}
.sun:hover + .nsun{
disply:block!important;
}
Just make sure you place your map before the spans
so your HTML will look like this
<div class="map">
<img class="map" src="map.png" alt="Solar map" usemap="#solarmap">
<map name="solarmap">
<area class="sun" shape="circle" coords="145,285,140" alt="The sun">
<area class="merc" shape="circle" coords="332,300,22" alt="Mercury">
<area class="venu" shape="circle" coords="400,300,36" alt="Venus">
<area class="earth" shape="circle" coords="478,300,36" alt="Earth">
<area class="mars" shape="circle" coords="549,300,26" alt="Mars">
<area class="jupi" shape="circle" coords="669,300,82" alt="Jupiter">
<area class="sat" shape="circle" coords="835,309,77" alt="Saturn">
<area class="ura" shape="circle" coords="1004,309,60" alt="Uranus">
<area class="nep" shape="circle" coords="1134,309,60" alt="Neptune">
<area class="pluto" shape="circle" coords="1226,309,12" alt="Pluto">
</map>
<div id="p-name">
<p>
<span class="nsun">The sun</span>
<span class="nmerc">Mercury</span>
<span class="nvenu">Venus</span>
<span class="nearth">Earth</span>
<span class="nmars">Mars</span>
<span class="njupi">Jupiter</span>
<span class="nsat">Saturn</span>
<span class="nura">Uranus</span>
<span class="nnep">Neptune</span>
<span class="npluto">Pluto</span>
</p>
</div>
</div>
map tag not working in HTML
For a website I am making, the mapping code won't work, the links remain unclickable. I'm not sure if this is an issue with the CSS/HTML combination or not, but my code is as follows for the HTML part: <div class="subscribe"> <h2>Follow Us : </h2> <div class="contact-form"> <img src="images/social.png" usemap="#follow"> <map name="follow"> <area shape="rect" coords="648,336,1000,600" href="www.instagram.com/quadrotian" target="_blank" alt="Instagram"> <area shape="circle" coords="1337,336,275" href="www.facebook.com/Quadrotian" alt="Facebook"> <area shape="circle" coords="2045,336,275" href="#" target="_blank" alt="Pinterest"> <area shape="circle" coords="2783,336,275" href="#" alt="Twitter"> <area shape="circle" coords="3491,336,275" href="#" alt="Google Plus"> <area shape="circle" coords="4206,336,275" href="#" alt="LinkedIn"> </map> </div> </div> I have used map before in the similar manner but it isn't working this time.
Your map coordinates, shapes and their sizes are way too big. I decreased their sizes by a factor of 10 and look at how big they still are. This is one of your circles:
bootstrap image usemap responsive
I would like to create an image responsive with bootstrap. The problem is when I use the class img-responsive then the usemap is not working anymore. <div class="col-lg-6"> <img class="center-block" src="images/plattegrond.jpg" alt="IGS Plattegrond" id="changer" usemap="#igsmap" onclick="changeImage(this)"> <map name="igsmap"> <!-- De knoppen op de Plattegrond --> <area shape="rect" coords="522,263,542,285" alt="stand 1" href="#" onclick='show(1);'> <area shape="rect" coords="458,311,479,334" alt="stand 2" href="#" onclick='show(2);'> <area shape="rect" coords="458,213,477,232" alt="stand 3" href="#" onclick='show(3);'> <area shape="rect" coords="587,315,606,335" alt="stand 4" href="#" onclick='show(4);'> <area shape="rect" coords="586,214,605,231" alt="stand 5" href="#" onclick='show(5);'> <area shape="rect" coords="522,167,542,188" alt="stand 6" href="#" onclick='show(6);'> <area shape="rect" coords="523,125,540,142" alt="stand 7" href="#" onclick='show(7);'> <area shape="rect" coords="237,126,251,141" alt="stand 8" href="#" onclick='show(8);'> <area shape="rect" coords="192,319,207,332" alt="stand 9" href="#" onclick='show(9);'> <area shape="rect" coords="266,303,280,319" alt="stand 10" href="#" onclick='show(10);'> <area shape="rect" coords="228,407,246,424" alt="stand 11" href="#" onclick='show(11);'> </map> </div> I hope someone can help me out, Sincerely Dennis.
Thanks Andrew, I found it. The solution was :
Add this to Javascript :
!function(){"use strict";function a(){function a(){function a(a,c){function d(a){var c=1===(e=1-e)?"width":"height";return Math.floor(Number(a)*b[c])}var e=0;i[c].coords=a.split(",").map(d).join(",")}var b={width:k.width/k.naturalWidth,height:k.height/k.naturalHeight};j.forEach(a)}function b(a){return a.coords.replace(/ *, */g,",").replace(/ +/g,",")}function c(){clearTimeout(l),l=setTimeout(a,250)}function d(){(k.width!==k.naturalWidth||k.height!==k.naturalHeight)&&a()}function e(){k.addEventListener("load",a,!1),window.addEventListener("focus",a,!1),window.addEventListener("resize",c,!1),window.addEventListener("readystatechange",a,!1),document.addEventListener("fullscreenchange",a,!1)}function f(){return"function"==typeof h._resize}function g(){i=h.getElementsByTagName("area"),j=Array.prototype.map.call(i,b),k=document.querySelector('img[usemap="#'+h.name+'"]'),h._resize=a}var h=this,i=null,j=null,k=null,l=null;f()?h._resize():(g(),e(),d())}function b(){function b(a){if(!a.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==a.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+a.tagName+">.")}function c(c){c&&(b(c),a.call(c),d.push(c))}var d;return function(a){switch(d=[],typeof a){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(a||"map"),c);break;case"object":c(a);break;default:throw new TypeError("Unexpected data type ("+typeof a+").")}return d}}"function"==typeof define&&define.amd?define([],b):"object"==typeof module&&"object"==typeof module.exports?module.exports=b():window.imageMapResize=b(),"jQuery"in window&&(jQuery.fn.imageMapResize=function(){return this.filter("map").each(a).end()})}();
and this on the bottom of the page :
<script>
imageMapResize();
</script>
again thanks for looking in to it guys :D
Image map not working in Internet Explorer 10
<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>