How do I instantiate multiple instances of a background picture in JavaScript?_问答_开发者

How do I instantiate multiple instances of a background picture in JavaScript?

开发者 https://www.devze.com 2023-02-19 19:43 出处：网络

Okay, so basically when I click the below buttons I want a new separate pic to show where I specify.That way I can have multiple copies of this pic in different locations on the page at any given time

Okay, so basically when I click the below buttons I want a new separate pic to show where I specify. That way I can have multiple copies of this pic in different locations on the page at any given time. Help?!

<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;
     }

To have two images, you need two img elements. Either start by having two of them in the document (not very flexible), or take a look at document.createElement('img') in JavaScript docs.

EDIT: sorry, you said background images. Same thing applies, just create more DIVs. You will have to change your CSS selector to something that is not ID (since IDs should be unique), so... make it a class.

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

and <div class="image"> in HTML. In JS, you can do:

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

How do I instantiate multiple instances of a background picture in JavaScript?

精彩评论

关注公众号

热门标签

图文推荐

How do I instantiate multiple instances of a background picture in JavaScript?

更多 问答 相关资讯：

精彩评论

关注公众号

热门标签

图文推荐

更多问答相关资讯：