1

特定の日にイベントがあるカレンダーを作成しています。カレンダーは、イメージ マップを作成した jpg です。カレンダーのホットスポットまたは「イベント」にカーソルを合わせると、マウスポインターの横にイベント情報が表示された画像が表示され、マウスがホットスポットから離れると消えます。6 つのホットスポットがあり、それぞれに JavaScript 関数があります。関数は、ポップアップ イメージを正しいイベント イメージに置き換えます。以下は、1 つの機能に沿った領域の 1 つの例です (他の領域は同じですが、画像名と座標が異なります)。

ホバーするとカレンダーの下にイベント画像がポップアップ表示されましたが、ページは画像の位置を現在のマウスの位置に再配置することを拒否しました。ポップアップ画像を再配置するにはどうすればよいですか? 私は何を間違っていますか？または、別の方法を使用する必要がありますか？

JS:

function pop(e) { //function called by first hotspot
        Image.src = "../img/Bubble - Aloha.png" //event image
        document.popup1.src = Image.src; 
        var thing = document.getElementById("popup1");

        $("#popup1").toggle();
        thing.style.left = e.screenX + 'px';
        thing.style.top = e.screenY + 'px';

        return true;
        }

地図：

<map id="feb1050" name="feb1050">
<area shape="rect" alt="" coords="464,170,588,263" HREF="../img/feb1050.jpg" onMouseOver="pop(event);"  onMouseOut="pop(event);"/>
...</map>

HTML:

<ul><li>
        <img src="../img/feb1050.jpg" width="1050" alt="calendar" USEMAP="#feb1050">
    </li>
    <li>
        <div id="popup"><img NAME="popup1" id="popup1" src="../img/Bubble - Aloha.png" width="400" alt="calendar" style="display:none;top:-2000;left:-1000;> 
        </div><br />Click Here To RSVP! 
    </li>
</ul>
4

2 に答える 2

3

おそらく、画像自体の位置を操作するのではなく、囲んでいるdivを配置することができます。HTMLの場合：

<div id="popup" class="popup"><img NAME="popup1" id="popup1" src="../img/feb1050.jpg" alt="calendar"> 
<br />Click Here To RSVP!</div>

div用のCSSを使用：

.popup {
        position:absolute;
        z-index:20000;
        top: 0px;
        left: 0px;
        display: none;
}

そしてJS：

function pop(e) { //function called by first hotspot

    Image.src = "../img/Bubble - Aloha.png" //event image
    document.popup1.src = Image.src; 
    var thing = document.getElementById("popup");

    thing.style.left = e.clientX + 'px';
    thing.style.top = e.clientY  + 'px';
    $("#popup").toggle();

    return true;
 }

screenXとscreenYではなくclientXとclientYも使用することに注意してください。

screenX / Y、clientX / Y、pageX / Yの違いは何ですか？

JSFiddleの実例

于 2013-03-01T08:46:05.750 に答える
0

私が行ったことの 1 つ (ほぼこのような状況で: クライアントは、価格キーワードにカーソルを合わせたときにいくつかの価格ボックスが表示されることを望んでいました) は、ほぼ純粋に CSS と HTML です。<a>タグ内にポップアップ領域を生成できます。これは、ホバー領域の隣に配置された<span>(または絶対配置された) 内に配置されます。<div>これらの span/div 要素がセレクターに対してのみ定義されていることを確認し、残りのセレクターでa:hoverそれらを設定して、アンカーにカーソルを合わせているときにのみスパン/div ボックスが表示され、そうでないときに消えるようにします。 .display:none;a:x

于 2013-03-01T07:40:35.833 に答える