0

画像があります。

ユーザーが画像の特定の領域をクリックしたときに、さまざまなdivをポップアップとして表示したいと思います。

jqueryとhtmlを使ってやりたいです。

誰かがこれで私を助けることができますか？

4

7 に答える 7

3

サンプル ソリューションの例を次に示します: http://jsfiddle.net/htEvT/2/

JavaScript

$('#rabbit').click(function (e) {
    var offset = $(this).offset(),
        left = e.pageX - offset.left,
        top = e.pageY - offset.top;
    if (top > $(this).height() / 2) {
        alertDiv('You\'ve cliked under the middle.', 'alert-white');
    } else {
        alertDiv('You\'ve cliked above the middle.', 'alert-gray');
    }
});

function alertDiv(text, cssClass) {
    var alrt = $('<div class="alert ' + cssClass + '">' + text + '</div>');
    $(document.body).append(alrt);
    alrt.click(function () {
        alrt.remove();
    });
}
​

CSS

.alert {
    position: absolute;
    left: 30px;
    top: 30px;
    width: 300px;
    height: 200px;
    border: 1px solid black;
}
.alert-white {
    background: white;
}
.alert-gray {
    background: #ccc;
}
​

HTML

<img src="http://www.clermontanimal.net/images/lop_rabbit_easter.jpg" id="rabbit" alt="" />​

私のソリューションに問題がある場合は、お知らせください。:)

于 2012-11-01T08:27:30.390 に答える
0

画像にイメージ マップを使用し、画像のさまざまなセクションにファンシー ボックスを取り付けます。コードを投稿していないため、同じコーディングソリューションを提供できません。

于 2012-11-01T08:18:39.773 に答える
0

以下のようなものは、これを行う方法のアイデアを与えるはずです:

$("img").click(function() {
  $("body").append("<div class='newdiv'></div>")
})



.newdiv{width:100px; height:300px;border:1px solid red;}
于 2012-11-01T08:19:43.613 に答える
0

私のお気に入りはFancyboxです。

私はそれができないことをまだ見ていません。優れたドキュメントと広く使用されているため、ヘルプが必要な場合は、他の誰かが同じ質問をしている可能性が高く、簡単なグーグルで解決できます.

于 2012-11-01T08:20:54.800 に答える
0

サムネイル画像が表示される HTML ページに「imgbox」という名前の DIV を作成します。DIV と DIV に関連付けられた CSS 要素 ID を以下に示します。

<div id="imgbox"></div>

CSS

#imgbox 
{
vertical-align : middle;
position : absolute;
border: 1px solid #999;
background : #FFFFFF; 
filter: Alpha(Opacity=100);
visibility : hidden;
height : 200px;
width : 200px;
z-index : 50;
overflow : hidden;
text-align : center;

}

ポップアップ画像を表示する JavaScript コードは次のとおりです。 サムネイル画像の左と上の位置を取得します。

function getElementLeft(elm) 
{
 var x = 0;

//set x to elm’s offsetLeft
x = elm.offsetLeft;

//set elm to its offsetParent
elm = elm.offsetParent;

//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent

while(elm != null)
{
    x = parseInt(x) + parseInt(elm.offsetLeft);
    elm = elm.offsetParent;
}
return x;
}

function getElementTop(elm) 
{
 var y = 0;

//set x to elm’s offsetLeft
y = elm.offsetTop;

//set elm to its offsetParent
elm = elm.offsetParent;

//use while loop to check if elm is null
// if not then add current elm’s offsetLeft to x
//offsetTop to y and set elm to its offsetParent

while(elm != null)
{
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
}

return y;
}

サムネイル画像のソースを取得し、DIV を表示して、高さと幅を必要なサイズに増やし、画像を DIV に添付します。

function Large(obj)

{ var imgbox=document.getElementById("imgbox"); imgbox.style.visibility='visible'; var img = document.createElement("img"); img.src=obj.src; img.style.width='200px'; img.style.height='200px';

if(img.addEventListener){
    img.addEventListener('mouseout',Out,false);
} else {
    img.attachEvent('onmouseout',Out);
}             
imgbox.innerHTML='';
imgbox.appendChild(img);
imgbox.style.left=(getElementLeft(obj)-50) +'px';
imgbox.style.top=(getElementTop(obj)-50) + 'px';
}
Hide the DIV at mouse out.

function Out()
{
 document.getElementById("imgbox").style.visibility='hidden';
}

サムネイル画像の OnMouseOver クライアント側イベント呼び出しを追加して、マウスオーバー時にポップアップ画像を表示します。

<img id='img1' src='images/Sample.jpg' onmouseover="Large(this)" />
于 2012-11-01T08:21:07.180 に答える
0

領域が正方形の場合は、目的の領域に透明な要素をonClick配置して、単純なイベントを与えることができます。

于 2012-11-01T08:22:08.277 に答える
-1

SimpleModalを使用する

プラグインSimpleModalを使用して、やりたいことを実現できます。

SimpleModalは、モーダルダイアログ開発のための強力なインターフェイスを提供する軽量のjQueryプラグインです。モーダルダイアログフレームワークと考えてください。SimpleModalを使用すると、UI開発に固有の関連するクロスブラウザーの問題から保護しながら、想定できるものを柔軟に構築できます。

これを使用して、既存のモーダルを呼び出すか、divその場でモーダルを作成できます。

既存の呼び出しdiv：

$("#element-id").modal();

オンザフライでモーダルを作成する：

$.modal("<div><h1>SimpleModal</h1></div>");

オプションを与える：

$("#element-id").modal({options});
$.modal("<div><h1>SimpleModal</h1></div>", {options});

デモ：

スクリーンショット

その他のデモはこちら：http ：//www.ericmmartin.com/projects/simplemodal-demos/

于 2012-11-01T08:17:59.543 に答える