Question

我在HTML页面中有一个小图片。如果我点击图像，它应该转换为文本框，并且除了该文本框之外还必须出现两个链接。任何人都可以帮助我使用Javascript函数，我可以在onClick上调用吗？

请查看随附的图片以便更好地理解。

example image

Answer 1

HTML

      <div class="resim">
        <img class="image" src="image.png"/>
      </div>
      <div class="txt">  
        <input type="text"/>
      </div>

CSS

.txt{
    display:none;
}

.resim{
    width:100px;
    height:100px;
    cursor:pointer;
}

JS

$(document).ready(function(){
    $(".resim").click(function(){
        $(".txt").show(function(){
            $(".resim").hide();
        });
    });
});

演示 http://jsfiddle.net/6W8nd/1/

Answer 2

 try this
<span id="my"><img src="image.png" onClick="z()"></span>
<span id="dis" style="display:none">
<input type="text" id="text"><a href="example.html">submit</a>
<a href="example2.html">cancel</a></span>
<script>
function z()
{
document.getElementById("my").style.display="none"; 
document.getElementById("dis").style.display="";    
}
</script>

Answer 3

这是一个jquery实现：

HTML：

<div id="content">
<img id="image" src="image.png" onclick="transition()"/>
<div id="input">
    <input type="text"/>
    <a href="#">Submit</a>
    <a href="#">Clear</a>
</div>

JS：

$(document).ready(function(){
  $("#input").hide();
  $("#image").click(function(){transition()});
});

function transition(){
  $("#image").fadeOut();
  $("#input").fadeIn();
}

工作小提琴：http://jsfiddle.net/6W8nd/

Answer 4

请尝试以下代码。

<!DOCTYPE html>
<html>
<body>

<p id="demo">Click on Image change it into text input.</p>


<script type="text/javascript">
function showStuff() {
    // show text input
    document.getElementById('mytextbox').style.display = 'block';
    // hide image
    document.getElementById('myimage').style.display = 'none';
}
</script>


<td class="post">
<img id="myimage" src="mypic.png" name="pic" onclick="showStuff()"/>
<span id="mytextbox" style="display: none;">
<input type="text" name="mytextinput">
</span>

</td>

</body>
</html>

Answer 5

请通过以下jsfiddle查看所需的输出链接：

Demo

为了您的信息，您需要添加jQuery代码，如：

$( ".img-class" ).click(function() {
  $(this).hide();
  $(".text-class").show();  
});

Html代码如：

<p class="img-class">
    <img src="http://s7.postimg.org/a5m750wnr/Screen_Shot_2014_05_29_at_5_06_07_PM.png" />
<p>                
<p class="text-class" style="display:none;">
  <input type="text" name="textbox">&nbsp;<a href="#">Submit</a>&nbsp;<a href="#">Cancel</a>
<p>

Answer 6

ty this：

    <!doctype html>
    <html lang="en">
<head>
  <meta charset="utf-8">
  <title>test</title>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .container{position: relative;}
        .Myimg{height: 50px; width: 50px; position: absolute; top:0; left: 0}
        .myform{display: none;position: absolute; top:5px; left: 0}
    </style>
    <script>
        $(document).ready(function() {
        $( ".Myimg" ).click(function() {
            $( ".myform" ).fadeIn( "slow", function() {
            $( ".Myimg" ).fadeOut( "slow");
            });
        });

        $( ".cancel" ).click(function() {
            $( ".Myimg" ).fadeIn( "slow", function() {
            $( ".myform" ).fadeOut( "slow");
            });
        });
        })
    </script>
</head>


<body>
<div class="container">
    <img src="http://icons.iconarchive.com/icons/custom-icon-design/office/256/edit-icon.png" class="Myimg" alt="myImg" />
    <div class="myform">
        <form action="index.html" >
            <input type="text" id="myInput" />
            <a href="#">submit</a>
            <a href="#" class="cancel">cancel</a>
        </form>
    </div>
</div>
</body>
</html>

Answer 7

这是一个更通用的解决方案。这是一个演示，点击图片：http://jsfiddle.net/upGPg/

function InlineEditor(){
    var fieldName;
    var toggleElement;
    var editorTemplate = '<input type="text" name="%name%" /><input type="submit" value="Submit" /><input type="reset" value="Reset" />';
    var editorElement;

    this.renderEditor = function (){
        var node = document.createElement("div");
        node.style.display = 'none';
        node.innerHTML = editorTemplate.replace("%name%", this.fieldName);
        return node;
    }

    this.setFieldName = function (fieldName){
        this.fieldName = fieldName;
    }

    this.isEditorVisible = function(){
        return (this.editorElement.style['display'] != 'none');
    }

    this.onToggleEditor = function(){

        if(this.isEditorVisible())
            this.editorElement.style.display = 'none';
        else
           this.editorElement.style.display = 'block'; 
    }

    this.setToggleElement = function(element){
        this.toggleElement = element;
        var self = this;
        element.addEventListener("click", function(){
           self.onToggleEditor();       
        });
        this.editorElement = this.toggleElement.parentNode.appendChild(this.renderEditor());

    }
}

testEditor = new InlineEditor();
testEditor.setFieldName("test");
testEditor.setToggleElement(document.getElementById("test"));

如何在HTML页面中将图像转换为文本框？

7 个答案: