使用Onclick或Hover属性更改元素内部的元素

Question

<html>
  <head>
    <style>
      #container {position:relative;left:15%;}
      #myImage {width:65%;height:280px;}
      #text {padding-top: 50px;}
      #textbox {width:65%;height:280px;position:absolute;top:0;left:0;}
    </style>
  </head>

  <body>
    <div id="container" onclick="changeImage()" >
      <img id="myImage" src="C:\Documents and Settings\svarghe1\My Documents\Downloads\Jaguar_Xj_Saloon_4.jpgj_.jpg" alt="">
      <div id="textbox">
        <p style="color:white;text-align:center;margin-top:50px;"class="text">Jaguar_Xj_Saloon</p>

        <script>
          function changeImage() {
            if (document.getElelmentById("container").innerHTML="myImage") {
              container.appendChild(myImage)
            } else {
              container.appendChild(textbox)
            }
          }
        </script>
      </div>
    </div>
  </body>
</html>

Here, I am trying to create a script for Sharepoint site page to change an element in div from Image to textbox with Onclick or hover property. 在这里，我正在尝试为Sharepoint网站页面创建脚本，以将div的元素从Image更改为具有Onclick或hover属性的textbox 。 There might be a lot of mistakes as this is my first attempt on JS . 可能会有很多错误，因为这是我第一次尝试JS 。 I have also tried 我也尝试过

<script> 
function changeImage() {
    var image= document.getElementById("myImage");
    if (image=true) {
       var element = document.getElementById("container");
       var UImage = document.createElementById("myImage");
       element.appendChild(UImage)
    } else {
       var element = document.getElementById("container");
       var Utextbox = document.createElementById("textbox");
       element.appendChild(UImage)
       element.appendChild(Utextbox);
    }
}
</script>


#container:hover #myImage{ display:none; }

I have tried the code above in CSS , instead of script. 我已经在CSS中尝试了上面的代码，而不是脚本。 It didn't work. 没用 At the same time the code, 同时编写代码，

a:hover #box{ text-decoration: none;color:green;background-color: Turquoise;cursor:pointer }

Works really fine. 真的很好。 Why is that? 这是为什么？ I have given class instead of id . 我给了class而不是id 。 It also didn't work. 它也没有用。 It works in ordinary HTML file. 它可以在普通的HTML文件中使用。 But can't get to work in Sharepoint site. 但是无法在Sharepoint网站上工作。 So, can you help? 所以，你能帮忙吗？

Answer 1

Instead of appending Image and text box from the javascript, you can already write the html codes for both and do the hide/show according to your need. 除了已经从javascript附加图像和文本框之外，您已经可以为它们都编写html代码并根据需要进行隐藏/显示。 I think it will make things lot easier and neat. 我认为这将使事情变得更加轻松和整洁。

As for the Hover property, you can attach event of hover with jquery. 至于Hover属性，您可以使用jquery附加hover事件。 You can check the following link: http://api.jquery.com/hover/ 您可以检查以下链接： http : //api.jquery.com/hover/

使用Onclick或Hover属性更改元素内部的元素

问题描述

1 个解决方案

解决方案1
0 2015-03-16 11:37:50

使用Onclick或Hover属性更改元素内部的元素

问题描述

1 个解决方案

解决方案1 0 2015-03-16 11:37:50

解决方案1
0 2015-03-16 11:37:50