Question

好的，所以基本上当我点击下面的按钮时，我想要一个新的单独的图片来显示我指定的位置。这样，我可以在任何给定时间在页面上的不同位置拥有该图片的多个副本。帮助？！

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
  <link rel="stylesheet" type="text/css" href="styles/formstyle.css"/> 
  <script type = "text/javascript" src = "scripts/rearange.js">

    var count = 0;

      function northwest(image) {

        var temp;
   var myElement;
        var newDiv = document.createElement('div');
        newDiv.id = "image"+ count++;
   document.body.appendChild(newDiv);
   temp = newDiv.getAttribute("id") ;

   myElement = document.getElementById(temp).style;

        myElement.top = "30px";
        myElement.left = "340px";          }         

      function southeast(image) { 
        var myElement;//create reference
        myElement = document.getElementById('image').style;
        myElement.top = "338px";
        myElement.left = "667px";
     }

     function toggle(image) {
       var dom = document.getElementById(image);

       if (dom.style.display == '')
    dom.style.display = 'none';
   else
    dom.style.display = '';

  </script>

  <title>Exercise IV</title>

</head>

<body>  
    <div id = "para">
    Blah, Blah, Blah, Blah :)     
    </div>

    div id ="image" ></div>

    <div id = "links">
       <p style="height: 121px; width: 92px" >
          <input type="button" value = "northwest" onclick = "javascript: northwest('image')" />            
      <input type="button" value = "northeast" onclick = "javascript: northeast('image')" />            
      <input type="button" value = "southwest" onclick = "javascript: southwest('image')" />            
      <input type="button" value = "southeast" onclick = "javascript: southeast('image')" />

       </p>   
   </div>
   <div id = "show_Hide">
      <p style="width: 92px">
         &nbsp;<input type="button" value = "show/hide" onclick = "toggle('image')" />
         <input type="button" value = "show/hide" onclick = "toggle('image')" />
         <input type="button" value = "show/hide" onclick = "toggle('image')" /><input type="button" value = "show/hide" onclick = "toggle('image')" />
      </p>
   </div>

   <div id = "link" >    
      <p style="height: 14px; width: 180px">       
        <a href = "http://nova.umuc.edu/~ct386a28/lovej2ee/index.html">Home Page</a>
      </p>
   </div>

   /*********************************CSS*******************************************/
   #image {
     background-image:url('http://nova.umuc.edu/~ct386a28/lovej2ee/exercise4/images /kito.jpg');
     background-repeat: no-repeat;                                                                                 
 position: absolute; 
 top: 199px; 
     left: 513px; 
     color: inherit;
     width: 133px;
     height: 107px;
     filter:alpha(opacity=60);
     opacity:0.6;          
     } 

     #para {
     text-align: left;
     font-family: Arial;
     position: relative; 
     top: 73px; 
     left: 504px; 
     color: inherit;
     width: 132px;
     height: 341px;
     }

Answer 1

要拥有两张图片，您需要两个img元素。要么在文档中开始使用其中两个（不是非常灵活），要么在JavaScript文档中查看document.createElement('img')。

编辑：抱歉，你说背景图片。同样的事情适用，只需创建更多的DIV。您必须将CSS选择器更改为非ID的内容（因为ID应该是唯一的），因此......将其设为类。

.image { /* instead of #image */
  /* all that stuff */
}

HTML中的

和<div class="image">。在JS中，你可以这样做：

var newDiv = document.createElement('div');
newDiv.className = 'image';

如何在JavaScript中实例化背景图片的多个实例？

1 个答案: