在 Firefox 中出现图像映射问题答案

【问题标题】：Having image map problems in Firefox在 Firefox 中出现图像映射问题
【发布时间】：2012-01-18 18:29:38
【问题描述】：

我的图像映射在 Firefox 中无法使用，但在 Chrome 和 Safari 中可以使用。我认为这与 div 中的一些标签有关。你们能帮帮我吗，因为我对此不太了解：

<div style="font-size: 14px" id="tabs-1">
  ....
    <img src="/data/04_cvit/input.fa_x_Glyma1aaunq_gray.png" style="display:block;margin-left:auto;margin-right:auto" usemap="#CViT_image_gray"></img>
    <map name="#CViT_image_gray">
        <area onmouseover="mouseover_toggle('Glyma02g37330..173..179..694..700')" shape="rect" coords="173,694,179,700" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=42605601;stop=42707190;ref=Gm02;h_feat=Glyma02g37330@yellow" target="_blank"></area>
        <area onmouseover="mouseover_toggle('Glyma02g37330..1013..1019..723..729')" shape="rect" coords="1013,723,1019,729" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=44520215;stop=44621936;ref=Gm14;h_feat=Glyma14g35580@yellow" target="_blank"></area>
        <area onmouseover="mouseover_toggle('Glyma02g37330..313..319..147..153')" shape="rect" coords="313,147,319,153" href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=6118288;stop=6218620;ref=Gm04;h_feat=Glyma04g07910@yellow" target="_blank"></area>  
    </map>

    <div id="Glyma02g37330..173..179..694..700" style="border: 2px solid rgb(0, 0, 0);background-color: rgb(239,237,233); z-index: 1; visibility: hidden; position: absolute; width: 250px; left: 394px; top: 774px;">
        <input type="button" name="closeDiv" value="Close" onclick="mouseover_toggle('Glyma02g37330..173..179..694..700')"></input>
        <br /> Query = Glyma02g37330 <br />Target = Glyma02g37330
        <br />Chromosome = Gm02 <br />Start = 42605601 <br />End = 42707190
        <br />
        <a href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=42605601;stop=42707190;ref=Gm02;h_feat=Glyma02g37330@yellow">Click to view in GBrowse</a>
    </div>

    <div id="Glyma02g37330..1013..1019..723..729" style="border: 2px solid rgb(0, 0, 0);background-color: rgb(239,237,233); z-index: 1; visibility: hidden; position: absolute; width: 250px; left: 394px; top: 774px;">
        <input type="button" name="closeDiv" value="Close" onclick="mouseover_toggle('Glyma02g37330..1013..1019..723..729')"></input>
        <br /> Query = Glyma02g37330
        <br />Target = Glyma14g35580
        <br />Chromosome = Gm14
        <br />Start = 44520215
        <br />End = 44621936  <br />
        <a href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=44520215;stop=44621936;ref=Gm14;h_feat=Glyma14g35580@yellow">Click to view in GBrowse</a>
    </div>

    <div id="Glyma02g37330..313..319..147..153" style="border: 2px solid rgb(0, 0, 0);background-color: rgb(239,237,233); z-index: 1; visibility: hidden; position: absolute; width: 250px; left: 394px; top: 774px;">
        <input type="button" name="closeDiv" value="Close" onclick="mouseover_toggle('Glyma02g37330..313..319..147..153')"></input>
        <br /> Query = Glyma02g37330
        <br />Target = Glyma04g07910
        <br />Chromosome = Gm04
        <br />Start = 6118288
        <br />End = 6218620
        <br />
        <a href="http://soybase.org/gb2/gbrowse/gmax1.01/?start=6118288;stop=6218620;ref=Gm04;h_feat=Glyma04g07910@yellow">Click to view in GBrowse</a>
    </div>
</div>

【问题讨论】：

解决方案：显然您的地图必须命名为 name="MAPNAME" 并且在您的标签中必须使用 usemap="#MAPNAME"。这在 google chrome 中不是必需的，但在 Firefox 中是必需的。去图吧。
您不应该将解决方案放在问题或 cmets 中。把它记下来作为答案并将其标记为已接受。然后人们也可能会投票给答案。

标签： image firefox html map

【解决方案1】：

确保您的地图名称同时出现在 MAP 和 IMG 标记中像下面这样：

<map name="name123">...

<img src="yoururlhere" usemap="#name123">

【讨论】：