HTML5 键盘音频与旧版 IE 后备。 IE8图像问题
下面的代码在所有现代浏览器中都能很好地工作。我使用透明 gif 作为图像映射，这样我就可以交换其下方的不同键盘图像/div，使键盘看起来可以播放。在 IE8 中一切正常，但我在左上角看到了那个丑陋的图标。有什么想法吗？
> <地图名称=“键盘地图”id=“键盘地图”> <区域 id="key-1" class="kb1-C2" shape="poly" coords="77,155,88,149,157,189,165,182,213,208,193,229" href="#" alt="C"> <区域 id="key-2" class="kb2-C2s" shape="poly" coords="97,138,89,142,89,149,157,188,167,180,155,167" href="#" alt="C#"> <区域 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"> <区域 id="key-4" class="kb4-D2s" shape="poly" coords="113,131,113,137,181,168,191,163,179,151,120,127" href="#" alt="D#"> <区域 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"> <区域 id="key-6" class="kb6-F2" shape="poly" coords="248,173,259,161,215,145,209,149,140,125,133,129" href="#" alt="F"> <区域 id="key-7" class="kb7-F2s" shape="poly" coords="140,125,141,117,146,115,205,134,215,144,208,149" href="#" alt="F#"> <区域 id="key-8" class="kb8-G2" shape="poly" coords="260,160,270,149,226,135,224,137,205,133,216,144" href="#" alt="G"> <区域 id="key-9" class="kb9-G2s" shape="poly" coords="223,136,155,116,156,110,160,107,219,124,228,133" href="#" alt="G#"> <区域 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"> <区域 id="key-11" class="kb11-A2s" shape="poly" coords="169,108,170,103,174,101,231,115,239,123,236,127" href="#" alt="A#"> <区域 id="key-12" class="kb12-B2" shape="poly" coords="278,138,286,129,234,117,240,123,238,126" href="#" alt="B"> <区域 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"> <区域 id="key-14" class="kb14-C3s" shape="poly" coords="249,113,186,99,186,94,189,92,245,103,252,110" href="#" alt="C#"> <区域 id="key-15" class="kb15-D3" shape="poly" coords="291,119,296,113,260,105,257,106,247,104,253,110" href="#" alt="D"> <区域 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#"> <区域 id="key-17" class="kb17-E3" shape="poly" coords="296,111,301,106,256,97,262,102,260,104" href="#" alt="E">
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>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论