Question

我有一个图像按钮，只需点击一下按钮即可更改图像。这是以下代码

function changeImg(thisImg)
{

    var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";

    var tmpImg = null;

    function changeImg(thisImg) {

      tmpImg = thisImg.src;

      thisImg.src = altImg;

      altImg = tmpImg;

    }

这是我之前为可点击图片做的小提琴http://jsfiddle.net/pUbrv/

<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="changeImg(this)" />

而不是仅通过点击按钮来对图像进行处理，我想在我点击div中的图像后弹出包含可点击图像的div，图像会发生变化。可以请任何人帮助我吗？

Answer 1

这是简单的Javascript解决方案。

<强> DEMO

HTML

<body>
<img alt="" src="http://www.gettyicons.com/free-icons/136/stars/png/256/star_gold_256.png" id="imgClickAndChange" onclick="myfunction(this)" />
</body>

SCRIPT

var altImg = "http://ww1.prweb.com/prfiles/2011/10/12/8875514/star_white.jpg";
    var tmpImg = null;
  function changeImg(thisImg) {
      tmpImg = thisImg.src;
      thisImg.src = altImg;
      altImg = tmpImg;
    }
function myfunction(ele) {
    var pop=new myPop();
    pop.popOut(ele);
}
function myPop() { 
    this.square = null;
    this.overdiv = null;

    this.popOut = function(ele) {
         tmpImg = ele.src;

        //filter:alpha(opacity=25);-moz-opacity:.25;opacity:.25;
        this.overdiv = document.createElement("div");
        this.overdiv.className = "overdiv";

        this.square = document.createElement("div");
        this.square.className = "square";
        this.square.Code = this;
        var msg = document.createElement("div");
        msg.className = "msg";
        msg.innerHTML = '<img alt="" src="'+altImg+'" id="imgClickAndChange" />';
        altImg = tmpImg;
        this.square.appendChild(msg);
        var closebtn = document.createElement("button");
        closebtn.onclick = function() {
            this.parentNode.Code.popIn();
        }
        closebtn.innerHTML = "Close";
        this.square.appendChild(closebtn);

        document.body.appendChild(this.overdiv);
        document.body.appendChild(this.square);
    }
    this.popIn = function() {
        if (this.square != null) {
            document.body.removeChild(this.square);
            this.square = null;
        }
        if (this.overdiv != null) {
        document.body.removeChild(this.overdiv);
        this.overdiv = null;
        }

    }
}

CSS

 div.overdiv { filter: alpha(opacity=75);
                      -moz-opacity: .75;
                      opacity: .75;
                      background-color: #c0c0c0;
                      position: absolute;
                      top: 0px;
                      left: 0px;
                      width: 100%; height: 100%; }

        div.square { position: absolute;
                     top: 200px;
                     left: 200px;
                     background-color: Menu;
                     border: #f9f9f9;
                     height: 200px;
                     width: 300px; }
        div.square div.msg { color: #3e6bc2;
                             font-size: 15px;
                             padding: 15px; }

Answer 2

Pollisbly jQuery UI对话框可以帮助您。

由于您已经实现了图像的更改，您只需将图像放在对话框中即可。

您也可以使用对话框的模态功能。

修改

如果您不想使用jQuery UI，那么您可以执行以下操作：

创建新的div。

最初将其隐藏或将其display属性设置为none。

当用户点击图片时，请将此div显示。

将其位置设置为absolute并根据需要设置其left和top corrdinates。

添加此div，
的图片
最后将事件处理程序添加到此div以更改图像。

使用javascript包含可点击图像的DIV POP UP

2 个答案: