2

複数のインラインアイテムを呼び出そうとしていますが、クリックすると最初のアイテムのコンテンツのみが表示されます。髪を抜いてます。助けてください。

私のJavascript呼び出し：

<script type="text/javascript">
    $(document).ready(function() {
        $('.fancybox').fancybox();
    });
</script>

私のHTML：

<div class="atrack">
                <img src="images/albumcovers/Italian-Japanese-lg.jpg" class="trackcover" width="66" height="66" />
                <p class="artist">Italian Japanese</p>
                <p class="trackname">Two Islands</p>
                <img src="images/buynow-artinfo.jpg" border="0" usemap="#Map" class="actionbtns" />
                <map name="Map" id="Map">
                  <area shape="rect" coords="1,-2,87,26" href="#" />
                  <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track1" />
                </map>
            </div>

            <div class="atrack">
                <img src="images/albumcovers/Yann-Tiersen-lg.jpg" class="trackcover" width="66" height="66" />
                <p class="artist">Yann Tierson</p>
                <p class="trackname">The Trial</p>
                <img src="images/buynow-artinfo.jpg" border="0" usemap="#Map" class="actionbtns" />
                <map name="Map" id="Map">
                  <area shape="rect" coords="1,-2,87,26" href="#" />
                  <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track2" />
                </map>
            </div>








<div class="gcr-artistinfo" id="track1" style="width: 580px; overflow: hidden; display: none;">
    <h2>Italian Japanese</h2>
    <img class="largealbum" src="images/albumcovers/Italian-Japanese-lg.jpg" />
    <p><span>Song:</span> Two Islands</p>
    <p><span>Album:</span> (Single)</p>
    <p><span>From:</span> Southern California</p>
    <img src="images/artist-info-opts.jpg" border="0" usemap="#Map2" class="artistoptions" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="-11,2,156,26" href="http://itunes.apple.com/us/album/nyc-single/id515976173?ign-mpt=uo%3D4http://" target="_blank" />
      <area shape="rect" coords="-13,26,153,46" href="http://www.italianjapanese.com/" target="_blank" />
      <area shape="rect" coords="-4,47,156,77" href="#" target="_blank" />
    </map>
</div>

<div class="gcr-artistinfo" id="track2" style="width: 580px; overflow: hidden; display: none;">
    <h2>Yann Tiersen</h2>
    <img class="largealbum" src="images/albumcovers/Yann-Tiersen-lg.jpg" />
    <p><span>Song:</span> The Trial</p>
    <p><span>Album:</span> Skyline</p>
    <p><span>From:</span> France</p>
    <img src="images/artist-info-opts.jpg" border="0" usemap="#Map2" class="artistoptions" />
    <map name="Map2" id="Map2">
      <area shape="rect" coords="-11,2,156,26" href="http://yanntiersen.sandbag.uk.com/Store/DisplayItems.html" target="_blank" />
      <area shape="rect" coords="-13,26,153,46" href="http://www.yanntiersen.com/" target="_blank" />
      <area shape="rect" coords="-4,47,156,77" href="#" target="_blank" />
    </map>
</div>

ヘルプ/提案をありがとう！それは有り難いです ：）

  • ボー
4

1 に答える 1

2

ID問題は、同じものとname2つの異なるものを使用できないことですarea maps。両方のリンクが同じに接続されているmapためarea、常に1つのリンクが使用されます。

2番目のインスタンスのマップに別のIDandを割り当ててみてください。name

<img src="images/buynow-artinfo.jpg" border="0" usemap="#Map01" class="actionbtns" />
<map name="Map01" id="Map01">
 <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track1" />

と

<img src="images/buynow-artinfo.jpg" border="0" usemap="#Map02" class="actionbtns" />
<map name="Map02" id="Map02">
 <area shape="rect" coords="-2,27,83,57" class="fancybox" href="#track2" />

これは、fancyboxの問題というよりもhtmlセマンティクスの問題に似ています

于 2012-05-18T20:05:16.897 に答える