0

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

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，图像会发生变化。可以请任何人帮助我吗？

4

2 回答 2

0

这是简单的Javascript解决方案。

演示

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>

脚本

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; }
于 2013-05-23T04:43:23.763 回答
-1

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

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

您也可能喜欢对话框的模态功能。

编辑

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

创建一个新的div.

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

当用户单击图像时，使此 div 可见。

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

添加图像这个div，

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

于 2013-05-23T04:28:13.297 回答