0

私はしばらくの間これに遭遇しました、そして数週間の研究の後、私はここで助けを求めるのが安全であると感じます。

私がやろうとしていることはこれです：ユーザーが画像をクリックします>ライトボックスはより大きな画像を表示します>より大きな画像には別のページへのリンクがあるホットスポットがあります。

これは可能ですか？簡単そうに見えますが、うまくいかないようです。参照用のコードは次のとおりです。

<a href="images/createaccount_img.jpg" rel="lightbox" usemap="#Map" map name="Map" id="Map"><area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" /><area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" > <img src="images/panel_login_11.jpg" width="152" height="27" alt="" />

解決策：最良のオプションはhttp://fancybox.net/ を使用することでした。これにより、ボックス内にDiv、iframe、htmlなどの多くの要素を追加できます。みなさん、ありがとうございました。

4

2 に答える 2

1

これは、www.google.comにリンクしているペンギンの頭にhotpsotが付いたペンギンの写真を含む単純なHTMLページです。

    <!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>

    <div id="hotspot_image" style=""><img alt="Image with Hot Spot that links to www.google.com" src="http://upload.wikimedia.org/wikipedia/commons/thumb/b/be/Pygoscelis_papua.jpg/250px-Pygoscelis_papua.jpg" />
        <a href="https://www.google.com" style="position:absolute; width: 60px; height: 60px; left:100px; top: 40px; z-index:1; " ></a></div>


</body>
</html>

<div>次に、ライトボックスに画像とリンクを含むものを表示する必要があります。

お役に立てれば！

于 2012-08-22T01:14:01.917 に答える
1

まず第一に：マップは別のタグです。したがって、コードは機能しませんでした。
これは、通常、マップを使用する方法です。

<a href="images/createaccount_img.jpg" rel="lightbox">
  <img src="images/panel_login_11.jpg" width="152" height="27" alt="" usemap="#map" />
</a>

<map name="map" id="map">
    <area shape="rect" coords="323,205,567,361" href="URL LINK 1" target="_blank" />
    <area shape="rect" coords="995,613,1191,668" href="URL LINK 2" target="_blank" > 
</map>

data-usemapそうは言っても、フルサイズの画像へのURLを含むリンクに属性を配置することを考えました。このような： 

<a href="http://lokeshdhakar.com/projects/lightbox2/images/examples/image-1.jpg" rel="lightbox" data-usemap="#map"><img src="http://lokeshdhakar.com/projects/lightbox2/images/examples/thumb-1.jpg" alt=""></a>

次にlightbox.js、この属性を読み取り、usemap: $link.attr('data-usemap')その属性を設定するように変更しました$image.attr('usemap', _this.album[imageNumber].usemap);

これで、フルサイズの画像に正しいusemapセットが設定されました。
しかし、それでも動作しません!! これは、この画像にdivが重なっているためだと思います。
これが私が取り組んだフィドルです。//xxx added追加した2行を検索して見つけます。多分誰か他の人がそれに取り組むことができるでしょう。

言い換えれば、変更されていないlightbox.js上にmodを作成するのは簡単ではないと思います。

また、ライトボックスのような多くのスクリプトもフルサイズの画像のサイズを画面に合わせて変更することに注意してください（ライトボックスは私が見る限りこれを行いません）：次に、座標を再計算するためにjavascriptも必要になります私が推測する地図。

于 2012-08-22T01:40:09.467 に答える